淺談支付寶小程式與微信小程式開(kāi)發(fā)的差異

一、 app.json

（1）設(shè)定小程式通用的狀態(tài)列、導(dǎo)航條、標(biāo)題、視窗背景色

支付寶小程序

  "window": {
    "defaultTitle": "病案到家",   //頁(yè)面標(biāo)題
    "titleBarColor": "#1688FB"    //導(dǎo)航欄背景色
  },

微信小程式

#

  "window": {
    "backgroundTextStyle": "light",//窗口的背景色
    "navigationBarBackgroundColor": "#1688FB",//導(dǎo)航欄背景顏色
    "navigationBarTitleText": "病案到家",//導(dǎo)航欄標(biāo)題文字內(nèi)容
    "navigationBarTextStyle": "white"//導(dǎo)航欄標(biāo)題顏色，僅支持 black/white
  },

相關(guān)學(xué)習(xí)推薦：小程式開(kāi)發(fā)教學(xué)

（2）設(shè)定tabBar

#支付寶小程式##

"tabBar": {
    "textColor": "#333333",//默認(rèn)顏色
    "selectedColor": "#1688FB",//選中顏色
    "backgroundColor": "#ffffff",//背景色
    "items": [
      {
        "icon": "/images/indexGrey.png",
        "activeIcon": "/images/indexWhite.png",
        "pagePath": "pages/homeIndex/homeIndex",
        "name": "首頁(yè)"
      },
      {
        "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": "首頁(yè)"
      },
      {
        "iconPath": "/images/personGrey.png",
        "selectedIconPath": "/images/personWhite.png",
        "pagePath": "pages/orderList/orderList",
        "text": "我的"
      }
    ]
  }

#二、pages

（1）檔案命名不同

支付寶小程式

#微信小程式

我分別在微信小程式和支付寶小程式建立了頁(yè)面，差別在於：

1.支付寶小程式裡面的視圖層頁(yè)面檔案後綴是“axml”，樣式檔案後綴是“acss”；

2.微信小程式裡面的視圖層頁(yè)面檔案後綴是“wxml”，樣式檔案後綴是“wxss”。

（2）視圖層頁(yè)面axml以及wxml

1.冒泡事件與非冒泡事件

支付寶小程式

onTap, catchTap

on 事件綁定不會(huì)阻止冒泡事件向上冒泡，catch 事件綁定可以阻止冒泡事件向上冒泡。

<button class="weui-btn" onTap="login" type="primary">登錄</button>

微信小程式

#bindtap、catchtouchstart

#bind事件綁定不會(huì)阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

<button class="weui-btn" bindtap=&#39;login&#39; 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>

三、開(kāi)發(fā)過(guò)程中常用到的兩個(gè)小程式中元件的不同用法

（1）互動(dòng)

1.訊息提示方塊

#支付寶小程式##

my.showToast({
  type: 'success',//默認(rèn) none，支持 success / fail / exception / none’。
  content: '操作成功',//文字內(nèi)容
  duration: 3000,//顯示時(shí)長(zhǎng)，單位為 ms，默認(rèn) 2000
  success: () => {
    my.alert({
      title: 'toast 消失了',
    });
  },
});

my.hideToast()//隱藏弱提示。

微信小程式

wx.showToast({
  title: '成功',//提示的內(nèi)容
  icon: 'success',//success	顯示成功圖標(biāo);loading	顯示加載圖標(biāo);none不顯示圖標(biāo)
  duration: 2000
})

//icon為“success”“l(fā)oading”時(shí) title 文本最多顯示 7 個(gè)漢字長(zhǎng)度

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:"",//默認(rèn) {'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', //僅為示例，并非真實(shí)的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默認(rèn)值
  },
  success (res) {
    console.log(res.data)
  }
})

其實(shí)微信小程式和支付寶小程式提供的api方法大致相同，只是微信小程式是以「wx.」起頭，支付寶小程式是以「my.」起頭，其餘可能只是api方法裡面欄位「text、content、name、title」等命名不同。 （2）選擇器

