微信小程序第三方框架对比 之 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 "color: #ff0000"> request请求

wepy对wx.request做了接受参数的修改,值得一提的是它提供了针对全局的intercapter拦截器


// 原生代码:
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);
      }
    });
  }
}


taro对request进行了二次封装,可以使用Taro.request(OBJECT)发起网络请求，支持 Promise 化使用。




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))


mpvue没有对request做特殊优化,与原生相同,可以自己根据需要进行封装
状态管理
wepy 可引用Redux和Mbox,目前wepy的脚手架内已经集成了redux,选择需要即可;
mpVue使用vuex
taro使用Redux
如何选择适合自己的项目
"color: #ff0000">总结
以上所述是小编给大家介绍的微信小程序第三方框架对比 之 wepy / mpvue / taro，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！