文章目录
开发环境:微信开发者、微信云开发、HBuilderX、uniCloud等。
(此文已默认对以上开发环境有基础的使用了解。)
(文中大部分注释是自己的思考和理解,如果阅读时觉得混乱,可选择性忽略,只看代码就好。)
1. 获取openid
1.1 效果图
1.2 逻辑思路
用HBuilderX选择在微信开发者调试时,只要提前填上微信appid、开通了微信云开发,微信的云空间就会提供一个获取openid的云函数。
在App.vue
的onLaunch()
函数中使用getOpenId()
即可获得openid。
不一定是getOpenId()
这个函数名,也有可能叫login()
,具体名称要自己查看。
1.2 实现代码
1.2.1 App.vue页面
App.vue
页面,一进入小程序就开始获取openid:
<script>
export default {
onLaunch: function() {
console.log('App Launch')
// 第一步:初始化微信云函数
wx.cloud.init({
env: '填写微信云开发环境ID', // 打开微信云开发控制平台,右上角点击[设置] - [环境设置]
traceUser: true
}),
// 第二步:获取用户的openid
wx.cloud.callFunction({
name: 'getOpenId', // 打开微信云开发控制平台,左上角点击[云函数]
data: {
},
success: res => {
// debugger
// 第三步(可省略):缓存用户openid,方便后续再次调用
wx.setStorage({
key: "user",
data: res.result.openid
})
console.log('成功获取openid: ', res.result.openid)
},
fail: err => {
console.error('获取失败:', err)
}
})
},
}
</script>
2. 获取用户信息(按钮授权)
2.1 效果图
2.2 逻辑思路
备注1:流程图中的“初始化自定义用户数据变量”,指的是除了用户的头像昵称性别等基本信息外,还因开发需求而增加了一些“自定义”的用户变量。比如一条用户记录的结构是:
图中的第五项score
就是我自定义的用户属性,需要自己赋值初始化。
上图的用户数据集合,将存储在uniCloud中。
备注2: 使用openid查询用户数据,意思是,使用此前获得的openid,到uniCloud中自己创建的user集合中查找。如果找得到此用户的openid,表示此用户已存在;找不到此用户的openid,表示此用户为新用户,需要在user集合中插入新数据。
2.3 实现代码
2.3.1 index.vue页面的template部分
template部分:
<template>
<view id="content">
<button v-if="!hasUserInfo" open-type="getUserInfo" @getuserinfo="getuserinfo">授权登录</button>