微信小程序UI即速开源UI尝试https://github.com/youzan/zanui-weapp-即速微信小程序加盟-即速小程序加盟-即速应用

微信小程序UI即速开源UI尝试https://github.com/youzan/zanui-weapp-即速微信小程序加盟-即速小程序加盟

浏览量：2685 时间：2020-04-06 来源：不回头的蜗牛

1.
1.安装npm
2.
参考https://blog.csdn.net/traguezw/article/details/54577560
3.
可能遇到以下问题
4.
1.下载地址官方下载不了可以在中文网上下载http://nodejs.cn/
5.
2.文章中修改path路径没有必要，可以额外添加global到path后面
6.
2.安装使用
7.
按照官方
#安装项目依赖npminstall#执行组件编译npmrundev8.
过程中会出现warnings不过继续执行好像没有问题
9.
执行rundev后一直卡了很久，也没有提示完成，是不是npm就是这样？然后按照说明导入examples已经可用
10.
3.导入自己项目
11.
进入项目目录分别执行
12.
bowerinit
13.
bowerinstallzanui-weapp--save名字在bower.json里面找
14.
执行完毕后发现多了一个bower_componentszanui-weapp目录
15.
然后在app.wxss里面加入该语句
@import"bower_components/zanui-weapp/dist/index.wxss";16.
添加测试button
buttonclass"zan-btnzan-btn--danger"取消订单/button17.
显示OK。
18.
其他部分参考https://www.youzanyun.com/zanui/weapp#/zanui/base继续实践
19.
4.事件回调的使用
20.
看了眼实现的过程，基本上是Object.assign将组件添加到Page的data域，然后通过.call方法回调到page中，需要在page中定义对应的回调函数。
21.
varZanrequire('../../dist/index');Page(Object.assign({},Zan.Stepper,{data:{stepper1:{stepper:10,min:1,max:20},stepper2:{stepper:1,min:1,max:1},stepper3:{stepper:10,min:1,max:20}},handleZanStepperChange(e){varcomponentIde.componentId;varsteppere.stepper;this.setData({[`${componentId}.stepper`]:stepper});}
22.
}));
23.
都可以参考这种模式。