wepy框架学习（更新）

参考文献： wepy官网

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框架学习（更新）

2018-11-07

2、show() 与 hide() 的用法

<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() {
    this.show = !this.show
  },
  showTicket() {
    var that = this
    that.setData({
        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>

wepy框架学习（更新）

微信小程序调试窗口取消勾选：
wepy框架学习（更新）