背景
最近老板让我们做一个微信小程序，他要求我们实现既可以授权登录获取用户信息，又可以选择申请账号注册，登录的一个功能。提示：以下是本篇文章正文内容，下面案例可供类似要求参考
一、点击登录弹出选择登录方式
登录方式弹框自定义
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 {
}
}
})
},
获取用户信息打印效果图如下（示例）：
感谢您的阅读， 如有什么不妥之处，还请赐教，我会继续努力，分享更好的前端代码。
点赞和在看就是最大的支持❤️
