微信小程序非跳转式组件授权登录的方法示例

首先附上官方文档地址和授权流程

官方地址：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

流程图：

大致逻辑：授权 -> 发送code到服务器获取session_key - > 保存在小程序缓存内 -> 调用wx.getUserInfo和session_key获取用户信息 -> 登录成功返回访问token -> 记录登录状态 -> 执行登录成功监听（失败则不监听）

直接上代码，一下均为小程序组件模式有兴趣的可以看下官方文档

创建components（自定义名称）文件夹pages文件夹同级主要放置组件文件

创建 authorize （自定义名称）文件夹 还是一样的创建 对应的authorize.js ，authorize.wxml .authorize.wxss,authorize.json特别注意这里的 authorize.json 文件里面要定义当前页面为组件

{"component": true}

到这里准备工作完成

authorize.js 换成组件的写法，具体参考小程序官方文档，这里展示我定义的

Component({  //组件的对外属性 说的确实很官方，用过vue组件的就很容易理解这点  //父级向子级传值这里就是接收值得地方 properties:{   //名称要和父级绑定的名称相同   //这里主要是控制自动授权弹框是否显示 true=隐藏 false=显示  iShidden:{   type:Boolean,//定义类型   value: true,//定义默认值  },  //是否自动登录 这里主要用于没有授权是否自动弹出授权提示框   //**用在不自动登录页面但是某些操作需要授权登录**  isAuto:{   type: Boolean,   value: true,  }, }, //组件的内部数据，和 properties 一同用于组件的模板渲染 data:{  cloneIner:null }, //组件所在页面的生命周期声明对象 pageLifetimes:{   //页面隐藏   hide:function(){   //关闭页面时销毁定时器   if(this.data.cloneIner) clearInterval(this.data.clearInterval);  },  //页面打开  show:function(){   //打开页面销毁定时器   if (this.data.cloneIner) clearInterval(this.data.clearInterval);  }, }, //组件生命周期函数，在组件实例进入页面节点树时执行 attached(){    }, //组件的方法  methods:{  } }）;

注：以下的方法都需写在 methods 内

第一步：未授权用户判断是否执行授权还是直接进行获取用户信息

//检测登录状态并执行自动登录  setAuthStatus(){   var that = this;   that.setErrorCount();   wx.getSetting({    success(res) {    //这里会检测是否授权，如果授权了会直接调用自动登录     if (!res.authSetting['scope.userInfo']) {      //没有授权不会自动弹出登录框      if (that.data.isAuto === false) return;       //自动弹出授权       that.setData({ iShidden: false });     } else {      //自动登录      that.setData({ iShidden: true });      if (app.globalData.token) {      //这里是授权回调       that.triggerEvent('onLoadFun', app.globalData.token);       that.WatchIsLogin();      } else {       wx.showLoading({ title: '正在登录中' });       //这里是已授权调用wx.getUserInfo       that.getUserInfoBydecryptCode();      }     }    }   })  }