小程序踩坑

主要内容

记录小程序开发中碰到的问题以及解决方案

CSS部分

解决小程序按钮border无法清除问题

小程序按钮 button组件设置border: none;没有效果，需要设置按钮的after 伪类的border为none：

.btn:after {
  border: none;
}

JS部分

解决小程序Promise finally报错

首先可以在小程序的控制台上打印一下Promise.prototype.finally

image.png

undefined，那报错是必然的。

解决方法也是比较简单粗暴，就是在Promise的原型对象上手动写上finally这个方法：

function handlePromiseFinally() {
  // 如果有就不用再自己手动添加了 
  if (!Promise.prototype.finally || typeof Promise.prototype.finally !== 'function') {
    Promise.prototype.finally = function(callback) {
      return this.then(
        value => this.constructor.resolve(callback()).then(() => value),
        reason => this.constructor.resolve(callback()).then(() => {
          throw reason
        })
      )
    }
  }
}

解决小程序不支持async await 问题

小程序默认是支持ES6语法的，但是是不支持ES7中的async await这个开发利器的。要解决这个问题，需要引入一个pollyfill库 regenerator-runtime.js

在需要使用async await 的地方 定义常量 regeneratorRuntime

比如这样即可

import regeneratorRuntime from './utils/runtime.js'

解决小程序按钮授权信息和login得到的code无法匹配的问题

首先这个问题的根源是在获取授权信息时，小程序的登录态还未刷新，但偏偏等到login在获取code的时候就刷新了，这时候授权按钮拿到的info就和login得到的code无法匹配。

而用户什么时候点按钮我们又是不知道的（不确定的），所以，解决方法就是保证code和授权的info必须是一个登录态下的。这一块如果不理解请好好阅读官方文档。

简易版：
在用户点击授权按钮拿到info后，根据登录态有五分钟失效这个特性，先去调用wx.login接口强制刷新登录态和拿到code，然后再去调用wx.getUserInfo接口拿info（由于以及点击授权，此时可调用），即可保证info和code匹配。

商务版：

• 进入授权页面，调用wx.login 获取code并缓存
• 用户点击授权按钮，拿到info，通过wx.checkSession校验code是否失效，若没有失效则用此info与code
• 失效，调用wx.login刷新登录态并覆盖缓存中的code，调用wx.getUserInfo接口获取info
• 问题解决

其他

持续更新。。。