微信小程序引入原生组件——WeUI组件库,详细步骤

第一步:查看是否可使用npm命令,没有则安装:

微信小程序引入原生组件——WeUI组件库,详细步骤

我这里已经安装了,如果没有则安装node.js

 node官网下载地址:https://nodejs.org/en/微信小程序引入原生组件——WeUI组件库,详细步骤

注意这个windows 64位的:

 其他系统看这里:点击dowloads

微信小程序引入原生组件——WeUI组件库,详细步骤

先点击LTS,下面可选 32位或者64位的 

微信小程序引入原生组件——WeUI组件库,详细步骤

下载好安装包,一路next即可。

终端输入 npm -v   ,看见版本号 即安装成功

微信小程序引入原生组件——WeUI组件库,详细步骤

第二步:微信开发工具,打开微信小程序项目,没有就新建一个:

这里我就新建一个 小程序项目:

打开微信开发工具:选择小程序,点击 + 

微信小程序引入原生组件——WeUI组件库,详细步骤

修改好自己的项目名,已经项目路径。点击测试号 (已经申请的,可填写自己的appid)

微信小程序引入原生组件——WeUI组件库,详细步骤

点击新建:

微信小程序引入原生组件——WeUI组件库,详细步骤

至此简单的微信小程序项目完成:

微信小程序引入原生组件——WeUI组件库,详细步骤

第三步:步入正题,引入组件——WeUI组件库

以通过npm方式下载构建,npm包名为weui-miniprogram

①终端进入项目的根目录(我这里是lemon_test),输入 npm init 命令

右击pages 选择终端打开, 输入cd ..命令,即可进入根目录

微信小程序引入原生组件——WeUI组件库,详细步骤

微信小程序引入原生组件——WeUI组件库,详细步骤

输入 npm init ,一直回车键即可

微信小程序引入原生组件——WeUI组件库,详细步骤

②继续输入 npm i weui-miniprogram --production 命令

微信小程序引入原生组件——WeUI组件库,详细步骤

③回到微信开发者工具,开始npm构建:

 点击,详情->本地设置->使用npm模块,勾选npm模块

微信小程序引入原生组件——WeUI组件库,详细步骤

点击工具,选择构建npm

微信小程序引入原生组件——WeUI组件库,详细步骤

构建完成,点击确认

微信小程序引入原生组件——WeUI组件库,详细步骤

第四步:开始使用WeUI组件,验证是否构建成功:

①新建一个自己的页面:

在app.js添加自己的页面 "pages/lemon/lemon",  修改后点击编译,自动生成lemon文件夹及其相关文件

微信小程序引入原生组件——WeUI组件库,详细步骤

②打开微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/form.html

微信小程序引入原生组件——WeUI组件库,详细步骤

JSON内容:覆盖到lemon.josn中(注意修改路径 ../miniprogram_npm/weui-miniprogram/)

微信小程序引入原生组件——WeUI组件库,详细步骤

WXML内容:覆盖到lemon.wxml

微信小程序引入原生组件——WeUI组件库,详细步骤

JAVASCRIPT内容:覆盖到lemon.js

微信小程序引入原生组件——WeUI组件库,详细步骤

根据开发文档:

微信小程序引入原生组件——WeUI组件库,详细步骤

app.wxss添加内容:@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

微信小程序引入原生组件——WeUI组件库,详细步骤

添加好,点击编译:即可

微信小程序引入原生组件——WeUI组件库,详细步骤

此时右侧表单样式已经成功出现,组件库构建成功!!!

第五步:试着添加其他样式:以Msg样式为例:

微信小程序引入原生组件——WeUI组件库,详细步骤

新建自己的Msg页面:

在app.josn中添加"pages/msg/msg", 

微信小程序引入原生组件——WeUI组件库,详细步骤

点击编译,自动生成我们的页面

微信小程序引入原生组件——WeUI组件库,详细步骤

 查看开发文档,

将JSON内容覆盖到msg.json中(注意修改路径)

WXML内容覆盖到msg.wxml中

微信小程序引入原生组件——WeUI组件库,详细步骤

微信小程序引入原生组件——WeUI组件库,详细步骤

微信小程序引入原生组件——WeUI组件库,详细步骤

点击编译,大家发现左侧样式已经出现。你学会吗?愉快的开发属于自己的微信小程序吧!

谢谢查看~