微信小程序 | WeUI mp-dialog引入报错

因为开发微信小程序的次数还很少,所以不少都是看着文档来写的,但是今天使用了一下WeUI,引入mp-dialog组件出现了问题,官网的代码是这样的

{
  "usingComponents": {
    "mp-dialog": "../components/dialog/dialog"
  }
}

那我理所当然的就这样拿到我的代码中去了,但是保存刷新之后却报错了(;′⌒`)

[ pages/buyer/collectionshops/collectionshops.json 文件内容错误] pages/buyer/collectionshops/collectionshops.json: ["usingComponents"]["mp-dialog"]: "../components/dialog/dialog" 未找到

引入出问题了,然后仔细一看,路径怎么是../components/dialog/dialog,怎么可能是从components文件夹引入的呢?所以又到官网上看了看,在“快速上手”这里找到了答案,导入的路径应该应该是这样

{
  "usingComponents": {
    "mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog"
  }
}

这样改完就好了,也可以正常引入使用了。

### 正确引入并配置 WeUI 框架的方法 要在微信小程序项目中正确引入并配置 WeUI 框架,可以通过以下方法完成: #### 1. 下载 WeUI 的源码 访问腾讯 GitHub 页面获取 WeUI 的最新版本代码。通过浏览器打开链接后,在页面上找到下载按钮或者克隆仓库地址来获取完整的 WeUI 库文件[^2]。 #### 2. 配置全局设置 `app.json` 为了支持扩展库功能,需在项目的根目录下的 `app.json` 文件中启用扩展库选项 `"useExtendedLib"` 并将其值设为 `{ "weui": true }`。这一步是为了让整个应用能够识别和加载 WeUI 组件[^3]。 ```json { "useExtendedLib": { "weui": true } } ``` #### 3. 在具体页面 JSON 中声明所需组件 对于需要使用特定 WeUI 组件的页面,应在该页面对应的 `.json` 文件里定义这些组件的位置路径。例如要使用对话框组件,则添加如下字段到目标页面的 json 文件中: ```json { "usingComponents": { "mp-dialog": "weui-miniprogram/dialog/dialog" } } ``` 以上操作完成后即可开始调用已注册好的 WeUI 控件于 WXML 和 WXSS 当中进行布局设计以及样式调整等工作流程之中去了。 ```python # 示例 Python 脚本用于演示如何自动化处理某些任务(此部分仅作为补充说明) import os def setup_weui_in_project(project_path): app_json_file = os.path.join(project_path, 'app.json') with open(app_json_file, 'r+', encoding='utf-8') as f: content = f.read() if '"useExtendedLib"' not in content: updated_content = content.replace('}', ',\n "useExtendedLib": {\n "weui": true\n }\n}') f.seek(0) f.write(updated_content) setup_weui_in_project('/path/to/your/miniproject') ``` 上述脚本展示了怎样利用简单的编程技巧帮助开发者快速修改应用程序配置文件以适应新的需求变化情况。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值