各种小程序的差异点

最近各种小程序都出来凑热闹,但各家都有一套自己的实现方式,今天来看看最近流行的四款小程序的差异,本文总结了各自的差异,帮助你快速入门不熟悉的小程序。

概览

项目微信小程序百度小程序支付小程序快应用
命名空间wxswammy无,需要 require 它提供的所有接口按 wx 形式封装
if 指令wx:ifs-ifa:ifif
for 指令wx:for
wx:for-index
wx:for-item
wx:key
wx:改成s-wx:改成a:for="(personIndex, personItem) in list"
<block>容器标签存在存在存在存在
事件绑定bind/catch[事件名全小写]="回调名"bind/catch[事件名全小写]="回调名"on/catch[事件名驼峰]="回调名"on[事件名全小写]="回调名/回调(arguments)"
{{}}插值是否支持函数不支持不支持不支持支持
模块中使用脚本<wxs /><filter /><import-sjs /><script />
模板文件后缀wxmlswanaxml没有独立的文件 放 template 中
样式文件后缀wxsscssacss没有独立的文件 放 style 中,不需要处理 less,sass
template 包含 template支持不支持(听说正在修复)支持未知
template 的 data 是否支持...支持不支持(听说正在修复)支持未知
缺省的组件(视图容器)moveable-view、cover-view未知
缺省的组件(基础内容)rich-text未知
缺省的组件(导航)functional-page-navigator未知
缺省的组件(媒体组件)audio、video、camera、live-player、live-pusher未知
open-data不支持未知
样式单位 rpx 支持情况支持不支持(用 rem,最新的基础库版本已经支持)支持不支持

APIs 的这么多方法都不一样,可能以后针对不同的平台打包不同的 api.js 来屏蔽差异性

微信小程序与快应用差异

差异微信小程序快应用
入口文件app.js, app.JSONapp.ux, manifest.json
结构,表现,行为组织方式分离:如 page.js, page.wxss, page.wxml聚合:类似 Vue
文件扩展名.js, .json, .wxml, .wxss.ux, .json
路由注册app.json 中配置 pages 字段 例如"pages": ["path1", "path2"]manifest.json 中配置 router 字段 详见文档
路由跳转1.组件跳转[navigator 组件]
2.五种 js 跳转方式详见文档
1. 组件跳转[a 组件]
2. router.push(OBJECT)
获取应用实例调用函数:getApp()访问变量:this.$app
模板逻辑渲染配置命名空间: 例如:wx:if/wx:elif/wx:else不需要 例如:if/elif/else
钩子函数onLoad: 页面加载时触发onInit: 页面加载时触发
onDestroy: 页面卸载onUnload: 页面卸载
onBackPress:不支持onBackPress:支持
onPageScroll:支持onPageScroll:不支持
onPullDownRefresh: 支持onPullDownRefresh:不支持
初始化状态(state)data: {list: []}private: { list: [] }
更新组件状态setData 函数更新类 vue 语法
UI 事件绑定方式bindEventName(on|@)EventName
UI 事件自定义传参不支持支持
API挂载在 wx 命名空间下:如 wx.showShareMenu(OBJECT)需引用相关模块:import share from '@system.share'

组件机制

Component 构造器可用于定义组件,调用 Component 构造器时可以指定组件的属性、数据、方法等。

字段说明微信支付宝百度轻应用
properties接收的数据同名同名同名props
data内部数据同名同名同名private
methods方法集合同名同名同名不存在
created组件创建时同名同名同名onInit
attached组件插入时同名同名同名不存在
ready组件完成布局后同名同名同名onReady
detached组件移除时同名同名同名onDestroy

 

官网

微信小程序 
百度小程序 
支付小程序
快应用

参考链接:https://ued.qunar.com/nanachi-doc/documents/diff.html

原文:各种小程序的差异点 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/xiaochengxu_diff.html)