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>

微信小程序调试窗口取消勾选：