Background: A project hopes to launch several small programs. I want to find someone to practice with the React project, so I choose Taro

In the early stage, the wechat mini program was used as the benchmark to catch up with the progress, and then the compatible processing of each end was carried out

At present, it has launched wechat, QQ, Baidu, Toutiao, Alipay

Taro version: 2.2.6

2020/07/13 Upgraded to 2.2.10

The text start

  1. CreateSelectorQuery returns a null value
    • I saw related feedback in the forum in 2019.1, and it has not been fixed until 2020.06.28
  2. Headlines applet does not support nextTick
    • Uni-app community has the same feedback github.com/dcloudio/un…
    • Not repaired by 2020.06.28
    • The solution
      • Understand the scenarios that require nextTick
      • MVVM, manipulation data and JS asynchronous/execution cycle related issues
      • Synchronous processing with await
  3. Alipay applet does not support custom header /navigation /navigationStyle, need to do compatibility processing
    • Ap/SDKVersion: 1.24.0
    • Lyra Version: 2.17.5
    • 2020.7.3
  4. Taro compilation of alipay small program round broadcast map first map, the rest of the blank
    • After checking, swiper-item needs to be removedposition: relative;style
    • Wechat, Baidu, toutiao no abnormal
  5. Alipay swiper-item does not support binding events. It is recommended to nest views
    • You can do 4/5 of them together
    • Opendocs.alipay.com/mini/compon…
  6. Alipay mini program Swiper indicator/DOT style chaos, all indicator points are in active color
    • Juejin. Cn/post / 684490… (This old man is really wordy)
    • Style problem directly see the openclub.alipay.com/club/histor…
    • Solution to the active status problem:
      1. Turn off the pointer and do not display it
      2. IndicatorActiveColor not set, reason unknown
    • Still is wechat, QQ, Baidu, headlines did not see abnormal
<Swiper circular autoplay // You can choose not to show indicatorDots in alipay mini program // indicatorDots={process.env.taro_env! = ='alipay'} indicatorDots // indicatorActiveColor={process.env.taro_env! = ='alipay' ? '#2877ff' : ' '}
    >
    {banners.map((banner, index) => (
      <SwiperItem className="swiper-item" key={banner.id}>
        ...
      </SwiperItem>
    ))}
</Swiper>
Copy the code
// 支付宝的样式
/*  #ifdef alipay */.a-swiper-dot { width: 12px; height: 12px; border-radius: 50%; // background: rgba(255, 255, 255, 0.5); } .a-swiper-dot-active { width: 12px; height: 12px; border-radius: 50%; } / *#endif */
Copy the code

We were going to copy some small program’s scheme to change, that is, dot and dot-active are differentiated by different lengths, regardless of color. We are all ready to communicate with the product and UI after completion. Then we tested this one, and the difference between each end is smaller and easier to accept

  1. Alipay small program rich-text display abnormal (blank)
    • Blog.csdn.net/objectking/…
    • The official documentationOpendocs.alipay.com/mini/compon…
      • This differs from array/ String supported by the wechat rich-Text Nodes attribute
      • The Alipay rich-Text Nodes attribute only supports array, which requires conversion
      • You need to use mini-html-parser2 for formatting
      • Note: Do not appear self-closing tags, which will lead to incomplete conversion content
parse(str, (err, nodes) => {    
    if(! err) { item.nodes = nodes } })Copy the code
  1. Quick apps do not support CSS attributes such as VH/VW, RGBA, HLS, and Position
    • Starting at 1060, position will support three property values: relative, Absolute, and fixed, and the default is relative
  2. Declare the interface used in the project code in the manifest.json file:
    • system.fetch,
    • system.request,
    • system.storage,
    • system.prompt,
    • system.barcode,
    • system.vibrator,
    • system.clipboard,
    • system.sensor,
    • system.geolocation,
    • system.share,
    • system.notifolocation,
    • system.share,
    • system.notification,
    • system.device,
    • system.webview,
    • system.audio,
    • system.record,
    • system.contact,
    • system.sms
  3. componentdivAttributes not supporteditemid, the supported properties are
    • enablevideofullscreencontainer,
    • id,
    • style,
    • class,
    • disabled,
    • if,
    • elif,
    • else,
    • for,
    • tid,
    • show,
    • aria-label,
    • aria-unfocusable,
    • forcedark,
    • focusable,
    • vtags,
    • vindex

9. 10. This is just a record for backup, without practical significance

Vscode extension fast application content is these, the installation amount with small program is a little far

  1. Fast application real machine debugging error:process is not defined
    • The problem remains unresolved
  2. Quick application error: there can only be one template
    • Function return JSX is not supported

There are some problems with the taro Build app, the work is currently suspended (2020.07.15)

  1. About wechat small program circle of friends to share
    • Taro version 2.2.10
    • The current version of Taro does not support this feature
    • Wechat developer tools base debugging library 2.11.3
    • Android version grayscale test
    • Wechat related documents
    • How to add the sharing function to the circle of friends in taro
      1. Add the onShareTimeline method under the route/page you want to share
      onShareTimeline() {
    return {
      title: "xxxx",
      // query: "id=123",
      // imageUrl: "xxxx.com/xx"// Custom image path, can be a local file or network image. Support PNG and JPG, display picture aspect ratio is 1:1. Applet Logo}} is used by default.Copy the code
      1. After packaging, search for variables in the vendors. Js file under the dist directorypageExtraFns
      2. Add to an array"onShareTimeline"
      3. In the wechat developer tool test, use the basic debugging library 2.11.3
      4. This method comes from Taro GitHub Issues #6945

This is the end of hydrology, if anyone has 11 or 12 solutions, please share the link in the comments.