1、uni-ui 使用 npm 方式安装
2、通过 easycom 配置 custom
"easycom": {
"autoscan": false,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
}3、在页面中使用 uni-ui 组件
4、启动 npm run dev:h5
s***@foxmail.com
- 发布：2022-11-05 11:53
- 更新：2022-11-17 14:50
- 阅读：522
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： Alpha
HBuilderX版本号： 3.6.8
浏览器平台： Chrome
浏览器版本： 107
项目创建方式： HBuilderX
操作步骤：
预期结果：
页面能正常显示
页面能正常显示
实际结果：
页面报错，提示找不到组件
页面报错，提示找不到组件
bug描述：
"easycom": {
"autoscan": false,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
}uniapp 在处理 theme 时，会将 pages.json 中的所有属性处理一遍，所以当 value 值存在 @ 符号开头就会被处理，最终导致 custom 中的 ^uni-(.*) 变成了 undefined
下面的代码来自 @dcloudio\uni-cli-shared\dist\json\theme.js 文件：
function initTheme(manifestJson, pagesJson) {
const platform = process.env.UNI_PLATFORM === 'app' ? 'app-plus' : process.env.UNI_PLATFORM;
const manifestPlatform = manifestJson['plus'] || manifestJson[platform] || {};
const themeConfig = (0, exports.normalizeThemeConfigOnce)(manifestPlatform);
return (0, uni_shared_1.normalizeStyles)(pagesJson, themeConfig);
}（注意：上面代码中的 pagesJson 变量是整个 pages.json）
normalizeStyles 处理了 pagesJson 对象，导致所有的配置被处理了一遍
感觉 normalizeStyles 处理的应该是 pagesJson.pages 才对
所有 @dcloudio/xxx 的版本为 3.0.0-alpha-3060820221027003
可以暂时在 HX 根目录//plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-shared/dist 中修改 normalizeStyles 方法
在 isString(styleItem) && styleItem.startsWith('@') 的判断中修改为以下代码：
const _key = styleItem.replace('@', '');
let _styleItem = modeStyle[_key] || styleItem; // 这里判断找不到则使用原有值
switch (key) {
case 'titleColor':
_styleItem = normalizeTitleColor(_styleItem);
break;
case 'borderStyle':
_styleItem = normalizeTabBarStyles(_styleItem);
break;
}
return _styleItem;
s***@foxmail.com (作者)
OK
2022-11-08 11:05