众所周知WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。
在初学小程序开发时,我也想使用WeUI进行我的小程序开发,但是在初始化搭建的项目中引入WeUI花了我一个晚上的时间,终于成功引入WeUI。现在把我这一晚上踩过的坑做以下总结:
踩坑一:微信开发者工具的版本问题
根据WeUI官网提示,最新的 nightly 版开发者工具开始支持,同时基础库从支持 npm 的版本(2.2.1)起支持支持引用weui扩展库。
当我在引用不成功的时候首先查看自己的微信开发者工具的版本,果然不够高,然后我就开始了升级之路。根据微信开发者工具提示的更新,更新了一版nightly,没想到还是不行,然后继续更新~没完没了~
最后我直接从官网下载了稳定版 Stable Build (1.05.2203070)进行安装。
这里我想说的是,对于微信开发者工具的更新,最好使用官网直接下载更新到最新最稳定的版本,这里是真的不建议使用nightly版本进行开发,nightly版本需要经常进行更新,有时候真的很影响开发,就今晚,我明明按照提示立即更新了重新安装更新了软件,可是重新打开微信开发者工具的时候还是会提示安装,因为nightly版本是日常构建版本(基于 NW.js 0.49.3) ,用于尽快修复缺陷和敏捷上线小的特性;开发自测验证,稳定性欠佳。所以开发过程中还是使用稳定版本比较好。
微信开发者工具后安装WeUI
初始化项目中没有package.json 文件,首先在项目根目录下的空白处点击鼠标右键,然后选择“在外部终端窗口中打开”
在终端中输入命令生成package.json 文件
npm init
然后执行命令安装weui 依赖包
npm install --save weui-miniprogram --production
执行完以上命令后,项目中将多出一个文件夹node_modules和package.json 文件
执行“工具” > “构建 npm ” 一直不成功问题
在上面操作执行完后,进行构建npm 依然不成功,提示如下:
根据提示,找到project.config.json中的packNpmManually和packNpmRelationList
将 “packNpmManually”: false,修改为true 也不成功。
最后将project.config.json中的"miniprogramRoot": "miniprogram/"删掉,然后再执行命令:
npm install
命令执行完后,再进行构建npm 此时成功在项目中生成了文件miniprogram_npm
以上操作完成后,就可以进行WeUI的使用了
如何使用WeUI将在下篇文章为大家详细讲解!
谢谢关注和阅读,希望能帮上大家~