吐血推荐：分析常用的小程序开发框架

来源：互联网 2024-11-11 18:02:39

小程序第三方框架比较（wepy / mpvue / taro / Mpx /）

众所周知，当今市场上有多种终端形式。移动Web，ReactNative，微信小程序，支付宝小程序，快速应用程序等，每个端都是巨大的流量入口，同时在不同端上都需要业务需求时，如果有性能，则编写多个代码的成本不同目的的代码集显然很高。此时，非常需要仅使用一组代码就能适应多端的能力。但是，面对当前市场上成熟的小程序第三方框架，如何根据自己的需求进行选择也是一件麻烦的事情。本文对当前市场上的三种翻译框架进行了全面比较，希望对您的技术选择有一些想法。帮忙，如果有什么问题请纠正我；

微信小程序现在已成为热门话题。让我们从多个方面来比较5个不同的小程序开发框架。

总结最新消息，我们可以选择5个第三方框架来开发小程序。我们比较熟悉美团小程序框架mpvue以及组件化框架等，以下编辑者对5种不同小程序开发框架的特征进行了比较和总结。

小程序开发第三方框架

功能

MINA官方框架

小程序提供的开发框架是MINA框架，类似于淘宝Weex和Vue框架。

MINA框架封装了客户端提供的基本功能，例如微信文件系统，网络通信，任务管理和数据安全性，

在上层提供一整套JavaScript API，以便开发人员可以使用微信客户端提供的各种基本功能和功能来快速构建应用程序。

美团小程序框架mpvue

mpvue是美团点评利用Vue.js 小程序开发的开源前端框架。该框架基于Vue.js的核心。 mpvue修改了Vue.js的运行时和编译器实现，使其可以在小程序环境中运行，从而为小程序开发引入了完整的Vue.js开发经验。使用mpvue开发小程序，您将基于小程序技术系统获得以下功能：

完全组件化的开发功能：提高代码的可重用性

完整的Vue.js开发经验

便捷的Vuex数据管理解决方案：便捷地构建复杂的应用程序

快速的Webpack构建机制：自定义构建策略，开发过程中的hotReload

支持使用npm外部依赖项

使用Vue.js命令行工具vue-cli快速初始化项目

将H5代码转换为小程序目标代码的能力

Tina.js是一个轻量级且渐进的微信小程序框架

轻巧紧凑。它非常易于使用，并保留了MINA（微信小程序 Official framework）的大多数API设计；无论您是否具有小程序开发经验，都可以轻松过渡以使用它。逐步增强功能，包括状态管理器，路由增强功能，您可以编写自己的插件。

组件化开发框架wepy

WePY是允许小程序支持组件化开发的框架。通过预编译，开发人员可以选择自己喜欢的开发风格进行开发小程序。框架的详细优化，承诺和异步功能的引入，都使小程序项目的开发更加容易和高效。

功能：

类似Vue的开发风格

支持自定义组件开发

支持引入NPM软件包

支持承诺

支持ES2015 +功能，例如异步功能

支持多种编译器，Less / Sass / Styus，Babel / Typescript，Pug

支持多种插件处理，文件压缩，图像压缩，内容替换等。

支持Sourcemap，ESLint等

小程序详细的优化，例如请求队列，事件优化等。

前端框架weweb

Weweb是与小程序语法兼容的前端框架。您可以使用小程序编写Web应用程序。如果您已经拥有小程序，则可以通过它在浏览器中运行它。

特性：跨平台，在多个终端上运行的一组代码（小程序，h5、将来会直接打包到Android，ios应用程序中，而不是梦想）附带通用组件，完美继承小程序内置组件兼容性小程序 rpx语法使页面更易于适应各种模型

以上是五个不同的小程序开发框架。为了进行比较，我们将开发几种小程序常用的第三方框架

小程序发展的痛点是什么？为什么要使用第三方框架？第三方框架比较wepy mpvue taro

在这里，我对当前使用的三种常用小程序框架进行了全面比较，并且还有一个基于反应的小程序翻译框架nanchi。由于缺乏研究和研究，我不会将它们进行比较；

腾讯团队开源的类似Vue的语法规范小程序框架借鉴了Vue的语法风格和功能特征，并支持Vue的许多功能，例如父子组件，组件之间的通信，计算出的属性计算， Wathcer监听器，道具传递值，插槽分配以及许多高级功能支持：Mixin，拦截器等； WePY的第一个版本于2016年12月发布，即小程序刚发布时，到目前为止，WePY已发布了52个版本，最新版本为1.7.2;

由美团团队使用Vue.js开发的前端框架微信小程序。使用此框架，开发人员将获得完整的Vue.js开发经验，并同时为H5和小程序提供代码重用功能。 mpvue在发布后的几天内获得了2.7k颗星，其上升速度猛增。到目前为止，已有13.7k颗星星；

JD Labs开放了一个使用React.js 微信小程序开发的前端框架。它采用了与React一致的组件化思想。组件的生命周期与React一致。同时，它支持使用JSX语法来使代码更丰富和更具表现力。使用Taro进行开发可以获得与React一致的开发经验。，而且由于使用了react，因此小程序除了可以编译h5外，还可以编译为ReactNative;

