首頁 > 微信小程式 > 小程式開發 > 一起看看支付寶小程式與微信小程式開發的差異

一起看看支付寶小程式與微信小程式開發的差異

coldplay.xixi
發布: 2021-04-14 10:25:45
轉載
3509 人瀏覽過

一起看看支付寶小程式與微信小程式開發的差異

淺談支付寶小程式與微信小程式開發的差異

一、 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>
登入後複製

微信小程式

#bindtapcatchtouchstart

#bind事件綁定不會阻止冒泡事件向上冒泡,catch事件綁定可以阻止冒泡事件向上冒泡。

<button class="weui-btn" bindtap=&#39;login&#39; type="primary">登录</button>
登入後複製

2.列表渲染

Page({
  data: {
    list: [{
      Title: &#39;支付宝&#39;,
    }, {
      Title: &#39;微信&#39;,
    }]
  }
})
登入後複製

支付寶小程式

<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: &#39;success&#39;,//默认 none,支持 success / fail / exception / none’。
  content: &#39;操作成功&#39;,//文字内容
  duration: 3000,//显示时长,单位为 ms,默认 2000
  success: () => {
    my.alert({
      title: &#39;toast 消失了&#39;,
    });
  },
});
登入後複製
my.hideToast()//隐藏弱提示。
登入後複製

微信小程式

wx.showToast({
  title: &#39;成功&#39;,//提示的内容
  icon: &#39;success&#39;,//success	显示成功图标;loading	显示加载图标;none不显示图标
  duration: 2000
})

//icon为“success”“loading”时 title 文本最多显示 7 个汉字长度
登入後複製
wx.hideToast() //隐藏
登入後複製
2.訊息提示方塊

支付寶小程式

my.showLoading({
  content: &#39;加载中...&#39;,
  delay: 1000,
});
登入後複製
my.hideLoading();
登入後複製

微信小程式

wx.showLoading({
  title: &#39;加载中&#39;,
})
登入後複製
wx.hideLoading()
登入後複製
3.http 要求

支付寶小程式

my.httpRequest({
  url: &#39;http://httpbin.org/post&#39;,
  method: &#39;POST&#39;,
  data: {
    from: &#39;支付宝&#39;,
    production: &#39;AlipayJSAPI&#39;,
  },
  headers:"",//默认 {&#39;Content-Type&#39;: &#39;application/x-www-form-urlencoded&#39;}
  dataType: &#39;json&#39;,
  success: function(res) {
    my.alert({content: &#39;success&#39;});
  },
  fail: function(res) {
    my.alert({content: &#39;fail&#39;});
  },
  complete: function(res) {
    my.hideLoading();
    my.alert({content: &#39;complete&#39;});
  }
});
登入後複製

微信小程式

wx.request({
  url: &#39;test.php&#39;, //仅为示例,并非真实的接口地址
  data: {
    x: &#39;&#39;,
    y: &#39;&#39;
  },
  header: {
    &#39;content-type&#39;: &#39;application/json&#39; // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})
登入後複製

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

1.時間選擇器

支付寶小程式

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

my.datePicker({
  format: &#39;yyyy-MM-dd&#39;,//返回的日期格式,
  currentDate: &#39;2012-12-12&#39;,//初始选择的日期时间,默认当前时间
  startDate: &#39;2012-12-10&#39;,//最小日期时间
  endDate: &#39;2012-12-15&#39;,//最大日期时间
  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: &#39;2016-09-01&#39;,
  },

  bindDateChange: function(e) {
    console.log(&#39;picker发送选择改变,携带值为&#39;, e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
})
登入後複製

2.省市區選擇器

支付寶小程式

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

級聯選擇功能主要使用在於多層關聯資料選擇,比如說省市區的資訊選擇。

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

1.2、在js中引入這個檔案

1.3、使用my.multiLevelSelect(Object)

var citysJSON = require(&#39;../../utils/city.js&#39;);
Page({
  data: {
    provinces: &#39;陕西省&#39;,
    city: &#39;西安市&#39;,
    area: &#39;碑林区&#39;
  },
  chooseAddress: function () {
    my.multiLevelSelect({
      title: &#39;选择省市区&#39;,//级联选择标题
      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: [&#39;广东省&#39;, &#39;广州市&#39;, &#39;海珠区&#39;],
    customItem: &#39;全部&#39;
  },

  bindRegionChange: function (e) {
    console.log(&#39;picker发送选择改变,携带值为&#39;, e.detail.value)
    this.setData({
      region: e.detail.value
    })
  }
})
登入後複製

(3)小程式喚起支付

#支付寶小程式##

my.tradePay({
  tradeNO: &#39;201711152100110410533667792&#39;, // 调用统一收单交易创建接口(alipay.trade.create),获得返回字段支付宝交易号trade_no
  success: (res) => {
    my.alert({
	  content: JSON.stringify(res),
	});
  },
  fail: (res) => {
    my.alert({
	  content: JSON.stringify(res),
	});
  }
});
登入後複製

#微信小程式

wx.requestPayment({
  timeStamp: &#39;&#39;,//时间戳,从 1970 年 1 月 1 日 00:00:00 至今的秒数,即当前的时间
  nonceStr: &#39;&#39;,//随机字符串,长度为32个字符以下
  package: &#39;&#39;,//统一下单接口返回的 prepay_id 参数值,提交格式如:prepay_id=***
  signType: &#39;MD5&#39;,//签名算法
  paySign: &#39;&#39;,//签名
  success (res) { },
  fail (res) { }
})
登入後複製

(4)電話

支付宝小程序

my.makePhoneCall({
	number: &#39;400-8097-114&#39;
})
登入後複製

微信小程序

wx.makePhoneCall({
  phoneNumber: &#39;400-8097-114&#39;
})
登入後複製

(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都会给你熟悉的感觉!

相关免费学习推荐:微信小程序开发

以上是一起看看支付寶小程式與微信小程式開發的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板