小程序中使用WeUI及ZanUI

WeUI

小程序WeUI的github地址https://github.com/Tencent/weui-wxss

小程序WeUI的线上的预览样式的地址https://weui.io/

1.下载后

小程序中使用WeUI及ZanUI

2.将文件夹下的weui.wxss放到项目的根目录下,与app.wxss同级

3.在app.wxss中引入weui.wxss

@import 'weui.wxss'

小程序中使用WeUI及ZanUI                 小程序中使用WeUI及ZanUI

4.如何查看 官方示例的代码 新建一个项目,是下载下来的dist文件夹,直接运行会报错,解决办法,在dist文件中的style中,加入weui.wxss,然后就可以运行

小程序中使用WeUI及ZanUI

5.用到哪个组件就可以直接复制example中的代码

ZanUI  

ZanUI已升级为 Vant Weapp

guthub地址 https://github.com/youzan/zanui-weapp

示例代码及组件库的预览https://youzan.github.io/vant-weapp/#/intro

1 通过 npm 安装,官网比较推荐的,小程序也支持npm 构建了

第一步 重要!!! 在小程序的根目录下的输入命令 npm init

小程序中使用WeUI及ZanUI

2.直接安装   npm i vant-weapp -S --production

小程序中使用WeUI及ZanUI

3.在微信的开发者工具中,勾选使用npm 构建

小程序中使用WeUI及ZanUI

4.点击 微信开发者工具中的,工具下的构建npm 

5.使用方法,直接安照官网 https://youzan.github.io/vant-weapp/#/quickstart的某个组件直接使用就行