星

生命周期

mpvue和wepy的生命周期以及各种方法与vue规范相同，

wepy

wepy的生命周期与原始小程序的生命周期基本相同，并在此基础上结合了vue的某些功能；对于WePY中的method属性，由于它与Vue中的使用习惯不一致，因此很容易引起误解，这里需要特别强调。一：WePY中的methods属性只能声明页面的wxml标记的绑定和捕获事件，而不能声明自定义方法，这与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

除了Vue本身的生命周期外，mpvue还与小程序生命周期兼容。生命周期挂钩的这一部分来自微信小程序页。除特殊情况外，不建议使用小程序的生命周期挂钩。

1Vue 3 beforeCreate 4 created 5 beforeMount 6 mounted 7 beforeUpdate 8 updated 9 activated10 deactivated11 beforeDestroy12 destroyed13 app 部分15 onLaunch，初始化16 onShow，当小程序启动，或从后台进入前台显示17 onHide，当小程序从前台进入后台18 page 部分20 onLoad，监听页面加载21 onShow，监听页面显示22 onReady，监听页面初次渲染完成23 onHide，监听页面隐藏24 onUnload，监听页面卸载25 onPullDownRefresh，监听用户下拉动作26 onReachBottom，页面上拉触底事件的处理函数27 onShareAppMessage，用户点击右上角分享28 onPageScroll，页面滚动29 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"

芋头的生命周期与react完全相同

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

列表呈现在列表呈现中，这三种还具有不同的应用方法。

当需要在循环中呈现WePY组件（类似于通过wx：for循环呈现本机wxml标签）时，Wepy，必须使用由WePY定义的辅助标签

mpvue使用v-for与vue保持一致，但您需要注意以下事实：对于嵌套列表呈现，必须指定不同的索引！

v-for="(card, index) in list"

{{item.value}}

Taro的列表循环用法与React基本相同。需要注意的一件事是，在React中，JSX被编译为普通的JS执行。实际上，每个JSX元素都被创建到一个JavaScript对象（React Element）中，因此实际上您可以编写如下代码，React也是完全可渲染的：

const list = this.state.list.map(l => { if (l.selected) { return

{l.text}

}}).filter(React.isValidElement)

但是在Taro中，JSX将被编译为微信小程序模板字符串，因此您不能将map函数生成的模板视为数组。在需要执行此操作时，应首先处理需要循环的数组，然后使用已处理的数组调用map函数。例如，上面的示例应写为：

const list = this.state.list .filter(l => l.selected) .map(l => { return

{l.text}

})

事件处理

mpvue当前支持小程序事件处理程序，并引入了Vue.js的虚拟DOM。先前模板中绑定的事件将链接到vnode，编译器也绑定到wxml 小程序事件和相应的映射，因此，当您实际单击时，可以在运行时中使用handleProxy通过以下方式分发到vnode的事件：事件类型。该机制与Web上Vue的机制相同，因此可以实现无损支持。同时，它还支持自定义事件和$ emit机制

// 事件映射表，左侧为 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不同，它提供了基于本地小程序事件的语法优化。

绑定事件

bindtap =“ click”替换为@ tap =“ click”，

取消冒泡

将原始catchtap =“ click”替换为@ tap.stop =“ click”。

捕获监听事件

capture-bind：tap =“ click”替换为@ tap.capture =“ click”，

中断捕获监视

capture-catch：tap =“ click”替换为@ tap.capture.stop =“ click”。

Taro元素的事件处理与DOM元素的事件处理非常相似。但是有一个语法上的区别：

芋头事件绑定属性以驼峰大小写而不是小写命名。如果使用JSX语法，则需要传入一个函数作为事件处理程序，而不是字符串（编写DOM元素的方式）。例如，传统的微信小程序模板：

Activate Lasers

芋头略有不同：

Activate Lasers

Taro的另一个区别是您不能使用catchEvent来防止事件冒泡。您必须显式使用stopPropagation。例如，为防止事件冒泡，您可以编写：

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 ( {this.state.isToggleOn ? 'ON' : 'OFF'} ) }}

请求请求

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 支持，参考 WIKIasync 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已重新封装了请求。您可以使用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并未对请求进行特殊优化，它与原始请求相同，您可以根据需要对其进行封装

状态管理

Wepy可以参考Redux和Mbox。目前，wepy的脚手架已集成了redux，只需选择所需的内容即可。

mpVue使用vuex

芋头使用Redux

小程序开发框架Mpx

Mpx是由Didi开发的增强的小程序框架，用于改善小程序开发体验。通过Mpx，我们可以开发最先进的Web开发经验（Vue + Webpack）来开发深度优化的生产性能小程序，Mpx具有以下出色功能：

安装和使用

# 安装mpx命令行工具npm i -g @mpxjs/cli# 初始化项目mpx init

# 进入项目目录cd

# 安装依赖npm i# developmentnpm run watch# productionnpm run build -pCopy

OKAM 小程序开发框架