Recently, the company’s wechat small program needs to be compatible with Alipay, thinking taro can compile alipay small program anyway, that the problem will not be very big. Unexpectedly, this compatibility is very bald to do

(This is the first time to try some of my own development summary, the first description, if there is anything inappropriate, please help to point out, many thanks!)

Record the painstaking process of filling the pit:

  1. NPM run Build: Alipay — — Watch if you do not have a good look at the taro official documentation, directly compile NPM run build: Alipay — –watch, then directly report an error. Because taro initializes the project will not generate alipay small program configuration file mini-project. json! Specific configuration according to pay treasure to small program website opendocs.alipay.com/mini/framew… Configuration is ok

  2. After entering the small program, there may be GET interface error parameter JSON format error, but everything on wechat is normal. {status: [‘1’, ‘2’],sort: {id: asC}} {status: {id: asC}} JSON.stringify([‘1’, ‘2’]),sort: JSON.stringify({id: This meets a large wave of code modification, so in the development of small procedures, if there is to do alipay compatible, we must do this work in advance, or we will have to modify one by one.

  3. The confirmation pop-ups of the two are also different: The method of wechat is showModal, while the small program is Confirm. This problem at the beginning of the development of the problem is not big, but an original may not be compatible with alipay micro channel small program, is not to consider, but later suddenly to do compatible words, don’t want me to go to every place with environmental judgment, then directly to the top

At first I was like, wow, this is very closed, but then I came up with a way to make an environment judgment of this method in app.js, and other similar API problems can use this method to make compatibilityTaro.showModal = (option) => { if(process.env.TARO_ENV === 'weapp'){ return Taro.showModal(option) } else if(process.env.TARO_ENV === 'alipay') { return my.confirm(option) } }

  1. Another problem is that the createSelectorQuery and createSelectorQuery are used differently. When we use the SCOLL component, we often need to obtain the height of some elements in the page to calculate the total height of the scolL sliding content, which is suitable for different mobile phones. The createSelectorQuery method is usually used
  • Wechat may use this method to obtain the height of elements and other values:

Taro.createSelectorQuery().select(id).fields({ dataset: true, size: true, scrollOffset: true, properties: ['scrollX', 'scrollY'], computedStyle: ['margin', 'backgroundColor', 'width', 'height'] }, function (res) { response(res) }).exec()

  • Pay treasure according to the description of its official document, use the following way

my.createSelectorQuery().select(id).boundingClientRect().exec((ret) => { response(ret) })

  1. Both swiper component style problem, when I’m doing compatible found in WeChat applet shown in normal slider, dislocation will appear in the alipay, spacing disappear and a series of style, style of careful screening, found wide thought up every item, there is no problem, but is the location of the slip later will offset center. The following is the analysis of the problems in my project:
  • When styling swiperItem, set a fixed width value, for examplewidth: 300px;, so the container width of the mobile phone in Alipay is100%Larger than each item300pxWidth, but in alipay small program each across the slider width is in accordance with the width of the container, that is100%As a result, the width of each swipe is too large. As a result, the more swipes, the larger the offset of item is. The solution is to create a nested swiperItem<View></View>, put the custom width and height here.

  1. There is another problem, which is richText’s problem. Alipay and wechat are different. Alipay must be the array type of Nodes, while wechat can be both numbers and strings, which will not be noticed when developing wechat applets. This will cause all rich text content to be blank after being compiled into alipay applets. Here attach a website solution: opendocs.alipay.com/mini/compon…

  2. The last point is the problem of global style. After my project was compiled into alipay small program, there would be a style conflict with the same name in different files. This should be because the style module of the original project was not properly handled, resulting in the global style conflict.

Finished!