1.時(shí)間選擇器

支付寶小程式

#支付寶小程式提供了一個(gè)api，my.datePicker(object)

my.datePicker({
  format: 'yyyy-MM-dd',//返回的日期格式，
  currentDate: '2012-12-12',//初始選擇的日期時(shí)間，默認(rèn)當(dāng)前時(shí)間
  startDate: '2012-12-10',//最小日期時(shí)間
  endDate: '2012-12-15',//最大日期時(shí)間
  success: (res) => {
    my.alert({
	  content: res.date,
	});
  },
});

微信小程式

微信小程式是透過(guò)picker元件來(lái)實(shí)現(xiàn)的

<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">
      當(dāng)前選擇: {{date}}
    </view>
  </picker>
</view

Page({
  data: {
    date: '2016-09-01',
  },

  bindDateChange: function(e) {
    console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
})

2.省市區(qū)選擇器

支付寶小程式

支付寶小程式提供了一個(gè)api，my.multiLevelSelect(Object)

級(jí)聯(lián)選擇功能主要使用在於多層關(guān)聯(lián)資料選擇，比如說(shuō)省市區(qū)的資訊選擇。

1.1、引入一個(gè)省市區(qū)的json格式檔案http://blog.shzhaoqi.com/uploads/js/city_json.zip

1.2、在js中引入這個(gè)檔案

1.3、使用my.multiLevelSelect(Object)

var citysJSON = require('../../utils/city.js');
Page({
  data: {
    provinces: '陜西省',
    city: '西安市',
    area: '碑林區(qū)'
  },
  chooseAddress: function () {
    my.multiLevelSelect({
      title: '選擇省市區(qū)',//級(jí)聯(lián)選擇標(biāo)題
      list: citysJSON.citys,
      success: (res) => {
        this.setData({
          provinces: res.result[0].name,
          city: res.result[1].name,
          area: res.result[2].name,
        })
      }
    });
  },
})

#微信小程式

微信小程式依然是透過(guò)picker元件來(lái)實(shí)現(xiàn)的

<view class="section">
  <view class="section__title">省市區(qū)選擇器</view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
      當(dāng)前選擇：{{region[0]}}，{{region[1]}}，{{region[2]}}
    </view>
  </picker>
</view>

//custom-item   可為每一列的頂部添加一個(gè)自定義的項(xiàng),可為空

Page({
  data: {
    region: ['廣東省', '廣州市', '海珠區(qū)'],
    customItem: '全部'
  },

  bindRegionChange: function (e) {
    console.log('picker發(fā)送選擇改變，攜帶值為', e.detail.value)
    this.setData({
      region: e.detail.value
    })
  }
})

（3）小程式喚起支付

#支付寶小程式##

my.tradePay({
  tradeNO: '201711152100110410533667792', // 調(diào)用統(tǒng)一收單交易創(chuàng)建接口（alipay.trade.create），獲得返回字段支付寶交易號(hào)trade_no
  success: (res) => {
    my.alert({
	  content: JSON.stringify(res),
	});
  },
  fail: (res) => {
    my.alert({
	  content: JSON.stringify(res),
	});
  }
});

#微信小程式

wx.requestPayment({
  timeStamp: '',//時(shí)間戳，從 1970 年 1 月 1 日 00:00:00 至今的秒數(shù)，即當(dāng)前的時(shí)間
  nonceStr: '',//隨機(jī)字符串，長(zhǎng)度為32個(gè)字符以下
  package: '',//統(tǒng)一下單接口返回的 prepay_id 參數(shù)值，提交格式如：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)
    } 
  }
})

支付寶小程序與微信小程序有很多相似之處，不論是組件還是api都會(huì)給你熟悉的感覺(jué)！

相關(guān)免費(fèi)學(xué)習(xí)推薦：微信小程序開(kāi)發(fā)

以上是一起看看支付寶小程式與微信小程式開(kāi)發(fā)的差異的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！