注:本文章只适用于初学者或者感兴趣人群(方法可用,但效率不高,考虑不周),专业文章请移步到其他专业大佬的文章
思路:
当微信用户进入小程序后,首先拿到该用户的openId唯一标识,发送到后台,与数据库已有数据进行对比,通过openId判断新老用户,如果是新用户,则需要进行授权方可进入。如果是老用户,直接跳过授权,直接进入。
运行视频:
新用户登陆步骤
老用户登录步骤
程序代码1(前端JS):
注:
微信小程序 appId 与 小程序密钥 已不可直接写到代码中(官方要求),请改用请求数据库发送数据或其他方法
onLoad() {
uni.setStorageSync('openId', '');
var that = this
// 请求密钥
uni.request({
url: '由于微信小程序不允许密钥与appid的直接出现,这里第一步先访问数据库拿到小程序密钥与appid' 此处请填写自己的url地址,
success: (res) => {
console.log('res=>',res.data.results[0]);
const {appid,secret} = res.data.results[0]
that.id = appid
that.st = secret
//获取用户openId 下面url地址为微信小程序官方地址 用于获取用户的openId
uni.login({
provider: "weixin",
success: function(res) {
let appid = that.id;
let secret = that.st;
let url =
"https://api.weixin.qq.com/sns/jscode2session?appid=" +
appid +
"&secret=" +
secret +
"&js_code=" +
res.code +
"&grant_type=authorization_code";
uni.request({
url: url, // 请求路径
success: (r) => {
that.openId = r.data.openid;
uni.setStorageSync('openId', that.openId);
// 查找用户 将得到的openId发送到数据库进行对比
uni.request({
header: {
'Content-Type': 'application/json'
},
url:'填写自己的url地址',
method: 'POST',
data: {
openId:uni.getStorageSync('openId'),
},
dataType: 'json',
success: (res) => {
// 如果是老用户 会得到一条匹配数据 随后跳过授权步骤 直接进入程序
if(res.data.length == 1){
uni.switchTab({
// 这里为登陆后跳转至指定页面,也可更改为其他操作
url:'/pages/mine/mine'
})
}
},
fail: () => {
console.log('error');
},
});
},
});
},
});
},
fail: (res) => {
console.log('get失败');
}
})
},
程序代码2(新用户的授权操作以及对数据的发送存储):
(1)前端HTML:
<button @click="getUserProfile()" class="sys_btn">授权</button>
(2)前端JS:
methods: {
//获取用户基本信息
getUserProfile() {
var that = this;
uni.getUserProfile({
desc: '获取你的昵称、头像信息',
success: (info) => {
that.userInfo = info.userInfo
// 发送数据到数据库
const {
avatarUrl,
nickName
} = that.userInfo
uni.request({
header: {
'Content-Type': 'application/json'
},
url: '更改为自己的url地址',
method: 'POST',
data: {
openId: that.openId,
avatarUrl: avatarUrl,
nickName: nickName
},
dataType: 'json',
success: (res) => {
console.log('data=>', res);
uni.switchTab({
//跳转到指定页面,可改为其他操作功能
url:'/pages/mine/mine'
})
},
fail: () => {
console.log('error');
},
});
},
fail: (err) => {
uni.showToast({
title: "微信登录授权失败",
icon: "none"
});
}
})
},
}
程序代码3(Node.js对数据的接收与对mysql数据库的操作)
// 新用户数据插入
app.post('/insertUser', (req, res) => {
const { openId, avatarUrl, nickName } = req.body
const outSide = req.body
var firSql = `select openId from user where openId = ?`
// 检测是否为新用户
databases.query(firSql, openId, (err, results) => {
if (err) return console.log('err.message=>', err.message);
if (results.length != 0) {
console.log('已存在该用户');
res.send({ status: 'have' })
} else {
console.log('未搜到此用户 进行添加');
const { openId, avatarUrl, nickName } = outSide
var test1 = { openId, avatarUrl, nickName }
var sqlStr = 'insert into user set ?'
databases.query(sqlStr, test1, (err, results) => {
if (err) return console.log('err.message=>', err.message);
if (results.affectedRows === 1) {
console.log('插入成功');
res.send('ok');
}
})
}
})
})