2021-06-23

下面展示一些 内联代码片。

下面我是先用getUserProfile()获取了用户的昵称和头像,然后使用wx.login()获取用户的code，发送给后台,后台返给我oppenid，session_key

 //获取微信头像昵称以及code
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    var that=this
    wx.getUserProfile({
      desc: '用于完善用户资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (e) => {
        // console.log(e.userInfo)
        wx.login({
          success: (ress) => { //此处使用ress,与下面请求后台登录接口返回值res区分开
            if (ress.errMsg == 'login:ok') {
              this.setData({
                code:ress.code,//wx.login()获取到的code
                userInfo:e.userInfo //此处是用getUsetProfile()获取的用户信息
              })
              wx.setStorageSync('code', ress.code) //本地存储code
              wx.showLoading({
                title: '加载中',
              })
              //此处开始对接后台接口（注：此处的goLogin是公共api文件封装过的，如果大家没有封装就从wx.request....来写）
              app.globalData.api.goLogin('', 'code=' + res.code).then(res => {
              wx.hideLoading()
             // console.log(res.data)
              if (res.data.code == 1) {//此处用来判断用户是否进行手机号授权  1已经授权，跳转首页  2未授权开始进行赋值 ，调起授权弹窗
                wx.setStorageSync('user_id', res.data.data.user_id)
                wx.navigateTo({
                  url: '/pages/index/index',
                })
              } else if (res.data.code == 2) {
                that.setData({
                  show: false, //授权手机号按钮hidden==false 打开
                  openid: res.data.data.openid,
                  session_key: res.data.data.session_key,
                  code: res.code,
                })
              }
            }, err => {
              console.log(err)
            })

                  }
                },
                fail: err => {
                  wx.showToast({
                    title: "授权失败请重试",
                    icon: 'none',
                    duration: 2000
                  })
                }
              })
            }
          },
        })
      },
      fail:(res)=>{
        wx.showToast({
           title: "为了您更好的体验,请先同意授权",
           icon: 'none',
           duration: 2000
         })
     }
    })
  },

获取用户手机号

  getPhoneNumber(e) {
    //检测session_key是否过期
    wx.checkSession({
      success() {
      },
      fail() {
        // session_key 已经失效，需要重新执行登录流程
        wx.bindGetUserInfo()//重新登录
      }
    })
    var that = this
    var openid = that.data.openid
    var session_key = that.data.session_key
    var nickname = that.data.nickname
    var headimgurl = that.data.headimgurl
    var encryptedData=encodeURIComponent(e.detail.encryptedData) //encodeURIComponent() 函数可把字符串作为 URI 组件进行编码,此处我是如果不编码传给后台会自动吧字符串之间的空格加上横杠，后台就会报错
    this.setData({
      show: true
    })
    if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
      wx.showModal({
        title: '提示',
        showCancel: false,
        content: '未授权',
        success: function (res) { }
      })
    } else {
      app.globalData.api.bindPhone('', 'encryptedData=' + encryptedData + '&iv=' + e.detail.iv + '&openid=' + openid +
          '&nickname=' + nickname + '&headimgurl=' + headimgurl).then(res => {
          console.log(res)
          if (res.data.code == 1) {
            wx.showToast({
              title: res.data.msg,
            })
            wx.setStorageSync('user_id', res.data.data.user_id)
            setTimeout(function () {
              wx.navigateTo({
                url: '/pages/index/index',
              })
            }, 1500)
          } else {
            wx.showToast({
              title: res.data.msg,
              icon: 'none'
            })
          }
        }, err => {
          console.log(err)
        })
    }

  },';

需要特别说明一下，getPhoneNumber(),即获取用户手机号是需要单独的按钮来进行的，下面是wxml里面的关键代码

<!--获取手机号-->
  <button class="popup_btn" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">绑定手机号</button>