【小程序】Taro多端小程序问题总结

Z时代
2024-01-10
分类：技术分享

正文开始

百度小程序 createSelectorQuery 返回值为空
- 在论坛看到2019.1已有相关反馈，至 2020.06.28 未修复

头条小程序不支持 nextTick
- uni-app社区有同样的反馈 https://github.com/dcloudio/u...
- 至 2020.06.28 未修复
- 解决方案
  - 理解需要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  */

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

【小程序】Taro多端小程序问题总结

快应用真机调试报错：process is not defined
- 该问题未解决

快应用报错：只能有一个template
- 此项等于不支持函数返回jsx

关于微信小程序朋友圈分享
- 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