开发者社区> 茶无味的一天> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

解析各平台小程序与⼩程序开发框架对比

简介: 各平台小程序与⼩程序开发框架对比
+关注继续查看

微信⼩程序 vs ⽀付宝⼩程序 vs 百度⼩程序

各家⼩程序之间有很多相似的地⽅,例如相似的开发环境,相似的运⾏时渲染内容。

文档索引

微信⽂档:https://developers.weixin.qq.com/miniprogram/dev/api/

百度⽂档:https://smartprogram.baidu.com/docs/develop/api/apilist/

⽀付宝⽂档:https://opendocs.alipay.com/mini/api

相似内容:

  • 均有原⽣组件和 webview 中渲染的组件
  • ⼤部分配置和项⽬结构(app.json/app.js)都相同, 甚⾄之前出现了⽀付宝⼩程序⽂档直接拷⻉微信⼩程序⽂档的情况。
  • 他们都⽀持第三⽅平台,来对⽤户授权的⼩程序进⾏操作。

不同之处:

  • 部分 API 内容互不相同(wx/swan/my)
  • 不同平台侧重的能⼒不同,⽀付宝侧重商家,百度⼩程序更侧重流量相关获取,微信⼩程序更侧重基础能⼒。
  • 只有微信⼩程序⽀持个⼈申请使⽤,百度/⽀付宝仅⽀持企业使⽤。
  • 百度的 API ⽂档中,出现了很多 AI 相关的⼩程序 API 来调⽤。

image.png

⼩程序之间的差异具体体现在 api 的差异当中,⽬前各家的⼩程序在运⾏时的差异已经⾮常⼩了,底层功能都已经⾮常稳定。书写⼩程序代码的过程中只需要注意对应 API 的使⽤即可。

wepy 、 mpVue 、 remax 、 taro

他们本质都是让⼩程序开发更加友好,或是在⼩程序同构中展示对应的能⼒。

wepy

wepy[]() []()是⼀个专注于⼩程序开发的开发框架,通过它我们能更好的组织我们的⼩程序代码。


特点:

类 Vue 开发⻛格

  • ⽀持⾃定义组件开发
  • ⽀持引⼊ NPM 包
  • ⽀持 Promise
  • ⽀持 ES2015+ 特性,如 async Functions
  • ⽀持多种编译器,Less/Sass/Stylus/PostCSS、Babel/Typescript、Pug
  • ⽀持多种插件处理,⽂件压缩,图⽚压缩,内容替换等
  • ⽀持 Sourcemap,ESLint 等
  • 对⼩程序细节优化,如请求列队,事件优化等
<style lang="less"> @color: #4D926F;
.num {
  color: @color;
}
</style>
<template>
  <div class="container">
    <div class="num" @tap="num++">
      {{num}}
    </div>
    <div>{{text}}</div>
    <input v-model="text"></input>
  </div>
</template>
<config>
{
  usingComponents: { customCompoent:'@/components/customComponent'},
  vendorComponent: 'module:vendorComponent'
}
</config>

总结:

  • 使⽤内部的约束来开发⼩程序,最终静态编译为⼩程序⽬录结构
  • vue ⻛格,只⽀持微信⼩程序,后期如果想换框架则迁移困难
  • v2之后的版本较v1的开发体验有明显提升

源码:

通过 bin/wepy-build.js 执⾏编译,通过⽂件名称判断不同的编译⽅式,不同编译⽅式注册的回调函数core/plugins/parser/ 注册。

mpvue

mpvue 是⼀个通过 vue 进⾏开发,同时⽀持多端的框架。⽬前⽀持 微信、百度、头条和⽀付宝⼩程序。
它与 wepy 虽然同是 vue 进⾏开发,但是之间还是有些区别的,主要体现在它在运⾏时还依赖了部分vue.runtime.js 的代码。


