微信小程序引入原生组件——WeUI组件库,详细步骤
第一步:查看是否可使用npm命令,没有则安装:
我这里已经安装了,如果没有则安装node.js
node官网下载地址:https://nodejs.org/en/
注意这个windows 64位的:
其他系统看这里:点击dowloads
先点击LTS,下面可选 32位或者64位的
下载好安装包,一路next即可。
终端输入 npm -v ,看见版本号 即安装成功
第二步:微信开发工具,打开微信小程序项目,没有就新建一个:
这里我就新建一个 小程序项目:
打开微信开发工具:选择小程序,点击 +
修改好自己的项目名,已经项目路径。点击测试号 (已经申请的,可填写自己的appid)
点击新建:
至此简单的微信小程序项目完成:
第三步:步入正题,引入组件——WeUI组件库
以通过npm方式下载构建,npm包名为weui-miniprogram
①终端进入项目的根目录(我这里是lemon_test),输入 npm init 命令
右击pages 选择终端打开, 输入cd ..命令,即可进入根目录
输入 npm init ,一直回车键即可
②继续输入 npm i weui-miniprogram --production 命令
③回到微信开发者工具,开始npm构建:
点击,详情->本地设置->使用npm模块,勾选npm模块
点击工具,选择构建npm
构建完成,点击确认
第四步:开始使用WeUI组件,验证是否构建成功:
①新建一个自己的页面:
在app.js添加自己的页面 "pages/lemon/lemon", 修改后点击编译,自动生成lemon文件夹及其相关文件
②打开微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/form.html
JSON内容:覆盖到lemon.josn中(注意修改路径 ../miniprogram_npm/weui-miniprogram/)
WXML内容:覆盖到lemon.wxml
JAVASCRIPT内容:覆盖到lemon.js
根据开发文档:
app.wxss添加内容:@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
添加好,点击编译:即可
此时右侧表单样式已经成功出现,组件库构建成功!!!
第五步:试着添加其他样式:以Msg样式为例:
新建自己的Msg页面:
在app.josn中添加"pages/msg/msg",
点击编译,自动生成我们的页面
查看开发文档,
将JSON内容覆盖到msg.json中(注意修改路径)
WXML内容覆盖到msg.wxml中
点击编译,大家发现左侧样式已经出现。你学会吗?愉快的开发属于自己的微信小程序吧!
谢谢查看~