Taro多端小程序问题总结

时间 2020-07-16

标签 taro 多端程序问题总结繁體版

原文原文链接

背景：某个项目但愿在多个小程序上线，我的想找个react项目练练手，因此选择了Taro
前期以微信小程序为基准赶进度，以后对各端进行兼容处理css

目前已上线微信、QQ、百度、头条、支付宝html

taro 版本： 2.2.6node

2020/07/13 升级至 2.2.10react

正文开始git

百度小程序 createSelectorQuery 返回值为空github
- 在论坛看到2019.1已有相关反馈，至 2020.06.28 未修复
头条小程序不支持 nextTickweb
- uni-app社区有一样的反馈 https://github.com/dcloudio/u...
- 至 2020.06.28 未修复
- 解决方案json
  - 理解须要nextTick的场景
  - mvvm中，操做数据与js异步/执行周期的相关问题
  - 用 await 作同步式处理
支付宝小程序不支持自定义头部/导航/navigationStyle，须要作兼容处理小程序
- ap/SDKVersion: 1.24.0
- Lyra Version: 2.17.5
- 2020.7.3
taro编译支付宝小程序轮播图第一张有图，其他空白微信小程序
- 通过排查，须要给 swiper-item 去除 position: relative; 样式
- 微信、百度、头条未见异常
支付宝小程序 swiper-item 不支持绑定事件，建议嵌套 View
- 能够4/5一块儿处理
- https://opendocs.alipay.com/m...
支付宝小程序 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去沟通了，而后测试到了这一条，各端之间差别更小，更容易接受

支付宝小程序 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
    }
})

快应用不支持vh/vw、rgba、hls、position等css属性
- 1060 开始，position 将支持三种属性值：relative、absolute 和 fixed，而且默认值为 relative 相关内容
请在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
组件 div 不支持属性 itemid，支持的属性有
- enablevideofullscreencontainer,
- id,
- style,
- class,
- disabled,
- if,
- elif,
- else,
- for,
- tid,
- show,
- aria-label,
- aria-unfocusable,
- forcedark,
- focusable,
- vtags,
- vindex

9 10 此处只是作了个记录备用,没有实际意义
vscode拓展里快应用的内容就这些了，安装量上跟小程序差的有点远

快应用真机调试报错：process is not defined
- 该问题未解决
快应用报错：只能有一个template
- 此项等于不支持函数返回jsx

taro转快应用有太多的不兼容，目前工做暂停（2020.07.15）

关于微信小程序朋友圈分享
- 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条的解决方法，欢迎留言分享连接。