微信小程序-登录获取信息

实现效果：

image.png

image.png

image.png

流程：

首先，微信后台发送 wx.login 临时登录码code
→ 点击登录 bindgetuserinfo='getuserinfo'
→ 允许登录弹窗
→ 允许则获取用户信息(拒绝则直接关闭弹窗) wx.getSetting
→ 如果此时 token 为空则请求登录接口 wx.request (传入个人微信id、秘钥secret、临时登录码code、用户信息userInfo)
→如果返回了 token值 则用 wx.setStorageSync 储存起来并且显示登录成功

增加交互体检：

• wx.showLoading ({ title: '登录中...', mark:true })
• wx.hideLoading ( );
• wx.showToast ({ title:"登陆成功", icon:"success" })
• wx.showModal ({ title:"登录失败", content:"请重新登录！" })

实现代码：

login.wxml :

<button 
  open-type='getUserInfo'
  bindgetuserinfo='getuserinfo'
  type='primary'>登录</button>

login.js :

const app = getApp();//引入app里面的东西
Page({
  data: {
    loginUrl:'auth/loginByWeixin',
    baseUrl: 'http://nideshop2.bluej.cn/api/'
  },
  getuserinfo(res){//--- 弹出授权信息，并且获取
    var that = this;
    console.log(111,res)
    wx.getSetting({//--- 判断是否成功获取到用户信息
      success(result){
        console.log("同意/拒绝",result.authSetting["scope.userInfo"])
        if (result.authSetting["scope.userInfo"] && !wx.getStorageSync("token")){
          wx.showLoading({
            title: '登录中...',
            mark:true
          })
          wx.request({//--- 请求登录接口
            url: that.data.baseUrl+that.data.loginUrl,
            method: "post",
            data:{
              appId: "wx3ca1fbfbb08c0099",//微信Id（个人的）
              secret:"32f3a20f46f9bd343c5c878403621370",//秘钥（个人的）
              code: app.globalData.code,// app.js 里拿到的
              userInfo: res.detail
            },
            success(r){
              wx.hideLoading();
              console.log(r.data.data)
              console.log(typeof (r.data.data))
              if(typeof(r.data.data)!= "undefined"){//---typeof 可以运行判断用于不存在的东西 *** 判断token存在不
                wx.setStorageSync("token",r.data.data.token);//---存数据到缓存 查看控制台Storage
                wx.showToast({
                  title:"登陆成功",
                  icon:"success"
                })
              }else{
                wx.showModal({
                  title:"登录失败",
                  content:"请重新登录！"
                })
              }
              console.log("数据返回",r)
            }
          })
        }
        console.log(result)
      }
    })
  }
})

app.js

App({
  onLaunch: function () {
    // --- 获取临时登录码 code
    var that = this;
    wx.login({
      success(res){
        console.log(res)
        that.globalData.code = res.code;
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null //---初始值为 null
  }
})

注意：

测试的时候，要清除全部缓存，再编译后，查看效果，否则 token 值会保留在微信开发软件中，测试效果不准确。