微信小程序避坑总结

1. http开头的微信头像生成海报报错

http开头的头像链接，生成海报时报错

原因：小程序白名单中，只允许添加https协议的域名，而有些微信头像是http的，所以会通不过校验导致报错

解决：用正则把http替换成https

2. 单个页面全局变量不被销毁

在Page以外定义的变量，并不会随页面卸载而销毁。当重新进入这个页面时，这个值是被改动过的，而没有重新初始化，代码：

let count = 0
Page({
    onLoad() {
        console.log(count)	// 第一次进入页面0，第二次进入页面1，并没有被重新初始化
        count++
    }
})

所以就不能在Page以外定义变量了

解决办法：建议写在data中或与data平级

3. 定义闭包形式的函数时，该函数不会销毁

通过闭包定义函数时，该函数在页面卸载时不被销毁，导致闭包中变量不被重置，代码：

Page({
    // 分页获取列表
    getList: (function() {
        // 闭包中的变量
        let count = 0
        return function() {
            console.log(count)
            count++
        }
    }()),
})

在下一次进入页面时，count并不是0，也就是，当前函数在页面卸载时没有被销毁，怀疑和上一个是同样的问题，真实原因还不是很清楚。

解决办法：只能写成正常的函数，然后把count写到this.count或者this.data.count中，如有其他好的方案欢迎赐教

4. open-data头像圆角不生效

加一个overflow: hidden即可

5. wx.getUserInfo不自动弹授权框

由于微信官方对api做变更，调用wx.getUserInfo时不再弹出授权框，需要用户自己点击open-type为getUserInfo的button才行，详见官方公告：https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01

<button open-type="getUserInfo">点我有惊喜</button>

6. animate动画 第一次不执行动画效果的问题

原因是.wxss中没有设置相应的属性。例如动画改变left，由于css没有初始的left，也就没有动画这一说，加上动画初始样式就好了。

7. ios真机不支持Promise.finally

安卓真机和模拟器均支持，只有ios真机不支持

8. ios真机不支持本地图片做背景图

background-image不支持本地图片，安卓和模拟器均支持，ios真机不支持

9. 云存储中的图片不能用作背景图

在<image>标签的src属性中可以识别，css中background-image: url('')中不能被识别