微信小程序遇坑总结 - 1导语：最近在做公司的AI英语测评小程序项目，算是本人第一次独立完成一个小程序，也遇到也不少坑，

导语：最近在做公司的AI英语测评小程序项目，算是本人第一次独立完成一个小程序，也遇到也不少坑，在这里总结记录一下遇到的问题。

1.登录和授权

用 wx.login 获取 code。
用 code 请求服务器获取openid和sessionKey。
用 button open-type="getPhoneNumber" 获取 encryptedData 和 iv。
通过 encryptedData,iv,sessionKey请求服务器解密获取用户手机号。
用手机号登录到服务器获取token等用户信息保存到本地。

这里有几个注意的点：

sessionKey具有时效性，具体时间官方也没给出，可通过wx.checkSession() 判断sessionKey是否过期。
使用 wx.login 之后，旧的sessionKey会立刻失效，此时需要重新获取sessionKey。

授权

在使用wx.authorize()进行麦克风等功能授权时，小程序在得到授权结果之后，在调用wx.authorize()不会再弹出授权提示，即使拒绝授权在重新调用此API也不会弹出授权提示，此时可使用wx.openSetting用到用户开启授权。

插件和组件使用总结

ec-canvas

图表插件 github.com/ecomfe/echa…

ec-canvas 是基于echart的小程序图表组件，其配置也跟echart时一致的。使用方法也很简单，只需要配置就行了。

echart文档 echarts.apache.org/zh/index.ht…

painter 绘制canvas并生成图片的组件。

使用此插件的目的是为了生成分享海报，绘制的时候尽量绘制的大一点，避免生成的图片模糊，也可受用widthPixels来设置生成图片宽度。使用painter遇到的巨坑就是在使用了use2D=true之后，真机绘制出来的图片是不完整的，但是在模拟器上是长成的，是什么原因折腾了好几天也没研究出来，最终只能不使用use2D，不使用use2D绘制出来的图会相对模糊，只需要将图片绘制大一点即可。

API的使用和其他问题

关于小程序识别二维码

使用 image 的 show-menu-by-longpress 只能识别小程序码
使用 wx.previewImage 能识别小程序码，微信名片
使用 web-view 可以识别普通二维码，小程序码，微信名片。但是如果普通二维码的链接没有在业务域名中配置，也无法识别访问

开发经验

业务场景中经常需要使用到 "navigationStyle": "custom"的情况，但是会导致排版被状态栏遮挡。可使用wx.getSystemInfoSync()获取状态栏高度和设备安全宽高safeArea来做容器统一宽高处理。代码如下。

 // 获取系统状态栏信息
let e = wx.getSystemInfoSync()
this.globalData.safeAreaStyle = `position:relative;top:${e.statusBarHeight + 50}px;height:${e.safeArea.height - 50}px;`
data(){
    safeAreaStyle:getApp().globalData.safeAreaStyle
}

<view class="demo-level" style="{{safeAreaStyle}}"></view>

不需要在页面上使用的属性，可以不定义的data里，方便读写。因为要更新试图，所以需要使用setData去赋值data里的属性。可以将不需要在页面中使用的属性定义在外面，使用this.xxx来读写，不需要使用setData。