快速上手微信小程序第三方UI Vant weapp

快速上手微信小程序第三方UI Vant weapp

最近在搞微信小程序开发，适应了web开发的那一套，搞起小程序很难受，来试试这个UI框

1、安装node.js

node.js内置了npm，过会我们要用到的

如果安装过直接跳转到下一步

安装nodejs非常简单，在官网下载安装就行

2、安装vant weapp

使用cmd打开微信小程序的根目录

执行：

npm i @vant/weapp -S --production

执行命令完之后，项目根目录会出现node_modules文件夹

3、构建npm

去微信开发者中点工具-构建npm，构建npm需要一些时间，完成后根目录增加一个文件夹miniprogram_npm，里面放的是我们npm执行过程真正引用的包。可以理解为小程序版本的node_moudles

这时候package.json文件中，dependencies对象中出现了@vant/weapp属性

4、引用vant-weapp

注册组件
以button组件为例，在index.json文件中增加一个属性,这里的路径是组件在miniprogram_npm文件夹下的路径

"usingComponents": {
  "van-button": "@vant/weapp/button"
}

在页面中，如index.wxml中，添加就可以成功使用有赞的button了

<van-button type="primary">按钮</van-button>

5、简单组件的使用方式

1、更换按钮颜色

<van-button type="primary" color="blue">按钮</van-button>

直接添加color属性就行

2、添加图标

<van-button type="primary" icon="like-o" color="blue">按钮</van-button>

直接添加icon属性，weapp提供了很多好看的图标，当然可以定义自己的图标

2、添加图标