小程序理论上和VUE是差不多的,我在做VUE的登录注册的时候,用户信息使用服务器端的session存了一份,还使用前端的缓存存了一份。小程序这边我可能不需要这么麻烦,只用小程序的缓存将用户信息存一份大概就可以了。
我这里大概是这样实现。
首先,在你创建小程序的时候,示例就会告诉你小程序的登录是在app.js的onlaunch中实现的,在小程序的生命周期中,我们了解onlaunch全局只调用一次。
因此,小程序的登录也是在小程序生成结束之后,只调用一次,而且这个玩意,他是在后台进行的,不会弹窗。这就很完美了。
我这里大概是这么实现的
首先放一张官方的图:
1.jpg
其实大概流程就是:
1:小程序前端通过调用wx.login方法获取code
2:将code传回服务器
3:服务器端通过小程序appid,appsecert,以及刚刚获取的code,请求微信服务接口,获取当前用户唯一信息(openid,sessionkey):
4:如果数据库中有匹配当前openid的信息,执行登录操作(将数据库中的信息返回小程序前端)如果数据库中没有匹配当前openid的信息,执行注册操作(将刚才返回的信息写入数据库)
5:将后端返回的信息存储至小程序缓存storage中。
登录的基本流程应该就是这样。当然,这其中可能还有你自己特定的业务流程。这里不做体现。
下边我这里大概放一下我的代码:
App.js中的代码:
/**
* @name 小程序初始化时触发,全局只触发一次
*/
onLaunch: function () {
// 登录
wx.login({
success (res) {
if (res.code) {
//发起网络请求
wx.request({
// 请求连接
url: 'https://guanchao.site/ ',
// 请求所需要的的参数
data: {
code: res.code
},
// 请求成功之后,将信息存储至storage 中
success(data){
// 将返回信息存储至storage中
wx.setStorage({
key:"userinfo",
data:data
});
// 从storage中获取用户信息
/*wx.getStorage({
key: 'userinfo',
success (res) {
console.log(res.data)
}
})//*/
}
});
} else {
console.log('登录失败!' + res.errMsg)
}//*/
}
});
},
服务器端PHP代码:
/**
* @name 小程序初始化时触发,全局只触发一次
*/
onLaunch: function () {
// 登录
wx.login({
success (res) {
if (res.code) {
//发起网络请求
wx.request({
// 请求连接
url: 'https://guanchao.site/ ',
// 请求所需要的的参数
data: {
code: res.code
},
// 请求成功之后,将信息存储至storage 中
success(data){
// 将返回信息存储至storage中
wx.setStorage({
key:"userinfo",
data:data
});
// 从storage中获取用户信息
/*wx.getStorage({
key: 'userinfo',
success (res) {
console.log(res.data)
}
})//*/
}
});
} else {
console.log('登录失败!' + res.errMsg)
}//*/
}
});
},
注意,以上的代码只是完成了登录,而并没有获取用户信息(我这里的用户信息包括头像,昵称等)也没有获取当前用户注册微信所用的电话号。这个以后会有说明
我这里的登录和注册只是将获取到的用户的唯一标识openid以及session_key写入到了数据库中。
大概就是这样
有好的建议,请在下方输入你的评论。
原文链接:https://guanchao.site/index/article/articledetail.html?artid=NoNDVRL1X












网友评论