微信小程序 tips

不要问我为啥一会儿iOS、一会儿RN、一会儿小程序，我就是一颗螺丝钉，哪里需要往哪里钉。

踩坑tips记录：
1、顶部固定的下拉刷新，类似于下图美团。刚开始用的scroll-view，小程序scroll-view不带下拉刷新，只有Page自带的滚动有下拉刷新，想了好久都没想通怎么搞。某天突然开窍。。。顶部就用position:fixed固定布局。下面用Page滚动就可以了

美团首页刷新.jpeg

2、地图组件、canvas、input、textarea、video等都是原生层级最高的组建，有时会阻挡其他控件，尤其是自定义了弹窗，被挡的严严实实。建议弹窗弹出时隐藏，弹窗消失时再显示出来。

3、小程序目前不支持保存View成图片的功能，想要保存图片只能画canvas再转图片。。。麻烦。。。小技巧，把写死数据不变的东西先采取截图的手段保存下来（尤其大段文字，canvas画的话换行处理能把你换吐血），然后在canvas上以图片的形式画上去，然后只需要再把数据会变动的东西画上去就好了

4、input组件的动态绑定value时，不要用bindinput设置value值，而是用bindblur

5、自定义弹窗时，背景加上catchtouchmove绑定一个空函数来防止滚动穿透

6、获取 wx.getUserInfo 接口后续将不再出现授权弹窗，请注意升级，没有权限时要显示一个button，来让用户授权

//js
WxHelper.getUserInfo()
         .then(({ nickName, avatarUrl }) => {
           this.setData({
             nickName: nickName
           });
         })
         .catch(res => {
           // 用户未授权，显示授权按钮
         });

//wxss
授权

7、wxml里如果有很多状态需要判断，可以创建一个wxs文件，类js语法来处理，在wxml里只需要引入就可以使用了，具体看文档。注意，语法类js但不是完全相同。比如let不支持，要用var，而且写错了console不会报错，而是页面数据加载不出来。。。当时我找了好久才发现是这个问题
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/

8、图标改填充色
方法一：使用字体图标
方法二：图标必须白底黑图

...
background: url('data:image/png;base64,xxxxxxxxx') center center no-repeat, linear-gradient(#2fcc85, #2fcc85);
background-blend-mode: lighten;
...

9、页面反向传值(页面A跳转页面B，页面B返回页面A时把值传给 A)
方法一：值保存在globalData里
方法二：getCurrentPages 获取当前页面栈，直接操作页面A设置数据

// B页面需要回传值时
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];  // 获取A页面
prevPage.setData({
  invoiceItem: newInvoiceItem
});

10、小程序支持字体图标
https://blog.csdn.net/nongweiyilady/article/details/74244362