特点

  • 保留了 vue.runtime 核⼼⽅法,⽆缝继承了的基础能⼒
  • 提供了将 vue 的模板语法转换到⼩程序的 wxml 语法的能⼒
  • 修改了 vue 的建构配置,使之构建出符合⼩程序项⽬结构的代码格式: json/wxml/wxss/js ⽂件

源码

mpvue 的源码中,vue 的作者也写了很多,主要也因为这个项⽬也⽤到了很多 vue 运⾏时的东⻄,所以不同于wepy 的编译型, mpvue 除了基本的静态编译,运⾏时还是加⼊了⼀些 vue.runtime.js 中的元素的,在项⽬迁移时会稍稍容易些。

例如在 platforms/mp/compiler/wx 中,加⼊了编译和解析微信⼩程序部分的⽅法。

在旁边的 runtime 中,实现了⼀系列的 diff/events/⽣命周期等等功能。

总结

注意:目前mpvue由于遗留问题太多,并且长期处于不维护状态,已不太推荐使用,开源社区基本已经放弃了该框架。

remax

remax 是由阿⾥推出的⼀款⼩程序制作框架,能同时运⾏在微信⼩程序/⽀付宝⼩程序/字节跳动⼩程序当中。


特性:

  • 使⽤ react 的⻛格和⽅式来进⾏⼩程序的开发使⽤
  • Remax 把代码转换到多个⼩程序平台。
  • 完整的 TypeScript ⽀持。
export default class IndexPage extends React.Component {
  // ⻚⾯组件的 didMount 触发时机是在 onLoad 的时候
  componentDidMount() {
    console.log('IndexPage load')
  }

  onShow() {
    console.log('IndexPage show')
  }

  render() {
    return <View>Hello world!</View>
  }
}

源码

相⽐于其他框架,remax 使⽤静态编译的部分就⽐较少,他主要应对的就是运⾏时的⼯作。

假如使⽤其他静态编译类型的框架,对于以下情况就会有⼼⽆⼒:

render() {
    const child = <View>Hello remax!</View>;
    return <View>Hello world! {child} </View>;
}

render() {
    return <View>Hello world! <View>Hello remax!</View> </View>;
}

因为这⾥的内部 child 是通过 js 来控制的,静态编译⼤部分情况下不会分析到具体组件和 UI 与变量之间的联系,⼤部分框架只是使⽤⼀个简单的 xml 库来结构分析,所以这种变量在运⾏时决定 UI 就⽆法实现。

remax 不会有这样的问题,他在运⾏时实现了⼀套类似react-dom ,唯⼀有区别的是把 react-dom ⾥⾯与document,window 有关的内容都替换成了⼩程序⾥已有的内容,这样实现了⼀套 react-reconciler。

import ReactReconciler from 'react-reconciler'
let reconciler = ReactReconciler({
  createInstance(type) {
    return document.createElement(type)
    // 替换为⼩程序内部⽅法即可实现实例的创建
  },
  appendChild(parent, child) {
    parent.appendChild(child)
  },
  removeChild(parent, child) {
    parent.removeChild(child)
  },
  insertBefore(parent, child, before) {
    parent.insertBefore(child, before)
  },
})

taro

taro可谓是大名鼎鼎的小程序开发框架,⽬前⽀持微信/百度/⽀付宝/百度⼩程序和 h5,⽬前⽀持的平台最多,也在持续维护的⼀个框架平台。它也是⼀套遵循 React语法规范的 多端开发解决⽅案。通过 Taro 的编译⼯具,将源代码分别编译出可以在不同端(微信/百度/⽀付宝/字节跳动/QQ/京东⼩程序、快应⽤、H5、React-Native 等)运⾏的代码。


特性

  • ⽀持使⽤ npm/yarn 安装管理第三⽅依赖
  • ⽀持使⽤ ES7/ES8 甚⾄更新的 ES []()规范,⼀切都可⾃⾏配置
  • ⽀持使⽤ CSS 预编译器,例如 Sass 等
  • ⽀持使⽤ Redux 进⾏状态管理
  • ⽀持使⽤ MobX 进⾏状态管理
  • ⼩程序 API 优化,异步 API Promise 化等等

