微信小程序转支付宝小程序经验分享

二代CMS（erdaicms旅游网站系统）的微信小程序已经上线，而最近支付宝也推出了支付宝小程序，背靠阿里这个大树，号称各种入口和流程支持，想象空间还是巨大的，那么，支付宝小程序是否和微信小程序一样呢，经过实战，也确认如此，支付宝小程序和微信小程序相似度很高很高，如出一辙，其中的原因我就不多说了，您稍微想想也能明白，哈哈，微信小程序只要经过一些简单的改造，就能直接转换成支付宝小程序啦，具体操作如下：


1.js命名空间，从wx改为 my

wx.navigateTo => my.navigateTo

2.绑定事件从bind改为on开头，并且采用驼峰形式，例如

bindchange="xx" => onChange="xx"

3.if 和 for语句写法不同

wx:if => a:if

wx:for => a:for

wx:key => a:key

wx:for-item => a:for-item

wx:for-index => a:for-index

另外支付宝还增加了一个key属性，key 是比 a:key 更通用的写法，里面可以填充任意表达式和字符串。在 for 中使用 key 来提高性能。注意 key 不能设置在 block 上

4.JS方法名调整

wx.request() => my.httpRequest()

wx.login() => my.getAuthCode()

wx.showModal() => my.confirm()

wx.getUserInfo() => my.getAuthUserInfo()

wx.requestPayment() => my.tradePay()

wx.saveImageToPhotosAlbum() => my.saveImage()

wx.setNavigationBarTitle() => my.setNavigationBar()

#导航栏标题

wx.setNavigationBarColor() => my.setNavigationBar()

#导航栏颜色

wx.getClipboardData() => my.getClipboard()

#粘贴板

wx.setClipboardData() => my.setClipboard()

#粘贴板

wx.canvasToTempFilePath() => my.toTempFilePath()

#1.1.3 当前画布的内容导出生成图片

wx.scanCode() => my.scan()

wx.closeBLEConnection() => my.disconnectBLEDevice()

5.缓存

支付宝只有一种写法，而微信则有两种

setStorage()

微信：

wx.setStorage({ key:"key", data:"value"})try { wx.setStorage('key', 'value') } catch(e) { }

支付宝：

my.setStorage({ key: 'key', data: 'value', success: function() { my.alert({content: '写入成功'}); } });

同样需要调整的还有：setStorageSyc() / getStorage() / getStorageSync() / removeStorage() / removeStorageSync()

6.文件类型不同

微信的是：js、wxml、wcss、JSON

支付宝的是：js、axml、acss、json

注意在样式中import时，如果从微信小程序调整到支付宝小程序，后缀要改过来

@import "/pages/public/css/component.wcss"; to@import "/pages/public/css/component.acss";

7.page.json

window对象设置·

微信的：

{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTitleText": "微信接口功能演示", "enablePullDownRefresh":true, "disableScroll":true }

支付宝的：

{ titleBarColor: "#ffffff" defaultTitle: "页面标题", pullRefresh: true, allowsBounceVertical: 'YES'}

tabBar微信的：

"tabBar": { "color": "#999", "selectedColor": "#333", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "icons/1.png" "selectedIconPath": "icons/1_c.png", } ] },

支付宝的：

{ "tabBar": { "textColor": "#999", "selectedColor": "#333", "backgroundColor": "#ffffff", "items": [ { "pagePath": "pages/index/index", "name": "首页" "icon":"icons/1.png", "activeIcon":"icons/1_c.png" } ] } }

支付宝的配置文件比微信的少了很多参数，但基本都可以转

8.spliceData()

支付宝多了一个更高性能设置数据的方法：

this.$spliceData({ 'a.b':[1,0,4,5,6]; })

9.JS模块化

支付宝采用ES6语法

微信的：

const config = require('../../pc.config.js');const util = require('../../common/util.js');

支付宝：

import config from '/config'; // 载入项目根路径文件import util from '../../common/util'; // 载入相对路径

微信的：

var config = { }module.exports.config = config;

支付宝的：

var config = { }export default config;

支付宝支持引入社区上的第三反方NPM，微信则对引入的NPM有规定的格式。

10.API属性调整

以下格式：左边的是微信属性名--->右边的是支付宝对应的属性名

showToast title--->content icon--->type showLoading

#显示加载框 title--->content confirm

#显示提示框 confirmText--->confirmButtonText cancelText--->cancelButtonText showActionSheet itemList--->items setTextAlign align--->textAlign previewImage current--->current=string->number getLocation

#获取位置 type--->type=string->number saveImage filePath--->url httpRequest header--->headers uploadFile name--->fileName connectSocket header--->headers setClipboard data--->text makePhoneCall phoneNumber--->number

下面的内容是我对照着支付宝文档和微信的区别抄的笔记。有点重复，权当记录。

文件类型

js、axml、acss、json

开发者写的所有代码最终将会打包成一份JavaScript 脚本，在小程序启动的时候运行，在小程序结束运行时销毁。

逻辑结构

小程序的核心是一个响应式的数据绑定系统，逻辑上分为视图层和逻辑层。这两层始终保持同步，只要在逻辑层修改数据，视图层就会相应的更新。

支持ES6

import util from './util'; // 载入相对路径

import absolute from '/absolute'; // 载入项目根路径文件

支持第三方NPM模块

npm install lodash

import lodash from 'lodash'; // 载入第三方 npm 模块

app.json配置差异

"window": { "defaultTitle": "Demo" }

跟微信不同的地方：

