自建网站：小程序登录

做小程序最必不可少也比较复杂的就是授权登录啥的了。不同的项目会有不同的写法 这里把我之前的一种写法分享一下 授权和登录是分开的 授权之后才能登录(还有授权登录一体的 这里没有写)

当你进入小程序时 就要判断你有没有授权 所以要再app.js进行操作。这里我们通过小程序提供的wx.getSetting来进行判断有没有授权

onLaunch: function () {
 // 判断用户有没有授权
 wx.getSetting({
 success: res {
 console.log(res.authSetting[ scope.userInfo ])
 if (res.authSetting[ scope.userInfo ]) {//如果已经有了用户信息证明用户已经授权过
 // 已经授权 可以直接调用 getUserInfo 获取头像昵称 不会弹框
 console.log( 授权啦 )
 }else{
 // 没有授权,就跳到是否授权的页面
 console.log( 没有授权 )
 wx.navigateTo({
 url: /packageA/pages/power/power ,

由上一步 我们进入小程序时就会判断有没有授权。如果授权了直接进入首页 如果没有授权就会强制跳到授权页面 让用户进行授权

当点击去授权时 我们就要用到小程序的button组件提供的open-tupe属性来进行授权 如下

这里是wxml代码 主要通过open-type属性 点击 去授权 就会有一个小程序提供的弹框

 view class container 
 image src ../../../img/img.png /image 
 text 请先授权哦 /text 
 button size mini bindgetuserinfo ok type primary open-type getUserInfo 去授权 /button 
 button size mini catchtap no 先不授权 /button 
 /view 

当用户点击允许时会授权并得到用户信息

// 如果同意授权之后
//这里是bindgetuserinfo属性触发的方法 可以直接获取到用户信息
 ok(e){
 console.log(e,e.detail.userInfo)//用户信息
 if(e.detail.userInfo){
 //如果拿到了用户信息 就将信息存到本地 在“我的”页面备用
 wx.setStorage({
 data: e.detail.userInfo,
 key: userInfo ,
 app.globalData.userInfo e.detail.userInfo
 wx.switchTab({//跳转到首页
 url: ../../../pages/index/index ,
 no(e){//若点击暂不授权也会进入首页但是处于没有授权状态很多页面有没有数据和效果
 wx.switchTab({
 url: ../../../pages/index/index ,

授权完毕显然就要判断是否登录了 我的登录写在了“我的”页面。当用户没有登陆时拿到的数据也是不全的

ps:用户授权后才能拿到code码 通过code码才能登录 登陆后才能拿到token!!

此时我们点击登录 会通过wx.login触发登录事件 登录成功后才能得到token

// 登录事件
hmwLogin(){
 wx.login({//小程序提供的登录事件
 success:async (res) {
 //授权成功后才能得到code
 if(res.code){//如果有code
 //我们就传入code码 请求登录
 let {data} await request( https://api.it120.cc/huangmengwen/user/wxapp/login ,{code:res.code}, POST )
 if(data.code 0){//如果登陆成功
 // 保存token和状态
 wx.setStorage({
 data: data.data.token,
 key: token ,
 //将页面样式改成登录后的效果
 this.setData({
 flag:true
 }else{
 Notify( 登陆失败 )

当登录成功 保存好token之后 页面会转变为登录之后的状态 一套流程就简单的走完啦

这里有别的大佬总结的流程图 差不多就是这么走的啦 你也可以酌情改变一下

这里只是我的一些浅薄的分享