众所周知如今市面上端的形态多种多样,手机Web、ReactNative、微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要。但面对目前市面上成熟的小程序第三方框架如何针对自己的需求进行选择也是一个麻烦事,本文针对当前市面上的三大转译框架进行一个综合对比,希望能对大家的技术选择有所帮助,如有哪里不妥的地方希望指正; 小程序开发有哪些痛点?
为什么使用第三方框架?
第三方框架对比 wepy mpvue taro在这里我通过对目前已开源的三种常用小程序框架做一个综合对比, 还有一个叫nanchi的基于react的小程序转译框架,由于没来的及研究暂不做比较;
腾讯团队开源的一款类vue语法规范的小程序框架,借鉴了Vue的语法风格和功能特性,支持了Vue的诸多特征,比如父子组件、组件之间的通信、computed属性计算、wathcer监听器、props传值、slot槽分发,还有很多高级的特征支持:Mixin混合、拦截器等;WePY发布的第一个版本是2016年12月份,也就是小程序刚刚推出的时候,到目前为止,WePY已经发布了52个版本, 最新版本为1.7.2;
美团团队开源的一款使用 Vue.js 开发微信小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力。mpvue在发布后的几天间获得2.7k的star,上升速度飞起,截至目前为止已经有13.7k的star;
京东凹凸实验室开源的一款使用 React.js 开发微信小程序的前端框架。它采用与 React 一致的组件化思想,组件生命周期与 React 保持一致,同时支持使用 JSX 语法,让代码具有更丰富的表现力,使用 Taro 进行开发可以获得和 React 一致的开发体验。,同时因为使用了react的原因所以除了能编译h5, 小程序外还可以编译为ReactNative; Star
生命周期同为vue规范的mpvue和wepy的生命周期和各种方法不尽相同 wepywepy生命周期基本与原生小程序相同,再此基础上糅合了一些vue的特性; 对于WePY中的methods属性,因为与Vue中的使用习惯不一致,非常容易造成误解,这里需要特别强调一下:WePY中的methods属性只能声明页面wxml标签的bind、catch事件,不能声明自定义方法,这与Vue中的用法是不一致的。 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 = {}; // 声明组件之间的事件处理函数 } mpvue mpvue 除了 Vue 本身的生命周期外,还兼容了小程序生命周期,这部分生命周期钩子的来源于微信小程序的 Page, 除特殊情况外,不建议使用小程序的生命周期 钩子。 1Vue 3 beforeCreate 4 created 5 beforeMount 6 mounted 7 beforeUpdate 8 updated 9 activated 10 deactivated 11 beforeDestroy 12 destroyed 简单示例 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" taro与react生命周期完全相同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> ) } } 列表渲染在列表渲染上三者也分别有不同的应用方法wepy当需要循环渲染WePY组件时(类似于通过 <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> mpvue使用v-for与vue一致,只是需要注意一点,嵌套列表渲染,必须指定不同的索引! <!-- 在这种嵌套循环的时候, index 和 itemIndex 这种索引是必须指定,且别名不能相同,正确的写法如下 --> <template> <ul v-for="(card, index) in list"> <li v-for="(item, itemIndex) in card"> {{item.value}} </li> </ul> </template> taro的列表循环用法基本与react相同,有一点需要注意,在 React 中,JSX 是会编译成普通的 JS 的执行,每一个 JSX 元素,其实会通过 const list = this.state.list.map(l => { if (l.selected) { return <li>{l.text}</li> } }).filter(React.isValidElement) 但是 Taro 中,JSX 会编译成微信小程序模板字符串,因此你不能把 const list = this.state.list .filter(l => l.selected) .map(l => { return <li>{l.text}</li> }) 事件处理mpvue目前全支持小程序的事件处理器,引入了 Vue.js 的虚拟 DOM ,在前文模版中绑定的事件会被挂在到 vnode 上,同时 compiler 在 wxml 上绑定了小程序的事件,并做了相应的映射,所以你在真实点击的时候通过 runtime 中 // 事件映射表,左侧为 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' } 踩坑注意(官方文档):
wepy事件绑定区别于vue,根据原生小程序事件提供了语法优化 绑定事件 捕获监听事件 Taro 元素的事件处理和 DOM 元素的很相似。但是有一点语法上的不同: Taro 事件绑定属性的命名采用驼峰式写法,而不是小写。 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串 (DOM 元素的写法)。 例如,传统的微信小程序模板:
<button onclick="activateLasers"> Activate Lasers </button>
Taro 中稍稍有点不同: <button onClick={this.activateLasers}> Activate Lasers </button> 在 Taro 中另一个不同是你不能使用 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> ) } } 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)发起网络请求,支持
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 如何选择适合自己的项目
|
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。
- 微信扫描二维码关注官方微信
- ▲长按图片识别二维码