wepy（minUI）架構學習

學習文獻：
鵝廠— wepy學習彙總	wepy官網
minUI官方使用手冊
——
閱讀結構：
1、小程式minUI安裝方法
2、小程式wxcharts表格實作方式
3、wepy的 .wpy檔案基本結構

wepy（minUI）架構學習

1、minUI的安裝方法：

a、新建立.bat 檔案，裡面放你所需要用到的插件；

一次隻能寫一個插件名字

wepy（minUI）架構學習

b、建立package.json，官網有具體的寫法；

c、在所在檔案夾安裝全局依賴：npm install

d、在所在檔案運作建立的檔案夾： type min_build.bat | cmd

wepy（minUI）架構學習

小程式wxcharts表格實作方式：

<template>
    <view class="g-canvas-box">
        <canvas canvas-id="areaCanvas" class="canvas" bindtouchstart="touchHandler"></canvas>
    </view>
</template>
<script>
import wepy from 'wepy';
import wxCharts from '../../utils/wxcharts-min.js';

export default class Wxcharts extends wepy.component {
    data = {
        canvasId: 'areaCanvas'
    }
    props = {

        syncCategories: {
            type: Object,
            default: ['2016-08', '2016-09', '2016-10', '2016-11', '2016-12', '2017']
        },
          // 父頁面傳入，請求url
        syncSeries: {
            type: Object,
            default: [{
                name: '成交量1',
                data: [70, 40, 65, 100, 34, 18],
                format: function (val) {
                    return val.toFixed(2) + '萬';
                }
            },{
                name: '成交量2',
                data: [15, 20, 45, 37, 4, 80],
                format: function (val) {
                    return val.toFixed(2) + '萬';
                }
            }]
        },
        canvasId: String,

    };
    onLoad () {
        var windowWidth = 320;
        try {
          var res = wx.getSystemInfoSync();
          windowWidth = res.windowWidth;
        } catch (e) {
          console.error('getSystemInfoSync failed!');
        }
        if (!this.data.canvasId) {
            console.warn('元件需綁定 canvasId 變量，例：<wx-canvas id="mychart-dom-bar" ' +
                'canvas-id="mychart-bar" ></wx-canvas>');
            return;
        }

        new wxCharts({
            canvasId: this.data.canvasId,
            type: 'area',
            categories: this.data.syncCategories,
            series: this.data.syncSeries,
            yAxis: {
                title: '成交金額 (萬元)',
                format: function (val) {
                    return val + '萬';
                },
                min: 0
            },
            width: 300,
            height: 200
        });

    };
}
</script>

<style>
    .g-canvas-box {
        padding: 26rpx 0;
        margin-bottom: 26rpx;
        background: #fff;
    }
    .canvas {
        width: 100%;
        height: 350rpx;
        margin: 0 auto;
    }
</style>

target：一個觸發事件的對象的引用，當事件處理程式在事件的冒泡或捕獲階段被調用時；

currentTarget

始終監聽事件者

，

在捕獲和起泡階段

，該屬性是非常有用的，因為在這兩個節點，他不同于target屬性。他所指的是當事件周遊DOM時，辨別事件的目前目标，他總是引起事件處理程式附加到元素，而不是even.target，他辨別事件發生的元素；

在點選的是添加事件元素的子元素時，

就用e.currentTarget 來擷取父元素的值

，其指向的是添加監聽事件的對象；否則，用e.target來擷取子元素的值，其指向出發事件監聽的對象；

3、用id傳值進行跳轉

<repeat for="{{products}}" key="index" index="index" item="product">
  <view class="form-box">
   <button class="btn" @tap='naviskipUrl' data-id={{product.id}}></button>
  </view>
</repeat>

props = {
  products: {}
}
methods = {
  naviskipUrl: function(e) {
    var id = e.currentTarget.dataset.id
    var url = '/pages/index/index?id='+ id + "&status=" + this.status;
    // 小程式帶有三種跳轉方式
    id && wx.navigateTo({
      url : url,
    })
  }
}

wepy（minUI）架構學習

2、hidden = “show()” 與 hide() 的用法

this.show = !this.show - 為全局變量調用，需要在全局( data 或者 props )設定show: false ( Boolean ) 的值，否則會報undefined錯

<view class="g-popup-box" hidden="{{!show}}">
    <view class="m-item-box">
        <view class="item-hd">
            <label>恭喜您獲得奧斯哥納</label>
            <label>100 元優惠券</label>
        </view>
        <view class="item-bd">
            <label>￥<em>100</em>券</label>
            <label>滿1500可用</label>
        </view>
        <view class="item-ft" @tap="navigateUrl" data-url="/pages/member/join">
            <label>馬上提取</label>
        </view>
    </view>
    // 關閉按鈕
    <view class="m-img-box" @tap="showPoster">
        <image mode="aspectFill" src="/images/icon-close.png" class="imgs"></image>
    </view>
</view>
// 彈出按鈕
<view class="g-ticket-box" @tap="showTicket">
    <view class="m-item-img">
        <image mode="widthFix" src="/images/icon-ticket.png" class="imgs"></image>
    </view>
</view>

methods = {
  navigateUrl: function(e) {
    var url = e.currentTarget.dataset.url;
    url && wx.navigateTo({
        url: url,
    })
  },
  // 關閉
  showPoster(e) {
    this.show = !this.show
  },
  // 打開
  showTicket(e) {
    // 局部調用
    var that = this
    that.setData({
        show : true
    })
  },
  // wepy簡寫方式
  showTicket(e) {
    var that = this
    this.show = true
  },
}