Recently transferred to the new pit, the company’s original wechat small program, need to develop a version of alipay small program. May be a lot of people like the author, wechat small program contact and development more, but Alipay small program can be said to be small, after a simple look at the document found that in fact, there is no big difference, just some grammar, configuration and other aspects have certain differences. Now Alipay small program also do about the same, a simple summary of the difference between the two, of course, is mainly the basic grammar and the project involved in the knowledge points of some summary, after all, Alipay small program has not been in-depth study.

Basic file format and configuration

Wechat applets file suffix:.wxml.wxss

Alipay applets file suffix:.axml. Acss

Similarly, parameters for configuring JSON files, such as setting the page title and whether to refresh in the drop-down list, are inconsistent. The specific reference documents are not listed here.

Basic syntax and method calls

methods Wechat applets Alipay small program
Built-in method calls By wx By way of my
In-page syntax wx:if/wx:for a:if/a:for
Triggering event Through the bindtap/bindcatch, etc Through the onTap/onCatch, etc
The cache method wx.getStorageSync()/wx.setStorageSync() my.setStorageSync({key: ”, data: ”})/my.getStorageSync({key: ”}).data

Iii. Authorization related methods

methods Wechat applets Alipay small program other
Access to locate Wx. GetLocation ({}) my.getLocation({}) Type, wechat can default ship ‘WGS84’, Alipay chuan1
Login credentials wx.login({}) my.getAuthCode({})
Mobile Phone Number Authorization See instructions below

About mobile phone number authorization, need to say separately, especially the pit of Alipay.

For wechat mobile phone number authorization, we can develop it according to the document, with a simple code:

<button class='submit-pay-btn' open-type="getPhoneNumber" bindgetphonenumber="authJianpan"</button> authJianpan:function (e) {
    if (e.detail.errMsg == 'getPhoneNumber:ok') {
      // Authorization succeeded
    } else {
      // Reject authorization methods}}Copy the code

However, for alipay mobile phone number authorization, we write according to the document, we will find that the authorization callback cannot be successfully triggered, alipay authorization callback needs to be written separately, directly into the code:

<button class='submit-pay-btn' open-type="getAuthorize" onGetAuthorize="getPhoneNum" onError="onAuthError" scope='phoneNumber'> Confirm payment </button>/ / authorization
onGetAuthorize: function (e) {
  return new Promise((resolve, reject) = >{
    my.getPhoneNumber({
      success: (res) = > {
        // Authorization succeeded
        resolve(res)
      },
      fail: (res) = > {
        // Deny authorization
        reject(res)
      }
    })
  })
},
// Authorization callback succeeded
getPhoneNum: function(e){
  this.onGetAuthorize(e).then((res) = >{})},// Reject authorization callback
onAuthError: function(err){}
Copy the code

Simply say alipay authorization method: The onGetAuthorize/onError method should be added to define the button, which represents the approval of authorization and the rejection of authorization respectively. Then define the onGetAuthorize method, which can be used to obtain authorization successfully or failed through my.getPhonenumber method. The successful and failed callbacks are then handled separately.

4. Payment interface

Wechat applet payment method, wx.requestPayment, requires a bunch of parameters to be passed in, of course, these parameters can be easily obtained by combining the backend interface with the document;

TradePay, the payment method of Alipay mini program, only needs to pass in a tradeNO parameter, but the parameter document does not clearly specify which field it is, and the case just writes a string of numbers, which is quite confusing. Finally, after the test, Make sure you get the source field returned by the backend after docking with Alipay (another cruel method is to look at the return value of each field and compare it with the value in the document, the same length may be the required field).

V. Records of small problems in Alipay:

1. Tabbar is not displayed because non-Tab pages are redirected

Some pages need user authorization when entering, at this time, we usually add a unified authorization page, users agree that authorization will be successful and return to the original page, cancel authorization will return to the home page. In wechat mini program, we can use wx.redirectTo to jump, and the subsequent process is normally executed. However, in alipay mini program, no matter it is through my. NavigateTo or my. RedirectTo, tabbar will not display problems when the user cancels authorization and returns to the home page, and life cycle and click events related to colleague pages are invalid.

NavigateTo and redirectTo should not be used when jumping from TAB to non-tab page. You can use relaunch to jump from TAB to non-tab page, so that tabbar can be successfully displayed on return without affecting the subsequent process.

The above are the holes filled in the project, which may be relatively simple, but some of the problems really bothered for a long time. Of course, in addition to these, there are some parameters such as modal, alert, etc., inconsistent ah; Picker date picker format is not the same ah and so on relatively small issues, basically by looking at the document can be easily solved.

Of course, some big brother to micro channel small program play quite slip, this big brother believe that alipay small program will not have too big a problem. For us these small white or need to refueling mutual encouragement