微信小程序授权登录和账号登录

背景

最近老板让我们做一个微信小程序，他要求我们实现既可以授权登录获取用户信息，又可以选择申请账号注册，登录的一个功能。

---

提示：以下是本篇文章正文内容，下面案例可供类似要求参考

一、点击登录弹出选择登录方式

登录方式弹框自定义

index.wxml（示例）：

<button style="display:{{bot}}" bindtap="tankuang">点击登录</button>

<view class="box" bindtap="zuida" style="display: {{display}};">
  <view class="box-bottom">
  <button style="width:100%" bindtap="sign">账号登录</button>
  <button open-type="getUserInfo" bindgetuserinfo="getPerson" style="width:100%" >微信登录</button>
  <text bindtap="quxiao">取消</text>
</view>

index.js（示例）：

   data: {
    display: "none"
    }
  tankuang: function () {
    var that = this
    that.setData({
      display: "block",
    })
  },
  quxiao: function () {
    var that = this
    that.setData({
      display: "none",
    })
  },

效果图如下（示例）：

---

二、选择账号登录

1.登录页面

如果还没有注册账号，点击去注册，跳转到注册页面。

登录页面效果图如下（示例）：

sign.js（示例）：

 loginForm: function(data) {
    var username = data.detail.value.username; //获取用户名;
    var password = data.detail.value.password; //获取密码;
    wx.request({
      url: '对接自己的登录接口',
      data: {
        name:username,
        password:password,
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res){
    // 根据返回参数判断是否登录成功;
       
      },
    })
  },

2.注册页面

根据自己的要求添加注册信息。

登录页面效果图如下（示例）：

logon.js（示例）：

  urlimg:function(){   //点击打开本地图库并选中图片上传到服务器
      wx.chooseImage({  
        count: 1, // 默认9  
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有  
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
        success: function (res) {  
          console.log(res);
          // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片  
          wx.uploadFile({
          url: '对接自己的上传到服务器的接口',//
          filePath: res.tempFilePaths[0],
          name: 'pic_path',  //文件对应的 key;
          header: {
            'content-type': 'multipart/form-data'
          },
          success: function (res) {
            console.log(res.data) //接口返回网络路径
            }
           })
        }  
      })  
  },

  loginForm: function(data) {
    var username = data.detail.value.username; //获取用户名;
    var usernames = data.detail.value.usernames;//获取昵称;
    var password = data.detail.value.password;//获取密码;
    var phone = data.detail.value.phone;//获取手机号;
    var img=this.data.img;//获取头像的网络地址;
   // console.log(img)
    if(phone=="" || username=='' || password=='' ||usernames==''){   
       //参数的非空验证
    }else if(phone.length!=11){
       //手机号的11位验证
    }else{
      let str = /^1[34578]\d{9}$/
      if (str.test(phone)) {
      //手机号的格式验证
            wx.request({
              url: '对接自己的注册接口',
              data: {
                name:username,
                password:password,
                portrait:res.data,
                phone:phone,
                nickname:usernames
              },
              header: {
                'content-type': 'application/json' // 默认值
              },
              success(res){
                console.log(res); //根据返回数据判断是否注册成功
                
              }
            })
      } else {
        //手机号格式不正确
         return false
       }
    }
  },

账号的登录到此结束。

---

三、选择微信授权登录

微信授权登录过程如下：

1.小程序js端调用框架登陆API，获取到一个临时code,拿着这个code去调用自己的服务端接口。

2.在自己的服务器端，使用app_id app_secrect code可以获取到用户的openid，这个id是用户唯一的id并且不会改变,可以把这个id返回给小程序端，小程序端本地保存openid。

3.获取用户信息很简单，并且不需要自己的服务器处理，只需要小程序端提供的API。
前端页面wxml使用一个按钮，按钮里增加几个属性，就可以回调到小程序js部分的方法上，并且带着用户的个人信息，如昵称 头像等。

4.这个时候就可以把该用户的openid 和 昵称，头像，一块调用自己服务端接口，保存到数据库中。

授权弹框效果图如下（示例）：

wode.wxml（示例）：

  <button open-type="getUserInfo" bindgetuserinfo="getPerson" style="width:100%" >微信登录</button>

wode.js（示例）：

   getPerson: function (e) {
    var that = this
     wx.login({
      success(res) {
        //js调用登陆命令获取到code;
        if (res.code) {
          //   //通过code调用自己服务接口获取到openid
          if(e.detail.userInfo==undefined){
                return  false;
          }else{
         var nick = e.detail.userInfo.nickName; //获取到昵称
          var avaurl = e.detail.userInfo.avatarUrl; //获取到头像地址
          var sex = e.detail.userInfo.gender; //获取到用户性别
            wx.request({
              url: '自己服务器接口',
              data: {
                code: res.code,
                nick: nick,
                avaurl: avaurl,
                sex: sex
              },
              success: function (wxInfo) {
                console.log(wxInfo);//后台返回数据
                  } 
                })
              }
            })
          }
        } else {

        }
      }
    })

  },

获取用户信息打印效果图如下（示例）：

感谢您的阅读， 如有什么不妥之处，还请赐教，我会继续努力，分享更好的前端代码。
点赞和在看就是最大的支持❤️