国产精品久久久一区二区,国产精品久久久久久av福利

Home

WeChat Applet

Mini Program Development

Let's take a look at the differences between Alipay mini program and WeChat mini program development

coldplay.xixi

Apr 14, 2021 am 10:23 AM

WeChat applet development Alipay applet

A brief discussion on the difference between the development of Alipay mini programs and WeChat mini programs

1. app.json

(1) Set the status bar, navigation bar, title, and window background color common to the mini program

Alipay mini program

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

WeChat Mini Program

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

Related learning recommendations: 小programDevelopmentTutorial

(2) Set tabBar

Alipay Mini Program

"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": "我的"
      }
    ]
  }

WeChat Mini Program

"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": "我的"
      }
    ]
  }

2. Pages

(1) File naming is different

Alipay Mini Program

##WeChat Mini Program

I created pages in the WeChat mini program and the Alipay mini program respectively. The difference is:

1. In the Alipay mini program The suffix of the view layer page file is "axml", and the suffix of the style file is "acss";

2. The suffix of the view layer page file in the WeChat applet is "wxml", and the suffix of the style file is "wxss".

(2) View layer page axml and wxml

1. Bubble events and non-bubble events

Alipay applet

onTap, catchTap

On event binding will not prevent bubbling events from bubbling upwards, while catch event binding can prevent bubbling events from bubbling upwards.

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

WeChat Mini Program

bindtap、catchtouchstart

bindEvent binding will not prevent bubbling events from bubbling upwards. catchEvent binding can prevent bubbling events from bubbling upwards.

<button class="weui-btn" bindtap=&#39;login&#39; type="primary">登錄</button>

2. List rendering

Page({
  data: {
    list: [{
      Title: &#39;支付寶&#39;,
    }, {
      Title: &#39;微信&#39;,
    }]
  }
})

Alipay applet

<block a:for="{{list}}">
  <view key="item-{{index}}" index="{{index}}">{{item.Title}}</view>
</block>

WeChat applet

<block wx:for="{{list}}">
  <view wx:key="this" wx:for-item="item">{{item.Title}}</view>
</block>

3. Conditional rendering

Alipay applet

<view a:if="{{length > 5}}"> 1 </view>
<view a:elif="{{length > 2}}"> 2 </view>
<view a:else> 3 </view>

WeChat Mini Program

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

3.Different usage of components in the two mini programs commonly used in the development process

(1) Interaction

1. Message prompt box

Alipay applet

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

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

WeChat Mini Program

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

//icon為“success”“l(fā)oading”時 title 文本最多顯示 7 個漢字長度

rrree

2. Message prompt box

Alipay Mini Program

wx.hideToast() //隱藏

my.showLoading({
  content: &#39;加載中...&#39;,
  delay: 1000,
});

WeChat Mini Program

my.hideLoading();

wx.showLoading({
  title: &#39;加載中&#39;,
})

3.http request

Alipay Mini Program

wx.hideLoading()

WeChat Mini Program

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;});
  }
});

In fact, the API methods provided by WeChat Mini Program and Alipay Mini Program are roughly the same The same, except that the WeChat applet starts with "wx." and the Alipay applet starts with "my.". The rest may be just that the fields "text, content, name, title" in the API method are named differently.

(2) Selector

1. Time selector

Alipay applet

The Alipay applet provides an API, my.datePicker(object)

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)
  }
})

WeChat applet

WeChat applet It is implemented through the picker component

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

<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

2. Province and city selector

Alipay applet

Alipay applet The program provides an API, my.multiLevelSelect(Object)

The cascade selection function is mainly used for multi-level associated data selection, such as province and city information selection.

1.1. Introduce a json format file of a province or city http://blog.shzhaoqi.com/uploads/js/city_json.zip

1.2. Introduce this file in js

1.3. Use my.multiLevelSelect(Object)

Page({
  data: {
    date: &#39;2016-09-01&#39;,
  },

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

WeChat Mini Program

WeChat Mini Program still uses the picker component Implemented

var citysJSON = require(&#39;../../utils/city.js&#39;);
Page({
  data: {
    provinces: &#39;陜西省&#39;,
    city: &#39;西安市&#39;,
    area: &#39;碑林區(qū)&#39;
  },
  chooseAddress: function () {
    my.multiLevelSelect({
      title: &#39;選擇省市區(qū)&#39;,//級聯(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,
        })
      }
    });
  },
})

<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   可為每一列的頂部添加一個自定義的項,可為空

(3) Mini program evokes payment

Alipay mini program

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

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

WeChat Mini Program

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

(4) Phone

支付寶小程序

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都會給你熟悉的感覺！

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

The above is the detailed content of Let's take a look at the differences between Alipay mini program and WeChat mini program development. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn