小程序实战

我正在参加「掘金·启航计划」

使用taro进行三端小程序开发已经一段时间，发现了一些兼容性问题，在此进行记录并标注解决办法，提高开发效率。

地图

1、使用taro开发时，针对 Map 组件的部分配置，如showScale、enableZoom、enableScroll、showCompass，微信使用的是布尔值，支付宝和mpass使用的是数值，但是及时设置布尔值，iPhone手机上，也是可以正常表现，绘制marker，但是部分小米及荣耀手机则不行，

解决方法：添加环境判断，动态赋值

2、绘制 polyline 时，由于微信原生提供了 arrowLine 配置，可以添加箭头，但是支付宝并未提供此属性，需要添加 iconPath ，使用图标绘制

3、polyline及marker 颜色色值需要8位，最后两位为 alpha，即颜色透明度，否则部分机型不能正常绘制

4、支付宝目前没有提供可以直接唤起地图APP（高德、谷歌之类）的api，但是微信提供了 createMapContext 可以通过 openMapApp 方法直接唤起

const context = Taro.createMapContext('myMap');
context.openMapApp({
    ...
    longitude,
    latitude,
    destination: destinationName
})

5、进入地图页，每次需要在constructor中设置一个独一无二的id，地图生成一次后，应该是没有进行清理回收的，会影响到页面渲染

图片

1、小图片在mpass及支付宝会出现图片变形的情况，可以通过设置背景图的形式，表现出来

2、webp在部分机型会有兼容问题，尽量使用png及jpg

CSS属性

1、animation属性，在绘制位置变化动作时，尽量不适用百分比进行动画，在iPhone13上不能正常表现

2、transition属性，在绘制过渡效果时，过渡效果初始状态权重要比结束状态权重低，否则在支付宝可能会失效。比如：

.start {
    ...
    height: 20px;
    transition: all .3s;
}

.end {
  height: 80px;
}

如果通过交互，动态修改高度时，那么初始的权重要低一些

生命周期

1、微信小程序在APP的didShow中可能会出现拿不到app实例的情况，可以放在nextTick中执行

2、如使用taro等框架进行开发时，部分机型会出现不执行componentWillUnmount,需要注意