淺談支付寶小程序與微信小程序開發的區別
一、app.json
（1）設置小程序通用的的狀態欄、導航條、標題、窗口背景色
支付寶小程序
"window": {
"defaultTitle": "病案到家", //頁面標題
"titleBarColor": "#1688FB" //導航欄背景色
},
微信小程序
"window": {
"backgroundTextStyle": "light",//窗口的背景色
"navigationBarBackgroundColor": "#1688FB",//導航欄背景顏色
"navigationBarTitleText": "病案到家",//導航欄標題文字內容
"navigationBarTextStyle": "white"//導航欄標題顏色，僅支持 black/white
},
（2）設置tabBar
支付寶小程序
"tabBar": {
"textColor": "#333333",//默認顏色
"selectedColor": "#1688FB",//選中顏色
"backgroundColor": "#ffffff",//背景色
"items": [
{
"icon": "/images/indexGrey.png",
"activeIcon": "/images/indexWhite.png",
"pagePath": "pages/homeIndex/homeIndex",
"name": "首頁"
},
{
"icon": "/images/personGrey.png",
"activeIcon": "/images/personWhite.png",
"pagePath": "pages/orderList/orderList",
"name": "我的"
}
]
}
微信小程序
"tabBar": {
"color": "#333333",
"selectedColor": "#1688FB",
"backgroundColor": "#ffffff",
"borderStyle": "#e5e5e5",
"list": [
{
"iconPath": "/images/indexGrey.png",
"selectedIconPath": "/images/indexWhite.png",
"pagePath": "pages/homeIndex/homeIndex",
"text": "首頁"
},
{
"iconPath": "/images/personGrey.png",
"selectedIconPath": "/images/personWhite.png",
"pagePath": "pages/orderList/orderList",
"text": "我的"
}
]
}
二、pages
（1）文件命名不同
支付寶小程序
微信小程序
我分別在微信小程序和支付寶小程序建立了頁面，區別在於：
1.支付寶小程序裏面的視圖層頁面文件後綴是“axml”，樣式文件後綴是“acss”；
2.微信小程序裏面的視圖層頁面文件後綴是“wxml”，樣式文件後綴是“wxss”。
（2）視圖層頁面axml以及wxml
1.冒泡事件和非冒泡事件
支付寶小程序
onTap, catchTap
on 事件綁定不會阻止冒泡事件向上冒泡，catch 事件綁定可以阻止冒泡事件向上冒泡。
<button class="weui-btn" onTap="login" type="primary">登錄</button>
微信小程序
bindtap、catchtouchstart
bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。
<button class="weui-btn" bindtap='login' type="primary">登錄</button>
2.列表渲染
Page({
data: {
list: [{
Title: '支付寶',
}, {
Title: '微信',
}]
}
})
支付寶小程序
<block a:for="{{list}}">
<view key="item-{{index}}" index="{{index}}">{{item.Title}}</view>
</block>
微信小程序
<block wx:for="{{list}}">
<view wx:key="this" wx:for-item="item">{{item.Title}}</view>
</block>
3.條件渲染
支付寶小程序
<view a:if="{{length > 5}}"> 1 </view>
<view a:elif="{{length > 2}}"> 2 </view>
<view a:else> 3 </view>
微信小程序
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
三、開發過程中常用到的兩個小程序中組件的不同用法
（1）交互
1.消息提示框
支付寶小程序
my.showToast({
type: 'success',//默認 none，支持 success / fail / exception / none’。
content: '操作成功',//文字內容
duration: 3000,//顯示時長，單位爲 ms，默認 2000
success: () => {
my.alert({
title: 'toast 消失了',
});
},
});
my.hideToast()//隱藏弱提示。
微信小程序
wx.showToast({
title: '成功',//提示的內容
icon: 'success',//success 顯示成功圖標;loading 顯示加載圖標;none不顯示圖標
duration: 2000
})
//icon爲“success”“loading”時 title 文本最多顯示 7 個漢字長度
wx.hideToast() //隱藏
2.消息提示框
支付寶小程序
my.showLoading({
content: '加載中...',
delay: 1000,
});
my.hideLoading();
微信小程序
wx.showLoading({
title: '加載中',
})
wx.hideLoading()
3.http 請求
支付寶小程序
my.httpRequest({
url: 'http://httpbin.org/post',
method: 'POST',
data: {
from: '支付寶',
production: 'AlipayJSAPI',
},
headers:"",//默認 {'Content-Type': 'application/x-www-form-urlencoded'}
dataType: 'json',
success: function(res) {
my.alert({content: 'success'});
},
fail: function(res) {
my.alert({content: 'fail'});
},
complete: function(res) {
my.hideLoading();
my.alert({content: 'complete'});
}
});
微信小程序
wx.request({
url: 'test.php', //僅爲示例，並非真實的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默認值
},
success (res) {
console.log(res.data)
}
})
其實微信小程序和支付寶小程序提供的api方法大致相同，只是微信小程序是以“wx.”起頭，支付寶小程序是以“my.”起頭，其餘可能只是api方法裏面字段“text、content、name、title”等命名不同。
（2）選擇器
1.時間選擇器
支付寶小程序
支付寶小程序提供了一個api，my.datePicker(object)
my.datePicker({
format: 'yyyy-MM-dd',//返回的日期格式，
currentDate: '2012-12-12',//初始選擇的日期時間，默認當前時間
startDate: '2012-12-10',//最小日期時間
endDate: '2012-12-15',//最大日期時間
success: (res) => {
my.alert({
content: res.date,
});
},
});
微信小程序
微信小程序是通過picker組件來實現的
<view class="section">
<view class="section__title">日期選擇器</view>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="picker">
當前選擇: {{date}}
</view>
</picker>
</view
Page({
data: {
date: '2016-09-01',
},
bindDateChange: function(e) {
console.log('picker發送選擇改變，攜帶值爲', e.detail.value)
this.setData({
date: e.detail.value
})
},
})
2.省市區選擇器
支付寶小程序
支付寶小程序提供了一個api，my.multiLevelSelect(Object)
級聯選擇功能主要使用在於多級關聯數據選擇，比如說省市區的信息選擇。
- 引入一個省市區的json格式文件http://blog.shzhaoqi.com/uploads/js/city_json.zip
- 在js中引入這個文件
- 使用my.multiLevelSelect(Object)
var citysJSON = require('../../utils/city.js');
Page({
data: {
provinces: '陝西省',
city: '西安市',
area: '碑林區'
},
chooseAddress: function () {
my.multiLevelSelect({
title: '選擇省市區',//級聯選擇標題
list: citysJSON.citys,
success: (res) => {
this.setData({
provinces: res.result[0].name,
city: res.result[1].name,
area: res.result[2].name,
})
}
});
},
})
微信小程序
微信小程序依然是通過picker組件來實現的
<view class="section">
<view class="section__title">省市區選擇器</view>
<picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
<view class="picker">
當前選擇：{{region[0]}}，{{region[1]}}，{{region[2]}}
</view>
</picker>
</view>
//custom-item 可爲每一列的頂部添加一個自定義的項,可爲空
Page({
data: {
region: ['廣東省', '廣州市', '海珠區'],
customItem: '全部'
},
bindRegionChange: function (e) {
console.log('picker發送選擇改變，攜帶值爲', e.detail.value)
this.setData({
region: e.detail.value
})
}
})
（3）小程序喚起支付
支付寶小程序
my.tradePay({
tradeNO: '201711152100110410533667792', // 調用統一收單交易創建接口（alipay.trade.create），獲得返回字段支付寶交易號trade_no
success: (res) => {
my.alert({
content: JSON.stringify(res),
});
},
fail: (res) => {
my.alert({
content: JSON.stringify(res),
});
}
});
微信小程序
wx.requestPayment({
timeStamp: '',//時間戳，從 1970 年 1 月 1 日 00:00:00 至今的秒數，即當前的時間
nonceStr: '',//隨機字符串，長度爲32個字符以下
package: '',//統一下單接口返回的 prepay_id 參數值，提交格式如：prepay_id=***
signType: 'MD5',//簽名算法
paySign: '',//簽名
success (res) { },
fail (res) { }
})
（4）電話
支付寶小程序
my.makePhoneCall({
number: '400-8097-114'
})
微信小程序
wx.makePhoneCall({
phoneNumber: '400-8097-114'
})
（5）獲取登錄憑證（code）
支付寶小程序
my.getAuthCode({
success (res) {
if (res.authCode) {
console.log(res.authCode)
}
}
})
微信小程序
wx.login({
success (res) {
if (res.code) {
console.log(res.code)
}
}
})
簡單介紹一下支付寶小程序
支付寶小程序主要有四大特色功能：
1：支付能力：可以滿足客戶在消費場景中的支付需求。
2：信用能力：爲商戶高效識別用戶的真實性，靠譜性。
3：大數據功能：可以收集用戶消費數據深度分析並挖掘目標用戶的具體需求。
4：安全性：爲商戶檢測系統漏洞，數據泄露等安全風險。
用戶進入支付寶小程序有三種途徑
1：用戶可以通過線下掃碼進入支付寶小程序
2：在支付寶APP內搜索進入。
3：通過好友分享進入小程序。
支付寶小程序與微信小程序有什麼區別呢?
一：微信小程序的入口多於支付寶小程序
微信小程序依託於微信平臺可以通過微信內搜索，公衆號，附近的小程序功能，線下二維碼，小程序之間的跳轉，好友分享等，相比而言目前支付寶小程序的入口要少於微信小程序。
二：產品定位不同
微信小程序主要打得是社交牌，社交經濟生態體系，而支付寶是針對於電商，所以在後續的產品運營上會有很大的區別，支付寶並不會涉及社交，內容等領域。支付寶跟微信相比一個特色的模塊就是信用市場，這也是支付寶本身的優點。
三：面向羣體不同
支付寶小程序與微信小程序最大的區別就是支付寶小程序不支持個人申請，僅支持企業註冊，而微信小程序大家都可以註冊。
四：用戶使用率不同
微信小程序跟支付寶小程序相比的有點是微信的用戶流量大，目前微信用戶活躍量已經達到了10億，人們的工作生活的時間很多是花費在微信上，而支付寶更多是付款的時候使用。