微信小程式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
});
}
}));
都可以參考這種模式。