微信小程序UI 有赞开源UI尝试(https://github.com/youzan/zanui-weapp)

1.安装npm

参考https://blog.youkuaiyun.com/traguezw/article/details/54577560

可能遇到以下问题

1.下载地址官方下载不了可以在中文网上下载http://nodejs.cn/

2.文章中修改path路径没有必要，可以额外添加global到path后面

2.安装使用

按照官方

# 安装项目依赖
npm install
# 执行组件编译
npm run dev

过程中会出现warnings不过继续执行好像没有问题

执行run dev后一直卡了很久，也没有提示完成，是不是npm就是这样？然后按照说明导入examples已经可用

3.导入自己项目

进入项目目录 分别执行 

bower init

bower install zanui-weapp  --save  名字在bower.json里面找

执行完毕后 发现多了一个bower_components\zanui-weapp目录

然后在app.wxss里面加入该语句

@import " bower_components/ zanui-weapp/ dist/ index. wxss";

添加测试button

< button class= "zan-btn zan-btn--danger">取消订单 </ button >

显示OK。

其他部分参考https://www.youzanyun.com/zanui/weapp#/zanui/base 继续实践

4.事件回调的使用

看了眼实现的过程，基本上是Object.assign将组件添加到Page的data域，然后通过.call方法回调到 page中，需要在page中定义对应的回调函数。

var Zan = require('../../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) {
    var componentId = e.componentId;
    var stepper = e.stepper;


    this.setData({
      [`${componentId}.stepper`]: stepper
    });
  }

}));

都可以参考这种模式。