微信小程序第三方框架对比：WePY、MpVue与Taro深度解析

import wepy from 'wepy';
export default class MyPage extends wepy.page {
// export default class MyComponent extends wepy.component {
  customData = {} // 自定义数据
  customFunction ()　{} //自定义方法
  onLoad () {} // 在Page和Component共用的生命周期函数
  onShow () {} // 只在Page中存在的页面生命周期函数
  config = {}; // 只在Page实例中存在的配置数据，对应于原生的page.json文件
  data = {}; // 页面所需数据均需在这里声明，可用于模板数据绑定
  components = {}; // 声明页面中所引用的组件，或声明组件中所引用的子组件
  mixins = []; // 声明页面所引用的Mixin实例
  computed = {}; // 声明计算属性（详见后文介绍）
  watch = {}; // 声明数据watcher（详见后文介绍）
  methods = {}; // 声明页面wxml中标签的事件处理函数。注意，此处只用于声明页面wxml中标签的bind、catch事件，自定义方法需以自定义方法的方式声明
  events = {}; // 声明组件之间的事件处理函数
}

Vue
 beforeCreate
 created
 beforeMount
 mounted
 beforeUpdate
 updated
 activated
 deactivated
 beforeDestroy
 destroyed
 app 部分
 onLaunch，初始化
 onShow，当小程序启动，或从后台进入前台显示
 onHide，当小程序从前台进入后台
 page 部分
 onLoad，监听页面加载
 onShow，监听页面显示
 onReady，监听页面初次渲染完成
 onHide，监听页面隐藏
 onUnload，监听页面卸载
 onPullDownRefresh，监听用户下拉动作
 onReachBottom，页面上拉触底事件的处理函数
 onShareAppMessage，用户点击右上角分享
 onPageScroll，页面滚动
 onTabItemTap, 当前是 tab 页时，点击 tab 时触发 （mpvue 0.0.16 支持）

new Vue({
 data: {
  a: 1
 },
 created () {
  // `this` 指向 vm 实例
  console.log('a is: ' + this.a)
 },
 onShow () {
  // `this` 指向 vm 实例
  console.log('a is: ' + this.a, '小程序触发的 onshow')
 }
})
// => "a is: 1"

class Clock extends Component {
 constructor (props) {
  super(props)
  this.state = { date: new Date() }
 }
 componentDidMount() {
 }
 componentWillUnmount() {
 }
 render () {
  return (
   <View>
    <Text>Hello, world!</Text>
    <Text>现在的时间是 {this.state.date.toLocaleTimeString()}.</Text>
   </View>
  )
 }
}

<template>
  <!-- 注意，使用for属性，而不是使用wx:for属性 -->
  <repeat for="{{list}}" key="index" index="index" item="item">
    <!-- 插入<script>脚本部分所声明的child组件，同时传入item -->
    <child :item="item"></child>
  </repeat>
</template>
<script>
  import wepy from 'wepy';
  // 引入child组件文件
  import Child from '../components/child';
  export default class Index extends wepy.component {
    components = {
      // 声明页面中要使用到的Child组件的ID为child
      child: Child
    }
    data = {
      list: [{id: 1, title: 'title1'}, {id: 2, title: 'title2'}]
    }
  }
</script>

<!-- 在这种嵌套循环的时候， index 和 itemIndex 这种索引是必须指定，且别名不能相同，正确的写法如下 -->
<template>
  <ul v-for="(card, index) in list">
    <li v-for="(item, itemIndex) in card">
      {{item.value}}
    </li>
  </ul>
</template>

const list = this.state.list.map(l => {
 if (l.selected) {
  return <li>{l.text}</li>
 }
}).filter(React.isValidElement)

const list = this.state.list
 .filter(l => l.selected)
 .map(l => {
  return <li>{l.text}</li>
 })

// 事件映射表，左侧为 WEB 事件，右侧为 小程序 对应事件
{
  click: 'tap',
  touchstart: 'touchstart',
  touchmove: 'touchmove',
  touchcancel: 'touchcancel',
  touchend: 'touchend',
  tap: 'tap',
  longtap: 'longtap',
  input: 'input',
  change: 'change',
  submit: 'submit',
  blur: 'blur',
  focus: 'focus',
  reset: 'reset',
  confirm: 'confirm',
  columnchange: 'columnchange',
  linechange: 'linechange',
  error: 'error',
  scrolltoupper: 'scrolltoupper',
  scrolltolower: 'scrolltolower',
  scroll: 'scroll'
}

<button onclick="activateLasers">
 Activate Lasers
</button>

<button onClick={this.activateLasers}>
 Activate Lasers
</button>

class Toggle extends React.Component {
 constructor (props) {
  super(props)
  this.state = {isToggleOn: true}
 }
 onClick = (e) => {
  e.stopPropagation()
  this.setState(prevState => ({
   isToggleOn: !prevState.isToggleOn
  }))
 }
 render () {
  return (
   <button onClick={this.onClick}>
    {this.state.isToggleOn ? 'ON' : 'OFF'}
   </button>
  )
 }
}

// 原生代码:
wx.request({
  url: 'xxx',
  success: function (data) {
    console.log(data);
  }
});
// WePY 使用方式, 需要开启 Promise 支持，参考开发规范章节
wepy.request('xxxx').then((d) => console.log(d));
// async/await 的使用方式, 需要开启 Promise 和 async/await 支持，参考 WIKI
async function request () {
  let d = await wepy.request('xxxxx');
  console.log(d);
}

import wepy from 'wepy';
export default class extends wepy.app {
  constructor () {
    // this is not allowed before super()
    super();
    // 拦截request请求
    this.intercept('request', {
      // 发出请求时的回调函数
      config (p) {
        // 对所有request请求中的OBJECT参数对象统一附加时间戳属性
        p.timestamp = +new Date();
        console.log('config request: ', p);
        // 必须返回OBJECT参数对象，否则无法发送请求到服务端
        return p;
      },
      // 请求成功后的回调函数
      success (p) {
        // 可以在这里对收到的响应数据对象进行加工处理
        console.log('request success: ', p);
        // 必须返回响应数据对象，否则后续无法对响应数据进行处理
        return p;
      },
      //请求失败后的回调函数
      fail (p) {
        console.log('request fail: ', p);
        // 必须返回响应数据对象，否则后续无法对响应数据进行处理
        return p;
      },
      // 请求完成时的回调函数(请求成功或失败都会被执行)
      complete (p) {
        console.log('request complete: ', p);
      }
    });
  }
}

import Taro from '@tarojs/taro'
Taro.request({
 url: 'http://localhost:8080/test',
 data: {
  foo: 'foo',
  bar: 10
 },
 header: {
  'content-type': 'application/json'
 }
})
 .then(res => console.log(res.data))