前言
今天在写微信小程序前端页面,想引入weui组件库来完成开发。结果按着官方文档来遇到了一堆问题,最后靠着不断百度查资料才最终解决。所以将过程记录一下,避免后面再遇到这类坑。
注意:本文默认读者已知道怎么使用npm
1. 初始化
以管理员身份运行命令行窗口(cmd),在cmd中进入项目的根目录。然后输入以下命令:
npm init
后面一路按回车健即可,最终会在项目的根目录中创建出一个名为package.json的文件。
2. 安装weui组件库
在cmd中紧接着输入以下命令:
npm install weui-miniprogram
命令执行完毕后会多出来一个node_modules文件夹,里面包含了weui组件库。
3. 构建npm
在微信开发者工具中,选择“工具”->“构建npm”。如无意外会出现类似“没有找到可以构建的NPM包……”这样的报错。
这时就需要在项目根目录找到package.config.json文件,修改相关的配置如下:
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
]
}
}
继续在开发者工具中的“详情”->“本地设置”里检查是否勾选上“使用npm模块”选项,若没勾选则勾选上。
完成上述配置后,重新构建npm,即可构建完成。
4. 重启项目
在开发者工具中“项目”->“重新打开此项目”,完成对项目的重启。
注意:这一步非常重要!!!否则引入组件会提示找不到文件!!!
5. 引入wxss
在app.wxss中,引入weui库的wxss文件
@import 'miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
引入时要根据实际情况调整路径,但最长后缀均为
/weui-miniprogram/weui-wxss/dist/style/weui.wxss
6. 引入组件
在想要使用组件的页面对应的js文件中,对组件进行的引入。一定要注意自己项目的目录结构!!!
而官方文档的写法是
如果直接照搬官方文档的写法,则忽略了目录结构,会报错!!
接着在要使用组件的页面对应的wxml文件中使用该组件即可
<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
<view>test content</view>
</mp-dialog>
效果如下:
后记
不得不说,前端开发的坑实在是太多了,上面记录的过程我摸索了一个多小时。看来平时一定要多注意总结才行,不然真的非常消耗时间!!!
创作不易,觉得有用麻烦点个赞,谢谢~~~
版主 你这个要补充一下啊 如果选择的是 ts less 患者 ts sass 这个配置 "miniprogramNpmDistDir": "./miniprogram/" 然后再构建nom 不然 wxss编译会出错
我超,还有这种坑,收藏了
新手确实会遇到很多问题,感觉看完文章很有帮助,赞~
确实。刚接触小程序开发没多久,老多问题了
请问,weui 中没有封装的组件怎么使用呢
看完文章很有帮助,必须给你点个赞
按以上方法构建完成,但在引入weui.wxss,却报错找不到文件,是怎么回事?
[ WXSS 文件编译错误] ./app.wxss
File not found: miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss(env: macOS,mp,1.06.2402040; lib: 3.4.3)
网上找了一堆,终于找到一个成功的了,感谢楼主,大大的赞
我真是呵呵了, 我特么在https://wechat-miniprogram.github.io/weui/docs/#%E5%9C%A8%E7%BA%BF%E9%A2%84%E8%A7%88
官方文档扫的二维码 , 这个玩意还是乱的结构 根本就没修 怎么个东西?
''没有找到可以构建的NPM包"这个有点坑,默认是找miniprogramRoot指定的目录,而且目录下要有package.json;而最新版工具新建的ts工程,这个json又是放在最外层的,那为什么工具模板不默认配置好packNpmManually相关的字段!
感谢楼主啊 搞了一上午不知道哪儿出错 看完立马搞定👍🏻