二代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)
