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条的解决方法，欢迎留言分享链接。