首页 > WEB开发 > 各种小程序的差异点
2018
11-08

各种小程序的差异点

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

概览

项目 微信小程序 百度小程序 支付小程序 快应用
命名空间 wx swam my 无,需要 require 它提供的所有接口按 wx 形式封装
if 指令 wx:if s-if a:if if
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 />
模板文件后缀 wxml swan axml 没有独立的文件 放 template 中
样式文件后缀 wxss css acss 没有独立的文件 放 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.JSON app.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


来源：前端开发博客

编程技巧