• 小程序异步获取openid解决方案


    相信很多朋友在开发小程序的时候都会遇到小程序启动后,index页面加载成功之后才获取到openid,导致一些index页面的post请求无法正常通讯,我这几天也在想这个问题,并使用了一些解决方案:
    第一种方案:引导页 + promise (方案来源于网络)
    1、app.js中通过promise封装一个异步获取openid的方法。
    2、新建load引导页,并在app.json中设置该页面指定。
    3、load.js 的onload钩子中,设置promise成功时,页面重定向到index。
    4、这样便实现了先获取openid 再携带openid跳转。

    这篇文章在CSDN上被无限转载,用过的朋友都说解决方案很不错,但我发现了弊端。
    如果没有自己做tabbar组件而使用官方tabbar组件的话,load页就不能指定,否则页面会无法加载。
    对于刚接触小程序开发的朋友来说,如果没有vue之类的基础,写一个component未免稍微复杂了一些。

    于是在经过几次尝试之后,我找到了第二种自认为比较不错的结局方案。
    第二种方案:promise + if判断
    1、app.js中的promise不变。
    2、因为index页面加载后,会向服务器发送请求来获取数据,所以我们把这些请求全都放到一个自定义函数中,比如fn()
    3、index.js的onload中,做一个判断,如果localstorage中有openid,则执行this.fn() ,如果没有,就执行promise后,再执行fn()

    相关代码:
    app.js

     getToken() {
        return new Promise((resolve, reject) => {
          // 登录
          wx.login({
            success: res => {
              // 发送 res.code 到后台换取 openId, sessionKey, unionId
              if (res.code) {
                //发送res.code 到后台
                wx.request({
                  url: this.globalApi.checkUser,
                  method: 'POST',
                  data: {
                    code: res.code
                  },
                  success(res) {
                    //成功返回数据后,将token值存储到localStorage中
                    wx.setStorage({
                      key: 'yerlLocalToken',
                      data: res.data.token
                    });
                    wx.setStorage({
                      key: 'yerlUserOpenid',
                      data: res.data.openid,
                    })
                    var resArg = res.data.token;
                    resolve(resArg)
                  },
                  fail() {
                    reject();
                  }
                })
              }
            }
          })
        })
      }

    index.js

    onLoad() {
        var that = this;
        if (!wx.getStorageSync('yerlLocalToken') || wx.getStorageSync('yerlUserOpenid')){
          app.getToken().then((resArg) => {
            that.indexPage();
          })
        }else{
          that.indexPage();
        }
        //获取banner图片
      },indexPage(){
        var that = this;
        wx.request({
          url: app.globalApi.getIndexBanners,
          method: 'POST',
          data: {
            token: wx.getStorageSync('yerlLocalToken'),
            openid: wx.getStorageSync('yerlUserOpenid')
          },
          success(res) {
            //任何情况下,只要返回的数据不包含content字段,则显示默认占位图片
            if (!res.data.content || res.data.status == 'error') {
              that.setData({
                bnrUrls: ['https://lg-rqwhkn0q-1255357964.cos.ap-shanghai.myqcloud.com/indexBannerError.jpg']
              })
            } else {
              //将返回的图片列表赋值给bnrUrls
              that.setData({
                bnrUrls: res.data.content
              })
            };
            //如果返回值中包含token,就重设token
            if (res.data.token) {
              wx.setStorage({
                key: 'yerlLocalToken',
                data: res.data.token
              });
            }
          }
        });
      }
  • 相关阅读:
    mp4的视频打开可以播放在页面上无法打开
    滚动到特定位置菜单固定的效果
    第一次作业
    第一次上机作业
    第一次作业
    第二次作业
    第一次练习作业
    第一次作业
    第三周作业
    第一次JAVA上机练习
  • 原文地址:https://www.cnblogs.com/panziwen/p/15043953.html
Copyright © 2020-2023  润新知