小程序实例回顾分析--异常处理

异常处理归类

  • 1.小程序授权的异常处理
  • 2.前后端数据交互的异常处理
  • 3.用户token过期的异常处理
  • 4.小程序调用原生方法失败的异常处理
  • 5.多次点击的异常

一 小程序授权的异常处理

现在基本上所有小程序都会要求获取授权,尤其是获取用户openid,否则小程序跟网页的区别会变得很小。但是获取用户授权,就有用户拒绝的时候。这里小程序提供了一个打开用户授权的接口。

这时候如果判断用户授权失败,则需要进入到一个页面,提醒用户去打开权限。这样才是对用户友好的一种操作。因为用户很多时候,并不知道在哪去修改已经设置过的权限。

设置界面只会出现小程序已经向用户请求过的。经过测试,这句话的意思,可以理解为,只有客户端调起过改授权,在设置界面才会有。不能说进入小程序,并没有调起过获取用户定位 ,直接就能进入这个界面设置。我的理解是,很多权限是需要用户主动点击按钮才会调起的,所以这里为了避免冲突,做了这样的限制。

    <button class="btn" open-type="openSetting" bindopensetting="toSet">打开设置页</button>

    wx.getSetting({
        success: (res) => {
            if (res.authSetting['scope.userLocation']) {
                wx.reLaunch({
                    url:`/pages/${this.data.page}/${this.data.page}?from=settings`
                })
            }
        },

    })

二 前后端数据交互的异常处理

这里的异常处理包括两个部分,请求后端接口时网络异常和请求后端接口时接口返回参数错误等信息。

  • 后端接口时网络异常

    这里,微信的wx.request提供了请求失败的回调,所以直接用wx.showToast报的网络错误。最开始是在这里reject返回错误信息,然后在前端catch打印出报错信息。后来我们认为, 网络错误的报错信息跟后台返回的报错信息因该区分开来。首先网络错误的报错信息内容太长,首先是用户看不懂,其次这一堆返回数据在用户开来,只要知道是网络错误就可以了。所以这里做了区别处理。

                wx.request({
                  url: url,
                  method: 'POST',
                  data: data,
                  header: {
                      'Content-Type': 'application/json'
                  },
                  success: function (res) {
                  },
                  fail: function (res) {
                      console.log('请求返回数据', res)
                      wx.showToast({
                        title: '网络错误',
                        image: '../../images/icons/ic_error.png',
                        duration: 2000
                      })
    
                    // reject('');
                  }
            
  • 接口返回参数错误等信息

    这里肯定是预先跟服务端商定好状态码,如果不是正常交互状态的话,则在前端通过catch提示出返回的错误信息。

    前端提示错误信息,我们用的是封装了一个弹出黑透文字的组件。

                  if (resData.err_code === STATE_CODE.ERROR_OK) {
                      resolve(resData);
                  } else {
                      let errMsg = resData.err_msg || '请求错误'
                      wx.hideLoading()
                      reject(errMsg);
                  }
            

三 用户token过期的异常处理

对于用户授权的token,这里是在请求接口部分统一处理的,前后端协商好token不正确和token过期的状态码,如果返回对应状态码,则直接跳到登录页面重新获取token

注意,这里就要用reLaunch而不是navigateTo了。

     if (resData.err_code  === STATE_CODE.RE_LOGIN){
          wx.reLaunch({
              url:'/pages/Loading/Loading'
          })
          return
      }

四 小程序调用原生方法失败的异常处理

在小程序调用原生方法的时候,如地图中的获取中心点位置,同样存在获取失败的时候,微信的方法中是提供了fail的回调的。这里,一定要在fail回调中设置好对应的提示,提示出哪里出了问题。

在某些必须得到的数据部分,fail的时候,还要重新获取一次。

五 多次点击的异常

小程序中,点击请求接口的按钮,在开发工具上的wx.showLoading弹出的框会屏蔽掉重复对按钮的点击,但是在真机中并不会。真时候就要控制好对异常操作对处理,针对性对屏蔽掉重复点击。

随机浏览