【小程序】开发及兼容问题汇总(欢迎补充)

1. 框架问题

组件中使用setData等api报错

在多层组件嵌套中，有些异步操作时页面已经销毁，此时组件执行相关代码就会报错。因此，在深层组件中，最好对一些操作尤其是异步操作，先判断this.$page是否存在。

修改导航栏文字颜色

导航栏文字颜色不可直接设置，但是可以通过my.setNavigationBar设置背景色，颜色会根据背景色是深色还是浅色自动控制。即使导航栏设置为透明，依然可以设置背景色来控制右侧收藏和退出按钮的颜色。

隐藏页面标题

可以通过my.setNavigationBar将页面标题设置为空来隐藏，同时设置页面背景色可改变文字和右侧组件颜色（反色黑或白）。但是实际发现标题为空在ios不生效，会显示小程序标题。

解决办法：设置为’ ‘。有个空格就不会判空了。

 my.setNavigationBar({
  title: ' ',
  backgroundColor: '#000',
  borderBottomColor: '#000',
})

组件createSelectorQuery查找class定位

当一个组件在页面中多次调用甚至嵌套调用时，支付宝小程序的这个query对象并没有微信小程序的in方法来传递接收组件对象的this。要确保只在小程序内部查找，可以用到小程序的组件id。没有组件都有一个$id属性，将这个属性绑定到data上，放到组件的根元素class上，就可以通过这个$id来查找。

createIntersectionObserver方法判断监听方向

通过createIntersectionObserver方法实现懒加载、吸顶等监听，相比onscroll性能更优。但是监听时，如何判断是顶部触发还是底部触发，可以通过比较返回的boundingClientRect和relativeRect来判断。

if (my.canIUse('createIntersectionObserver')) {
  this.observer = my.createIntersectionObserver()
  this.observer
    .relativeToViewport({ top: 100 })
    .observe(`.page-module-group-box-wrapper-${self.$id} .group-box-tabs-wrapper`, (res) => {
      if (res.boundingClientRect.top < res.relativeRect.top) {
        // 顶部
        if (res.intersectionRatio > 0) {
          this.mySetData({
            tabsFixed: false
          })
        } else {
          this.mySetData({
            tabsFixed: true
          })
        }
      } else {
        this.mySetData({
          tabsFixed: false
        })
      }
    })
}

页面渲染报错 worker render component is not sync

在开发过程中，遇到一个自定义组件渲染报错的问题。一个swiper组件，内部for循环slot嵌套渲染swiper-item，内部包含一个自定义组件，报这个错误，注释掉这个自定义组件就不报错。swiper的数据来自接口请求。

官方的回答是可能有这几项原因：

1、排查代码中是否用到了 sync 语法。

2、检查有没有启用 component2 编译。

3、代码中是不是直接修改了 this.data 里的属性，如有请使用setData来修改。

4、IDE左下角【设置】–【更新】，检查更新升级IDE版本到最新版本。

5、建议真机调试/预览上运行调试。

这个自定义组件中没有用到sync，也没有js操作。另外IDE有启用component2。更新IDE及真机都还是报错。

最后排查原因是axml中一个对象为null时取值判断出错。

2. 机型兼容问题

机型设备信息统计

支付宝小程序getSystemInfo:

机型	brand	model	isIphoneXSeries	pixelRatio	platform	statusBarHeight	titleBarHeight	screenWidth	screenHeight	windowWidth	windowHeight
iPhone6	iOS	iPhone7,2	false	2	iOS	20	44	375	667	375	618
iPhone6S	iPhone	iPhone8,1	false	2	iOS	20	44	375	375	375	667
iPhone8P	iPhone	iPhone10,2	false	3	iOS	20	44	414	736	414	687
iPhone11
iPhoneX
iPhoneXR	iPhone	iPhone11,8	true	2	iOS	44	44	414	896	414	813

小米6	Xiaomi	Xiaomi MI 6		3	Android	24	48	1080	1920	360	640
小米MIX2S	Xiaomi	Xiaomo MIX 2S		2.75	Android	27.636364	48	1080	2030	393	738
小米10	Xiaomi	Xiaomi Mi 10		2.75	Android	32.727272	48	1080	2120	393	799
三星note10+
华为Nova2s	HUAWEI	HUAWEI HWI-AL00		3	Android	24	48	1080	2160	360	668

微信小程序systenInfo:

机型	brand	model	pixelRatio	devicePixelRatio	platform	statusBarHeight	screenTop	screenWidth	screenHeight	windowWidth	windowHeight
iPhone6
iPhone11
iPhoneX
iPhoneXR

小米6
小米MIX2S
小米10
三星note10+	samsung	SM-N9760	3.5	3.5	android	33	78	412	869	412	792

iPhone8P机型下3D翻转，rotateY(180deg)不显示。

解决办法：写了个定时器，在动画结束重新渲染了一个正面的图片，隐藏原先的翻转元素。

iphoneX机型兼容留海

–机型	–model
iphoneX	iPhone X
iPhoneXR	iPhone11,8
其他iphoneX机型	unknown

// 检查机型
const system = my.getSystemInfoSync()
const model = system.model.toLowerCase()
let ipx = false
if (system.isIphoneXSeries || model.indexOf('iphone x') > -1 || model.indexOf('unknown') > -1 || model.indexOf('iphone11') > -1) {
ipx = true
}