wepy（minUI）框架學習

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

1、minUI的安裝方法：

a、新創建.bat 文件，裏面放你所需要用到的插件；一次只能寫一個插件名字

b、新建package.json，官網有具體的寫法；
c、在所在文件夾安裝全局依賴：npm install
d、在所在文件運行創建的文件夾 ： type min_build.bat | cmd

小程序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,
    })
  }
}

---

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
  },
}

— 2018-11-03 —
1、wepy框架下組件的調用

/*調起組件，添加事件 結構 */
<template>
<view class="form-box item-hd">
  <button class="btn" @tap="showShare">分享</button>
</view> 
<elect />
</template>
<!-- end -->

/* 被調起的組件 elect 結構 */
<view class="shade-box" hidden="{{!show}}">
  <view class="weui-cell">
    <view class="weui-cell-bd"></view>
    <view class="weui-cell-ft" @tap="hide"></view>   /* 添加關閉事件 */
  </view>
</view>

// 引入組件
<script>
  import wepy from 'wepy';
  import elects from '../../components/electList/index'

  export default class Index extends wepy.page {
    config = {
      navigationBarTitleText: '龍**'
    }
    components = {
      elect: elects
    }
    methods = {
      showShare : function() {
        this.invoke('elect','show');
        this.$apply();
    }
  }
</script>
// --- end ---

/* 被調起的組件 elect */
export default class Index extends wepy.component {
  props = {
    show : Boolean
  }
  methods = {
    show() {
      this.show = true;
    }
    hide() {
      this.show = false;
    }
  }
  // --- end ---
}

1、C# invoke() 方法會順着控件樹向上搜索，直到找到創建控件的那個線程（通常是主線程），然後進入那個線程改變控件的外觀，確保不發生線程衝突。

---

1、樣式中需要注意組件與組件的樣式不能重名寫樣式，不然會相互影響

/* 原始結構部分 */
<template>
<view></view>
</template>

<script>
	
	import wepy from 'wepy';
	// 引用外部組件，採用駝峯式命名
	import Panel from '../components/panel';
	
	// 聲明一個Page頁面實例，與聲明組件的會不同 ：component / page
	// export default class MyComponent extends wepy.component {}
	
	export default class Index extends wepy.page {
		config = {
			navigationBarTitleText: '項目名稱'
		}
		//可用於頁面模板中綁定的數據
		data = {
		}
		onLoad() {
		}
		// 事件
		methods = {
		}
		// 聲明頁面中將要使用到的組件
		components = { 
		}
	}
</script>

<style lang="less">
</style>

項目循環組件遵循: repeat

// 這裏for省略了小程序原生的 wx:
<repeat for="{{list}}" key="index" index="index" item="item">
</repeat >

<script>
	//wepy改變this綁定數據
	clickTab: function(e) {
		this.currentTab= e.currentTarget.dataset.current
	}
</script>

微信小程序調試窗口取消勾選：