defaultTitle:页面标题pullRefresh:是否允许下拉刷新。默认 falseallowsBounceVertical:页面是否支持纵向拽拉超出实际内容。默认 YEStitleBarColor:导航栏背景色

tabBar写法

{ "tabBar": { "textColor": "#dddddd", "selectedColor": "#49a9ee", "backgroundColor": "#ffffff", "items": [ { "pagePath": "pages/index/index", "name": "首页" }, { "pagePath": "pages/logs/logs", "name": "日志" } ] } }

事件绑定

写法：on/catch[事件名驼峰]="回调名"

<button onTap="changeText">change Text</button>

Page()的方法属性

Page()方法的属性多了

onTitleClick()：点击标题触发onOptionMenuClick:点击格外导航栏图标触发（1.3 ）onPageScroll：页面滚动时触发

高效的列表处理方法（新增）

Page.prototype.$spliceData()

对象的键名key可以非常灵活，以数据路径的形式给出，如 array[2].message、a.b.c.d，并且不需要在this.data中预先定义。对象的value为一个数组（格式：[start, deleteCount, ...items]）,数组的第一个元素为操作的起始位置，第二个元素为删除的元素的个数，剩余的元素均为插入的数据。对应es5中数组的splice方法

每一个页面的page.json

多了一个方法，onOptionMenuClick：配置导航图标，点击后触发

{ "optionMenu": { "icon": "" } }

视图层指令

条件循环

<view a:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view> <view a:elif="{{view == 'APP'}}"> APP </view> <view a:else> alipay </view>

列表循环

<view a:for="{{items}}"> {{item}} </view>

以上可以看出wx:换成，a:

数据绑定

对象扩展符：...来将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template> Page({ data: { obj1: { a: 1, b: 2 }, obj2: { c: 3, d: 4 } } })

最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。


列表循环

增加了一个key属性

key 是比 a:key 更通用的写法，里面可以填充任意表达式和字符串。

在 for 中使用 key 来提高性能。

注意 key 不能设置在 block 上

样式

支持rpx

同css3 保持一致，注意点:

.a-, .am- 开头的类选择器为系统组件占用，请不要使用

不支持属性选择器

自定义脚本

微信中使用wxs

<!--wxml--> <wxs module="m1"> var msg = "hello world"; module.exports.message = msg; </wxs> <view> {{m1.message}} </view>

支付宝中使用sjs

// /pages/xx.sjsconst message = 'hello alipay'const getMsg = x => x;export default { message, getMsg, };

// /pages/index/index.axml<!--axml--><import-sjs name="m1" from="../xx.sjs"/> <view>{{m1.message}}</view> <view>{{m1.getMsg(msg)}}</view>

.sjs文件中引用其他.sjs文件

// /pages/message.sjs import hello from './hello.sjs'; var getMsg = function getMsg(){ return hello ' message'; } export default { getMsg: getMsg };

注意点

1. 

sjs 只能定义在.sjs文件中。然后在axml中使用import-sjs引入。

2. 

3. 

sjs 可以调用其他 sjs 文件中定义的函数。

4. 

5. 

sjs 是 javascript 语言的子集，不要将其等同于javascript。

6. 

7. 

sjs的运行环境和其他javascript代码是隔离的，sjs中不能调用其他javascript文件中定义的函数，也不能调用小程序提供的API。

8. 

9. 

sjs函数不能作为组件的事件回调。

10. 

11. 

sjs不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。

12. 

自定义组件

和页面一样，自定义组件也由4个部分组成：axml、js、json、acss。

示例：

// /components/customer/index.json { "component": true } // /components/customer/index.js Component({ mixins: [], // minxin 方便复用代码 data: { x: 1 }, // 组件内部数据 props: { y: 1 }, // 可给外部传入的属性添加默认值 didMount(){}, // 生命周期函数 didUpdate(){}, didUnmount(){}, methods: { // 自定义事件 handleTap() { this.setData({ x: this.data.x 1}); // 可使用 setData 改变内部属性 }, }, })<!-- // /components/customer/index.axml --><view> <view>x: {{x}}</view> <button onTap="handleTap">plusOne</button> <slot> <view>default slot & default value</view> </slot> </view>

使用：

// /pages/index/index.json { "usingComponents": { "customer": "/components/customer/index" } }<!-- /pages/index/index.axml --><view> <customer /> </view>

组件

列出与微信对比没有的组件：

基础内容：

rich-text

导航：

functional-page-navigator

媒体：

audio、video、camera、live-player、live-pusher

开放组件：

open-data

扩展组件

多了很多微信没有的扩展组件

布局导航

List 列表、Tabs 选项卡、VTabs 纵向选项卡、Card 卡片、Grid 宫格、Steps 步骤条、Footer 页脚

操作浮层

Popover 气泡、Filter 筛选、Modal 对话框、Popup 弹出菜单

结果类

PageResult 异常页、Message 结果页

提示引导

Tips 引导、Notice 通告栏、Badge 徽标

表单类

InputItem 文本输入、AmountInput 金额输入、SearchBar 搜索框、AMCheckBox 复选框

手势类

SwipeAction 可滑动单元格

其他

Calendar 日历、Stepper 步进器

API

命名空间为：my.

交互反馈增加了

my.alert()、my.confirm()、my.prompt()

交互反馈没有

showModal

增加了联系人

my.choosePhoneContact()

增加了选择城市

my.chooseCity()

增加了选择日期

my.datePicker(object)

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342

推荐阅读更多精彩内容