源码

它是⼀个静态编译的框架,所以也就是说我们最终的代码都是已经编译为能直接在平台中运⾏的了,所以主要的⼯作对于 taro 来说是在编译阶段进⾏。

对于微信⼩程序的转译,我们只需要关注 taro- tarnsformer-wx 即可,在 index.ts 中,通过 ts 和 babel 将编译的结果进⾏分析,将分析到的 AST 结构进⾏处理, 通过不同的 AST 结果执⾏不同的操作。

执⾏完成之后,通过 parseJSXChildren 等解析⽅法,将 jsx 转化为 wxml。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
小程序云开发学习笔记
在app.js里面 小程序一开始就初始化,多次调用只有第一次触发
0 0
小程序云开发和调试 | 学习笔记
快速学习小程序云开发和调试
0 0
阿里云小程序云发布小程序跨平台开发框架,助力开发者一次开发,多端运行
本文主要介绍了小程序云联合DCloud发布基于uni-app的小程序跨平台开发框架插件,如何帮助有跨平台发布小程序的开发者快速发布多个平台小程序
0 0
FlashDevelop+aswing开发AS2程序
最近在学aswing(aswing是一个开源的as UI框架,结构模仿java的swing,具体可以到(http://aswing.org/),由于我的机器配置不是太高,并且也是处于入门阶段不是搞什么大程序,所以选用了FlashDevelop作为编程环境,FlashDevelop的优点是体积小巧使用简单,在这里我针对初学者讲讲我使用FD的方法。
904 0
小程序正式对个人开发者开放注册
今天,小程序正式对个人开发者开放注册。有开发能力的个人,可以申请注册、开发小程序了,我们希望提供一个更广阔的平台,方便个人开发者便捷地开发一款小程序。小程序开发门槛降低 Q:小程序对个人开发者开放的目的是什么? A:我们希望降低开发者的门槛,让更多有能力的人来参与开发小程序,也希望能够激发出大家的创造性,为微信用户提供更好的服务。
923 0
垂涎欲滴!30个美味的食品类移动应用程序【下篇】
  在这里,我收集了一批令您垂涎欲滴的30个美味的食物类移动应用程序设计。你会看到好吃的图像,甜美的字体,可爱的纹理和色彩,创造出鼓舞人心的愉悦的移动应用程序设计。   与随着移动技术的快速增长,我们能够在智能手机浏览网页和做更多的业务,而在早期这些都只能通过电脑实现。
598 0
垂涎欲滴!30个美味的食品类移动应用程序【上篇】
  与随着移动技术的快速增长,我们能够在智能手机浏览网页和做更多的业务,而在早期这些都只能通过电脑实现。检查您的网站访问统计分析,你会看到或许有将近20%的用户从不同类型的移动设备访问你的网站,并且这个数字还在与日俱增。
578 0
AAuto 快速开发win32小程序
AAuto编程语言 AAuto是专用于桌面软件快速开发的新一代混合型编程语言 -  具有动态语言轻便、灵活、快速开发的特性,而且又可以同时支持静态类型开发,象静态语言那样使用。AAuto可以直接支持原生DLL,即使是外部EXE进程中的函数,也可以使用一句代码声明为普通的AAuto函数对象( 原生call支持 ),AAuto支持非常多的标准调用约定,例如 stdcall,cdecl,thiscall,fastcall,regparm(n)  等调用约定都可以支持。
907 0
+关注
茶无味的一天
公众号:品味前端
文章
问答
文章排行榜
最热
最新
相关电子书
更多
小程序 云开发
立即下载
函数计算最佳实践:快速开发一个分布式 Puppeteer 网页截图服务
立即下载
荷鲁斯 移动端第三方库安全检查引擎介绍
立即下载