WeChat applet UI Youzan open source UI attempt (https://github.com/youzan/zanui-weapp)

1. Install npm

Reference https://blog.csdn.net/traguezw/article/details/54577560

May encounter the following problems

1. The download address cannot be downloaded from the official website. You can download it on the Chinese website http://nodejs.cn/

2. It is not necessary to modify the path in the article, you can add global to the back of the path

2. Install and use

According to the official

#Install project dependencies
npm install
#Execute component compile 
npm run dev

Warnings will appear during the process, but there seems to be no problem with continuing to execute

After executing run dev, it has been stuck for a long time, and there is no prompt to complete. Is this the case with npm? Then follow the instructions to import the examples already available

3. Import your own project

Enter the project directory and execute separately 

bower init

bower install zanui-weapp --save The name is found in bower.json

After the execution, I found an additional bower_components\zanui-weapp directory

Then add this statement in app.wxss

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

add test button

< button class = "zan-btn zan-btn--danger"> Cancel order </ button >

OK is displayed.

For other parts, please refer to https://www.youzanyun.com/zanui/weapp#/zanui/base and continue to practice

4. The use of event callbacks

Looking at the implementation process, basically, Object.assign adds the component to the data field of the Page, and then calls back to the page through the .call method. The corresponding callback function needs to be defined in the 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
    });
  }

}));

You can refer to this model.