我目前制作了一款微信小程序计时器，现将自己的一些开发心得进行分享。
首先是用户登陆过程的设计，为了更好的保护用户的隐私，微信官方对原本的获取用户信息的接口进行了调整，让我们不得不对用户登录的过程进行一定的更改。
引言：微信小程序对wx：getUserInfo接口进行了更新，内容如下：
为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。
文档中说明了有两种方式能够获取用户信息：
1. 利用button 组件将 open-type 指定为 getUserInfo 类型
2. 利用 <open-data>获取公开的用户信息
为了界面的美观和实用性，我在实际设计用户登录时对这两种方法都进行了应用，首先利用<open-data>获取登录用户的公开信息，包括用户的昵称和头像，再在下方添加一个open-type为'getUsrInfo'的button组件，来进一步的获取用户的授权。当然，假如该用户已经授予过权限，界面则会自动跳转到小程序的首页。
界面设计
界面效果
初始界面
点击授权登陆
点击拒绝
现进行分步讲解
1. 添加一个open-type为'getUsrInfo'的button组件
//js
const app = getApp() //在Page外声明
//button组件的bindgetuserinfo绑定的函数
bindGetUserInfo: function(e) {
if (e.detail.userInfo) {
//用户按了允许授权按钮
var that = this;
that.login(); //声明的函数
// 查询数据库是否存在当前用户，避免同一用户被添加两次
const db = wx.cloud.database()
db.collection('user').where({
_openid: app.globalData.openid
}).get({
success: res => {
if (res.data.length == 0) { //若数据库无该用户的信息则添加到数据库
const db = wx.cloud.database()
db.collection('user').add({
data: {
openid: app.globalData.openid,
nickName: e.detail.userInfo.nickName,
avatarUrl: e.detail.userInfo.avatarUrl,
province: e.detail.userInfo.province,
city: e.detail.userInfo.city
},
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log("插入小程序登录用户信息成功！");
}
})
}
},
})
//授权成功后，跳转进入小程序首页
wx.switchTab({
url: '/pages/index/index'
})
} else {
//用户按了拒绝按钮
wx.showModal({
title: '警告',
content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
showCancel: false,
confirmText: '返回授权',
success: function(res) {
if (res.confirm) {
console.log('用户点击了“返回授权”')
}
}
})
}
}
//调用名为‘login’的云函数获取用户接口，这个如果选用小程序云开发，初始会给login云函数
login() {
let that = this;
wx.cloud.callFunction({
name: 'login',
complete: res => {
console.log('云函数获取到的openid: ', res.result.openid)
app.globalData.openId = res.result.openid; //给全局变量openId和userInfo赋值
app.globalData.userInfo = res.result.event.userInfo;
}
})
},
//wxml
<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
授权登录
</button>
//wxss
.bottom {
border-radius: 90rpx;
font-size: 35rpx;
margin-top: 72rpx;
width: 45%;
}
2. 利用<open-data>获取登录用户的公开信息
//wxml
<open-data class="open-data-userAvatarUrl" type="userAvatarUrl"></open-data> //用户头像
<open-data class="open-data-userNickName line1" type="userNickName"></open-data> //用户昵称
//wxss
.open-data-userAvatarUrl { //为了美观，这里让用户头像以圆形呈现
width: 160rpx;
height: 160rpx;
display: block;
overflow: hidden;
border-radius: 50%;
margin: 45rpx auto;
}
.open-data-userNickName{
display:block;
font-size: 30rpx;
margin-bottom:60rpx;
}
3. 这里把登录云函数login给出
//js
// 云函数模板
// 部署：在 cloud-functions/login 文件夹右击选择 “上传并部署”
const cloud = require('wx-server-sdk')
// 初始化 cloud
cloud.init()
/**
* 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端
*
* event 参数包含小程序端调用传入的 data
*
*/
exports.main = (event, context) => {
console.log(event)
console.log(context)
// 可执行其他自定义逻辑
// console.log 的内容可以在云开发云函数调用日志查看
// 获取 WX Context (微信调用上下文)，包括 OPENID、APPID、及 UNIONID（需满足 UNIONID 获取条件）
const wxContext = cloud.getWXContext()
return {
event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
}
}
//json
{
"name": "login",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"wx-server-sdk": "latest"
}
}
除此之外，还需要在onLoad里判断用户是否已经被授过权，若用户已授权则需要直接跳转到小程序首页。
**4. 在onLoad中进行判断
//需要在onLoad函数里判断用户是否被授权
onLoad: function(options) {
var that = this;
// 查看是否授权
wx.getSetting({
success: function(res) {
if (res.authSetting['scope.userInfo']) {
//用户已经授权过则跳转到小程序首页，注意这里登陆界面会出现一闪而过的现象
wx.switchTab({
url: '/pages/index/index'
})
}
}
})
},
5. 最后展示用户登录设计wxml和wxss的全部代码
还需要在js中添加一个data变量
data: {
//判断小程序的API，回调，参数，组件等是否在当前版本可用。
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
wxml
<!--pages/userLogin/userLogin.wxml-->
<view wx:if="{{canIUse}}" class='container'>
<view class='header'>
<text>微信授权</text>
</view>
<open-data class="open-data-userAvatarUrl" type="userAvatarUrl"></open-data>
<open-data class="open-data-userNickName line1" type="userNickName"></open-data>
<view class='content'>
<view>申请获取以下权限</view>
<text>获得你的公开信息(昵称，头像等)</text>
</view>
<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
授权登录
</button>
</view>
<view wx:else class='container'>请升级微信版本</view>
wxss
/* pages/userLogin/userLogin.wxss */
.header {
margin-top: 120rpx;
margin-bottom: 90rpx;
text-align: center;
font-size: 60rpx;
}
.content {
margin-left: 50rpx;
}
.content text {
display: block;
color: #9d9d9d;
margin-top: 15rpx;
}
.bottom {
border-radius: 90rpx;
font-size: 35rpx;
margin-top: 72rpx;
width: 45%;
}
.open-data-userAvatarUrl {
width: 160rpx;
height: 160rpx;
display: block;
overflow: hidden;
border-radius: 50%;
margin: 45rpx auto;
}
.open-data-userNickName{
display:block;
font-size: 30rpx;
margin-bottom:60rpx;
}
总结
以上就是我对用户登录过程的设计，如果有什么问题，欢迎留言指出。
网友评论