1. 程式人生 > >微信小程式UI 有贊開源UI嘗試(https://github.com/youzan/zanui-weapp)

微信小程式UI 有贊開源UI嘗試(https://github.com/youzan/zanui-weapp)

1.安裝npm

參考https://blog.csdn.net/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
    });
  }

}));

都可以參考這種模式。