微信小程序 引用 weui 问题合集

问题及解决

1. 微信小程序如何引入 weui

# 1. npm 初始化
npm init -y
# 2. npm 安装 weui
npm install weui-miniprogram --production
# 3. 编译 NPM 包生成 miniprogram_npm，我的小程序开发工具版本是 RC 1.05.2203251
- 左上角点击 （工具）-> 构建npm -> 出现 miniprogram_npm并且 weui-miniprogram在里面就可以了
- 我这个版本已经找不到 使用 NPM 这个选项了
# 4. 在 app.json 中间添加
	"sitemapLocation": "sitemap.json",
	...
    "useExtendedLib": {
        "weui": true
# 5. 在随便一个页面的json中导入 
    "usingComponents": {
        "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
    }
# 6. 在页面中引用

<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
    <view>test content</view>
</mp-dialog>

# 打开没有报错，就大功告成了

2. weui.wxss not found from “./app.wxss”

具体错误如下
[ WXSS 文件编译错误] 
path `/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss` not found from `./app.wxss`.(env: Windows,mp,1.05.2203251; lib: 2.23.4)

- 由于不能将 useExtendedLib 选项和这个直接导入一起用，将这句话删掉就好了

3. usingComponents mp-dialog 未找到

   错误如下
   [ miniprogram/pages/workshop/person_manage/person_manage.json 文件内容错误] miniprogram/pages/workshop/person_manage/person_manage.json: ["usingComponents"]["mp-dialog"] 未找到(env: Windows,mp,1.05.2203251; lib: 2.23.4)
   

   • 使用 import 方法导入，不能生效，目前找不到方法，建议使用 useExtendedLib 进行导入

吐槽

1. 微信小程序 一边模仿 前端开发，却又确实很多实用的功能，非常不方便
2. 另一个生态不是很好，开发工具和开发文档要不就是打不开，要不就跟现在最新的版本对不上，本人也联系了微信官方，对方回复说好的，会反馈给开发人员，结果一个月了，文档也没更新