1.效果图
登陆页
2.流程
流程图
3.步骤
3.1：判断是否授权
关键词：onLaunch，wx.getSetting(Object object)，res.authSetting['scope.userInfo']
先假设情景是用户必须先登陆才能进入小程序，由于app.js的onLaunch是每次进入小程序都会执行的，所以先在 onLaunch 判断是否授权，调用 wx.getSetting(Object object) 用户的当前设置，根据是否授权作出处理。
/**
*文件：app.js
**/
onLaunch: function (options) {
wx.getSetting({ //获取用户设置
success: (res) => { //获取成功
if (res.authSetting['scope.userInfo']) { //如果授过权
//执行登陆
} else {
wx.redirectTo({ //关闭所有页面，跳到登陆授权页面
url: '/pages/login/login'
})
}
}
})
}
3.2：点击按钮主动授权
关键词：open-type="getUserInfo"，bind:getuserinfo="getUserInfo"，wx.login(Object object),iv,code,encryptedData
假设当前用户没有授过权，小程序跳转到验证页面，我们需要设置 button（组件）中的open-type="getUserInfo"（微信开放能力）来拉起授权窗口，再通过bind:getuserinfo(事件)获取用户信息，执行登陆操作。
但是有些低版本微信是不支持这种方式的，所以要设置友好提示
/**
*文件：login.js
**/
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo'), //是否支持该开放能力
show: false //是否显示遮罩
}
<!-- 文件:login.wxml-->
<!-- 遮罩组件-->
<loading-cmp show="{{show}}" msg="正在登陆" />
<!-- 小熊猫图片-->
<image class="bg-img" mode="widthFix" src="/images/bg-img.jpg"></image>
<!-- 如果微信版本支持开发能力 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" lang="zh_CN" bind:getuserinfo="getUserInfo">
微信登陆
</button>
<!-- 不支持显示友好提示 -->
<view wx:else>你的微信版本太旧，请更新后再尝试</view>
点击按钮后，拉起授权窗口
点击按钮拉起授权窗口
允许和取消都会走到 bind:getuserinfo 事件，通过是否获得用户信息进行相关操作
/**
*文件：login.js
**/
getUserInfo: function(event) {
if (event.detail.userInfo) { //如果得到用户信息
this.setData({ //显示loading遮罩
show: true
})
this.login(event.detail) //后续登陆操作
} else {
this.setData({ //隐藏loading遮罩
show: false
})
wx.showModal({ //友好提示弹窗
title: '登陆失败',
showCancel: false, //不显示取消按键
confirmText: '确定',
content: '(╯°Д°)╯︵ ┻━┻，登陆失败,请授权！'
})
}
}
如果用户同意授权，则调用login登陆方法,通过wx.login(Object object)获取登录凭证（code），而iv和encryptedData则通过传送过来的数据中获取，将这三个参数传送到服务端进行登陆操作
login: function (user) {
wx.login({ //获取登录凭证（code）
success: (res) => { //获取成功
//得到三个数据，服务端进行解析
console.log('iv已经获取：' + user.iv)
console.log('code已经获取：' + res.code)
console.log('encryptedData已经获取：' + user.encryptedData)
},
fail: (res) => { //失败提示
wx.showModal({
title: '系统出错',
showCancel: false,
confirmText: '确定',
content: '(╯°Д°)╯︵ ┻━┻，小程序出现错误！'
})
}
})
}
本文中的遮罩是自定义组件，就不写步骤了，下面会贴上全部代码
4.源码
4.1文件：/app.js
App({
onLaunch: function(options) {
wx.getSetting({ //获取用户设置
success: (res) => { //获取成功
if (res.authSetting['scope.userInfo']) { //如果授过权
this.login() //执行登陆
} else {
wx.redirectTo({ //关闭所有页面，跳到登陆授权页面
url: '/pages/login/login'
})
}
}
})
}
})
4.2文件：/pages/login/login.wxml
<!-- 遮罩组件-->
<loading-cmp show="{{show}}" msg="正在登陆" />
<!-- 小熊猫图片-->
<image class="bg-img" mode="widthFix" src="/images/bg-img.jpg"></image>
<!-- 如果微信版本支持开发能力 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" lang="zh_CN" bind:getuserinfo="getUserInfo">
微信登陆
</button>
<!-- 不支持显示友好提示 -->
<view wx:else>你的微信版本太旧，请更新后再尝试</view>
4.3文件：/pages/login/login.wxss
page {
background: #f3f1dc;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.bg-img {
width: 300rpx;
}
button {
width: 300rpx;
height: 80rpx;
line-height: 80rpx;
font-size: 32rpx;
margin-top: 150rpx;
background-color: transparent;
}
4.4文件：/pages/login/login.js
Page({
/**
* 页面的初始数据
*/
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo'), //是否支持该开放能力
show: false //是否显示遮罩
},
getUserInfo: function(event) {
if (event.detail.userInfo) { //如果得到用户信息
this.setData({ //显示loading遮罩
show: true
})
this.login(event.detail) //后续登陆操作
} else {
this.setData({ //隐藏loading遮罩
show: false
})
wx.showModal({ //友好提示弹窗
title: '登陆失败',
showCancel: false, //不显示取消按键
confirmText: '确定',
content: '(╯°Д°)╯︵ ┻━┻，登陆失败,请授权！'
})
}
},
login: function(user) {
wx.login({ //获取登录凭证（code）
success: (res) => { //获取成功
//得到三个数据，服务端进行解析
console.log('iv已经获取：' + user.iv)
console.log('code已经获取：' + res.code)
console.log('encryptedData已经获取：' + user.encryptedData)
},
fail: (res) => { //失败提示
wx.showModal({
title: '系统出错',
showCancel: false,
confirmText: '确定',
content: '(╯°Д°)╯︵ ┻━┻，小程序出现错误！'
})
}
})
}
})
4.5文件：/pages/login/login.json
{
"navigationStyle": "custom",
"usingComponents": {
"loading-cmp": "/components/loading/index"
}
}
4.6文件：/components/loading/index.wxml
<view class="window" wx:if="{{show}}">
<image class="loading-img" mode="widthFix" src="images/loading.svg"></image>
<text>{{msg}}</text>
</view>
4.7文件：/components/loading/index.wxss
.window {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 999;
}
.loading-img {
width: 100rpx;
}
text {
color: #fff;
font-size: 28rpx;
margin-top: 30rpx;
}
4.8文件：/components/loading/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
show: Boolean,
msg: String
}
})
4.9文件：/components/loading/index.json
{
"component": true
}
4.10素材
loadin动画是svg格式无法上传
bg-img.jpg
网友评论