zanUI组件的使用

zanUI-WeApp的GitHub地址：https://github.com/youzan/zanui-weapp

20180725094452415.png

把dist文件克隆到小程序项目中并新建toast的测试文件，如图所示：

文件目录

第一步：在json文件中引入组件（差点忘了，给前面浏览的朋友带来困扰了，今天我就来补充上）

{
  "usingComponents":{
    "zan-toast":"/dist/toast/index"
  }
} 

第二步：编写wxml文件，代码如下：

/* pages/toast/toast.wxss */
.box1{
    width: 60%;
    height: 100rpx;
    border: 1rpx solid #0bb20c;
    border-radius: 20rpx;
    line-height: 100rpx;
    text-align: center;
    margin: 80% auto 0 auto;
}

第四步：编写js文件，代码如下：

// pages/toast/toast.js
const Toast = require('../../dist/toast/toast');
Page({
    showToast: function(){
        Toast({
            selector: '#zan-toast-test',
            message: 'toast内容'
        });
  }

})

效果，如图所示：

测试结果