Taro多端小程序問題總結

背景：某個項目但願在多個小程序上線，我的想找個react項目練練手，因此選擇了Taro

前期以微信小程序爲基準趕進度，以後對各端進行兼容處理

目前已上線微信、QQ、百度、頭條、支付寶

taro 版本： 2.2.6

2020/07/13 升級至 2.2.10

正文開始

1. 百度小程序 createSelectorQuery 返回值爲空

   • 在論壇看到2019.1已有相關反饋，至 2020.06.28 未修復

2. 頭條小程序 不支持 nextTick

   • uni-app社區有一樣的反饋 https://github.com/dcloudio/u...
   • 至 2020.06.28 未修復

   • 解決方案

     • 理解須要nextTick的場景
     • mvvm中，操做數據與js異步/執行週期的相關問題
     • 用 await 作同步式處理

3. 支付寶小程序不支持自定義頭部/導航/navigationStyle，須要作兼容處理

   • ap/SDKVersion: 1.24.0
   • Lyra Version: 2.17.5
   • 2020.7.3

4. taro編譯支付寶小程序輪播圖第一張有圖，其他空白

   • 通過排查，須要給 swiper-item 去除 position: relative; 樣式
   • 微信、百度、頭條未見異常

5. 支付寶小程序 swiper-item 不支持綁定事件，建議嵌套 View

   • 能夠4/5一塊兒處理
   • https://opendocs.alipay.com/m...

6. 支付寶小程序 swiper 指示器/dot 樣式亂，各指示點均處於active顏色

   • https://juejin.im/entry/5c8a0... （這老哥是真的囉嗦）
   • 樣式問題直接看這個 https://openclub.alipay.com/c...

   • active狀態問題解決方法:

     1. 把指示點關閉不展現
     2. indicatorActiveColor 不設置，緣由未知
   • 仍然是微信、QQ、百度、頭條未見異常

<Swiper
    circular
    autoplay
    // 能夠選擇在支付寶小程序不展現指示點
    // 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>

// 支付寶的樣式
/*  #ifdef  alipay  */
.a-swiper-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  // background-color: rgba(255, 255, 255, 0.5);
}
.a-swiper-dot-active {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
/*  #endif  */

原本都準備抄某家小程序的方案來改，就是dot、dot-active經過不一樣的長度來區分，不區分顏色，都作好準備在完成後跟產品、UI去溝通了，而後測試到了這一條，各端之間差別更小，更容易接受

1. 支付寶小程序 rich-text 顯示異常（空白）

   • https://blog.csdn.net/objectk...

   • 官方文檔 https://opendocs.alipay.com/m...

     • 與微信 rich-text nodes 屬性支持 array/string 不一樣
     • 支付寶 rich-text nodes 屬性只支持 array,須要轉換處理
     • 須要使用 mini-html-parser2 來轉格式
     • 注意：不要出現自閉合標籤，會致使轉換出來的內容不完整

parse(str, (err, nodes) => {    
    if (!err) {
      item.nodes = nodes
    }
})

1. 快應用不支持vh/vw、rgba、hls、position等css屬性

   • 1060 開始，position 將支持三種屬性值：relative、absolute 和 fixed，而且默認值爲 relative 相關內容

2. 請在manifest.json文件裏聲明項目代碼中用到的接口:

   • 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. 組件 div 不支持屬性 itemid，支持的屬性有

   • enablevideofullscreencontainer,
   • id,
   • style,
   • class,
   • disabled,
   • if,
   • elif,
   • else,
   • for,
   • tid,
   • show,
   • aria-label,
   • aria-unfocusable,
   • forcedark,
   • focusable,
   • vtags,
   • vindex

9 10 此處只是作了個記錄備用,沒有實際意義

vscode拓展裏快應用的內容就這些了，安裝量上跟小程序差的有點遠

1. 快應用真機調試報錯：process is not defined

   • 該問題未解決

2. 快應用報錯：只能有一個template

   • 此項等於不支持函數返回jsx

taro轉快應用有太多的不兼容，目前工做暫停 （2020.07.15）

1. 關於微信小程序朋友圈分享

   • taro version 2.2.10
   • 當前版本的taro還不支持此功能
   • 微信開發者工具 基礎調試庫 2.11.3
   • 安卓版本灰度測試
   • 微信相關文檔

   • 如何在taro中添加分享到朋友圈功能

     1. 在要分享的路由/頁面下添加 onShareTimeline 方法

     onShareTimeline() {
         return {
           title: "xxxx",
           // query: "id=123",
           // imageUrl: "xxxx.com/xx"
           // 自定義圖片路徑，能夠是本地文件或者網絡圖片。支持 PNG 及 JPG，顯示圖片長寬比是 1:1。    默認使用小程序 Logo
         }
     }

     1. 打包後在 dist 目錄下 vendors.js 文件搜索變量 pageExtraFns
     2. 在數組中添加 "onShareTimeline"
     3. 在微信開發者工具測試,使用基礎調試庫 2.11.3
     4. 此方法來自 Taro GitHub issues #6945

水文到此結束，若是誰有11 12條的解決方法，歡迎留言分享連接。