微信小程序wepy框架详解（一）

摘要：微信小程序的一种框架简述由于项目原因，我于两个多月前转到微信端用进行开发。事件发起组件的所有祖先组件会依次接收到事件。注意，如果用了自定义事件，则中对应的监听函数不会再执行。

由于项目原因，我于两个多月前转到微信端用wepy进行开发。
wepy开发风格接近于 Vue.js，支持组件 Props 传值，自定义事件、组件分布式复用Mixin、Redux、计算属性函数computed、模板内容分发slot等等，支持ES6/7部分语法以及less/sass等样式语言。

wepy官方文档地址：wepy官方文档

wepy的基本用法我就不再赘述，请自行看官方文档。
值得一提的是初学者记得在微信开发者工具的项目设置中如下配置，否则很可能项目报错无法运行

1 onLaunch： 用户打开小程序
2 onShow：初始化结束或用户曾在后台运行小程序，现在又打开了小程序
3 onHide：用户切换到其他应用（小程序在后台运行）

1 onLoad： 用户初次打开某页面，每个页面只触发一次
2 onShow：页面一旦显示即触发，包括用户来回切换页面
3 onReady：页面初次渲染完成，每个页面只触发一次
4 onHide：小程序被切换到后台运行或者用户切换到其他页面
5 onUnload： 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload。

Template：

  Plus

JavaScript：

 goodsChange(data, status) {
      // doSomething
      }

注意 事件函数要写在methods里

example：

watch = {
  someName(newValue, oldValue) {
    // doSomething
  }
}

someName为被监听的某数据

newValue为新值，oldValue为旧值

someName一旦变化即触发该函数

监听函数需要写在watch属性里

组件有三种通信方法

$broadcast：由父组件发起，所有子组件都会收到此广播事件，除非事件被手动取消。
如果Page_Index组件发起一个$broadcast事件，那么按先后顺序采用广度优先遍历依次接收到该事件的组件为：
ComA、ComB、ComC、ComD、ComE、ComF、ComG、ComH

$emit：与$broadcast正好相反，事件是向上传递的。
事件发起组件的所有祖先组件会依次接收到$emit事件。
如下图所示，如果组件ComE发起一个$emit事件，那么接收到事件的先后顺序为：组件ComA、页面Page_Index。

$invoke：是一个页面或组件对另一个组件中的方法的直接调用。
通过传入组件相对路径找到相应的组件，然后再调用其方法。

比如Page_Index组件中想要调用ComA组件中的一个名为someMethod方法的事件

this.$invoke("ComA", "someMethodInComA", "someArguments");

再比如再组件ComA中调用组件ComG的某个方法

this.$invoke("./../ComB/ComG", "someMethodInComG", "someArguments")

注意路径为相对路径

组件有两种通信方式

默认通信方式

exapmle using $emit：

super

// events对象中所声明的函数为用于监听组件之间的通信与交互事件的事件处理函数
events = {
"some-event": (p1, p2, p3, p4,  $event) => {
 console.log($event) // 打出触发some-event的事件对象
 console.log(p1, p2, p3, p4)
  }
};

sub

methods = {
    selectType(data) { // 子组件中的某点击事件
    this.$emit("some-event", 1, 2, 3, 4) // 向父组件的some-event监听事件发送参数
  }
};

自定义通信方式（1.48版本新增方式，注意兼容问题）

example:

@customEvent.user="myFn"

@表示时间修饰符

customEvent表示事件名称

.user表示事件后缀，共有三种

@tap.default: 绑定小程序冒泡型事件，.default后缀可省略不写
可以理解为普通的原生冒泡机制
example:

 
   
        this is a Concentric circle
   
 

methods = {
 centerView(data) {
   console.log("center-view has benn taped")
 },
 middleView() {
   console.log("middle-view has been taped")
 },
 wrapperView() {
   console.log("wrapper-view has been taped")
 }
  };

输出是这样的

@tap.stop:绑定小程序捕获型事件
可以理解为原生js的阻止冒泡机制e.stopPropagation()/e.cancelBubble = true
example:

  
       this is a Concentric circle
  

methods = {
 centerView(data) {
   console.log("center-view has benn taped")
 },
 middleView() {
   console.log("middle-view has been taped")
 },
 wrapperView() {
   console.log("wrapper-view has been taped")
 }
  };

输出是这样的

可以理解为tap.stop是在tap.default函数末尾添加了以下代码

e.stopPropagation() // w3c规定的阻止冒泡机制
e.cancelBubble = true // ie的阻止冒泡机制

@eventName.user:绑定用户自定义组件事件，通过$emit触发。
注意，如果用了自定义事件，则events中对应的监听函数不会再执行。
example:

In parentNode

methods = {
   selectTypeInParentNode(data) {
   console.log("in methods")
   console.log(data)
  // do something
 }
}
events = {
  "change": (data) => {
   console.log("in events")
   console.log(data)
 }
}

In childNode

methods = {
   selectTypeInChildNode(data) {
       this.$emit("change", data) 
       // 会调用父组件中的组件的@change属性所指的事件函数
       // 而非调用父组件events里面的监听事件
 }
}

自定义方式输出

两种方式的区别

默认冒泡方式

in parentNode

events = {
    "change": (data) => {
    console.log("in events")
    console.log(data)
}
    }

in childNode

selectType(data) {
    console.log("center-view has benn taped")
    this.$emit("change", data)
  },

printf

自定义方式可以看上面详细说明

printf

此处以动态传值为例

父组件中

 methods = {
  async goodsSelectChange(data, status) { // 传递给子组件的函数
   // doSomething
  },

子组件中

   +

props = { // 接收父组件传递下来的数据
 parentToChildData: {}
};
methods = {
 goodsChange(data, status) {
   this.$emit("parentToChildFunction", data, status) // $emit为向上传值，具体可参考官方文档的组件传值
   // 给父组件的parentToChildFunction属性的函数（goodsSelectChange）传递参数（data，status）
 }
};

WePY 让小程序支持组件化开发的框架

WePY 生命周期

基于微信小程序的在线商城

本文章内容有任何问题请留言提问，若有错误欢迎纠正
本人邮箱 xbc18304999858@gmail.com