二代CMS（erdaicms旅游網(wǎng)站系統(tǒng)）的微信小程序已經(jīng)上線聚至，而最近支付寶也推出了支付寶小程序化戳，背靠阿里這個大樹宜雀，號稱各種入口和流程支持切平，想象空間還是巨大的，那么州袒，支付寶小程序是否和微信小程序一樣呢揭绑，經(jīng)過實(shí)戰(zhàn)，也確認(rèn)如此郎哭，支付寶小程序和微信小程序相似度很高很高他匪，如出一轍，其中的原因我就不多說了夸研，您稍微想想也能明白邦蜜，哈哈，微信小程序只要經(jīng)過一些簡單的改造亥至，就能直接轉(zhuǎn)換成支付寶小程序啦悼沈，具體操作如下：
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 更通用的寫法，里面可以填充任意表達(dá)式和字符串壤靶。在 for 中使用 key 來提高性能缚俏。注意 key 不能設(shè)置在 block 上
4.JS方法名調(diào)整
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()
#導(dǎo)航欄標(biāo)題
wx.setNavigationBarColor()?=>?my.setNavigationBar()
#導(dǎo)航欄顏色
wx.getClipboardData()?=>?my.getClipboard()
#粘貼板
wx.setClipboardData()?=>?my.setClipboard()
#粘貼板
wx.canvasToTempFilePath()?=>?my.toTempFilePath()
#1.1.3?當(dāng)前畫布的內(nèi)容導(dǎo)出生成圖片
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:?'寫入成功'}); } });
同樣需要調(diào)整的還有：setStorageSyc() / getStorage() / getStorageSync() / removeStorage() / removeStorageSync()
6.文件類型不同
微信的是：js贮乳、wxml忧换、wcss、JSON
支付寶的是：js向拆、axml亚茬、acss、json
注意在樣式中import時浓恳，如果從微信小程序調(diào)整到支付寶小程序刹缝，后綴要改過來
@import?"/pages/public/css/component.wcss"; to@import?"/pages/public/css/component.acss";
7.page.json
window對象設(shè)置·
微信的：
{?"navigationBarBackgroundColor":?"#ffffff",?"navigationBarTitleText":?"微信接口功能演示",?"enablePullDownRefresh":true,?"disableScroll":true?}
支付寶的：
{ titleBarColor:?"#ffffff"?defaultTitle:?"頁面標(biāo)題", 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"?} ] } }
支付寶的配置文件比微信的少了很多參數(shù)，但基本都可以轉(zhuǎn)
8.spliceData()
支付寶多了一個更高性能設(shè)置數(shù)據(jù)的方法：
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';?// 載入項(xiàng)目根路徑文件import?util?from?'../../common/util';?// 載入相對路徑
微信的：
var?config?=?{ }module.exports.config?=?config;
支付寶的：
var?config?=?{ }export?default?config;
支付寶支持引入社區(qū)上的第三反方NPM奖蔓，微信則對引入的NPM有規(guī)定的格式赞草。
10.API屬性調(diào)整
以下格式：左邊的是微信屬性名--->右邊的是支付寶對應(yīng)的屬性名
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
下面的內(nèi)容是我對照著支付寶文檔和微信的區(qū)別抄的筆記。有點(diǎn)重復(fù)吆鹤，權(quán)當(dāng)記錄厨疙。
文件類型
js、axml疑务、acss沾凄、json
開發(fā)者寫的所有代碼最終將會打包成一份JavaScript?腳本，在小程序啟動的時候運(yùn)行知允，在小程序結(jié)束運(yùn)行時銷毀撒蟀。
邏輯結(jié)構(gòu)
小程序的核心是一個響應(yīng)式的數(shù)據(jù)綁定系統(tǒng)，邏輯上分為視圖層和邏輯層温鸽。這兩層始終保持同步保屯，只要在邏輯層修改數(shù)據(jù)，視圖層就會相應(yīng)的更新涤垫。
支持ES6
import util from './util'; // 載入相對路徑
import absolute from '/absolute'; // 載入項(xiàng)目根路徑文件
支持第三方NPM模塊
npm install lodash
import lodash from 'lodash'; // 載入第三方 npm 模塊
app.json配置差異
"window": { "defaultTitle": "Demo" }
跟微信不同的地方：
defaultTitle:頁面標(biāo)題pullRefresh:是否允許下拉刷新姑尺。默認(rèn) falseallowsBounceVertical:頁面是否支持縱向拽拉超出實(shí)際內(nèi)容。默認(rèn) YEStitleBarColor:導(dǎo)航欄背景色
tabBar寫法
{ "tabBar": { "textColor": "#dddddd", "selectedColor": "#49a9ee", "backgroundColor": "#ffffff", "items": [ { "pagePath": "pages/index/index", "name": "首頁" }, { "pagePath": "pages/logs/logs", "name": "日志" } ] } }
事件綁定
寫法：on/catch[事件名駝峰]="回調(diào)名"
<button onTap="changeText">change Text</button>
Page()的方法屬性
Page()方法的屬性多了
onTitleClick()：點(diǎn)擊標(biāo)題觸發(fā)onOptionMenuClick:點(diǎn)擊格外導(dǎo)航欄圖標(biāo)觸發(fā)（1.3 ）onPageScroll：頁面滾動時觸發(fā)
高效的列表處理方法（新增）
Page.prototype.$spliceData()
對象的鍵名key可以非常靈活蝠猬，以數(shù)據(jù)路徑的形式給出切蟋，如 array[2].message、a.b.c.d榆芦，并且不需要在this.data中預(yù)先定義柄粹。對象的value為一個數(shù)組（格式：[start, deleteCount, ...items]）,數(shù)組的第一個元素為操作的起始位置喘鸟，第二個元素為刪除的元素的個數(shù)，剩余的元素均為插入的數(shù)據(jù)驻右。對應(yīng)es5中數(shù)組的splice方法
每一個頁面的page.json
多了一個方法什黑，onOptionMenuClick：配置導(dǎo)航圖標(biāo)，點(diǎn)擊后觸發(fā)
{ "optionMenu": { "icon": "" } }
視圖層指令
條件循環(huán)
<view a:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view> <view a:elif="{{view == 'APP'}}"> APP </view> <view a:else> alipay </view>
列表循環(huán)
<view a:for="{{items}}"> {{item}} </view>
以上可以看出wx:換成堪夭，a:
數(shù)據(jù)綁定
對象擴(kuò)展符：...來將一個對象展開
<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}兑凿。
列表循環(huán)
增加了一個key屬性
key 是比 a:key 更通用的寫法，里面可以填充任意表達(dá)式和字符串茵瘾。
在?for 中使用 key 來提高性能。
注意?key 不能設(shè)置在 block 上
樣式
支持rpx
同css3?保持一致咐鹤，注意點(diǎn):
.a-, .am- 開頭的類選擇器為系統(tǒng)組件占用拗秘，請不要使用
不支持屬性選擇器
自定義腳本
微信中使用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 };
注意點(diǎn)
1.?
sjs 只能定義在.sjs文件中。然后在axml中使用import-sjs引入祈惶。
2.?
3.?
sjs 可以調(diào)用其他 sjs 文件中定義的函數(shù)雕旨。
4.?
5.?
sjs 是 javascript 語言的子集，不要將其等同于javascript捧请。
6.?
7.?
sjs的運(yùn)行環(huán)境和其他javascript代碼是隔離的凡涩，sjs中不能調(diào)用其他javascript文件中定義的函數(shù)，也不能調(diào)用小程序提供的API疹蛉。
8.?
9.?
sjs函數(shù)不能作為組件的事件回調(diào)活箕。
10.?
11.?
sjs不依賴于運(yùn)行時的基礎(chǔ)庫版本，可以在所有版本的小程序中運(yùn)行可款。
12.?
自定義組件
和頁面一樣育韩，自定義組件也由4個部分組成：axml、js闺鲸、json筋讨、acss。
示例：
// /components/customer/index.json { "component": true } // /components/customer/index.js Component({ mixins: [], // minxin 方便復(fù)用代碼 data: { x: 1 }, // 組件內(nèi)部數(shù)據(jù) props: { y: 1 }, // 可給外部傳入的屬性添加默認(rèn)值 didMount(){}, // 生命周期函數(shù) didUpdate(){}, didUnmount(){}, methods: { // 自定義事件 handleTap() { this.setData({ x: this.data.x 1}); // 可使用 setData 改變內(nèi)部屬性 }, }, })<!-- // /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>
組件
列出與微信對比沒有的組件：
基礎(chǔ)內(nèi)容：
rich-text
導(dǎo)航：
functional-page-navigator
媒體：
audio摸恍、video悉罕、camera、live-player立镶、live-pusher
開放組件：
open-data
擴(kuò)展組件
多了很多微信沒有的擴(kuò)展組件
布局導(dǎo)航
List 列表壁袄、Tabs 選項(xiàng)卡、VTabs 縱向選項(xiàng)卡谜慌、Card 卡片然想、Grid 宮格、Steps 步驟條欣范、Footer 頁腳
操作浮層
Popover 氣泡变泄、Filter 篩選令哟、Modal 對話框、Popup 彈出菜單
結(jié)果類
PageResult 異常頁妨蛹、Message 結(jié)果頁
提示引導(dǎo)
Tips 引導(dǎo)屏富、Notice 通告欄、Badge 徽標(biāo)
表單類
InputItem 文本輸入蛙卤、AmountInput 金額輸入狠半、SearchBar 搜索框、AMCheckBox 復(fù)選框
手勢類
SwipeAction 可滑動單元格
其他
Calendar 日歷颤难、Stepper 步進(jìn)器
API
命名空間為：my.
交互反饋增加了
my.alert()神年、my.confirm()、my.prompt()
交互反饋沒有
showModal
增加了聯(lián)系人
my.choosePhoneContact()
增加了選擇城市
my.chooseCity()
增加了選擇日期
my.datePicker(object)
