使用UniApp实现小程序的微信登录功能的代码详解-创新互联
这篇文章主要讲解了使用UniApp实现小程序的微信登录功能的代码详解，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
1.微信登录思路：
- 在main.js 中封装公共函数，用于判断用户是否登录
- 在main.js 中分定义全局变量，用于存储接口地址
- 如果没有登录、则跳转至登录页面
- 进入登录页面
- 通过 wx.login 获取用户的 code
- 通过 code 获取用户的 SessionKey、OpenId 等信息【本应后台接口、但是此处使用js发送请求】
- 通过 openId 调用后台 Api 获取用户的信息
- 获取成功，则说明已经授权过了,直接登录成功
- 获取失败，则说明没有授权过，需要授权之后才能进行登录
- 用户点击页面微信登录按钮【 】
- 获取用户数据，然后调用后台接口写入数据库
2.在 applets/main.js 中添加如下
// 封装全局登录函数
// backpage, backtype 2个参数分别代表：
// backpage : 登录后返回的页面
// backtype : 打开页面的类型[1 : redirectTo 2 : switchTab]
Vue.prototype.checkLogin = function( backpage, backtype ){
// 同步获取本地数据（uid、随机码、用户名、头像）
var user_id = uni.getStorageSync('user_id');
var user_nu = uni.getStorageSync('user_nu');
var user_nm = uni.getStorageSync('user_nm');
var user_fa = uni.getStorageSync('user_fa');
if( user_id == '' || user_nu == '' || user_fa == ''){
// 使用重定向的方式跳转至登录页面
uni.redirectTo({url:'../login/login?backpage='+backpage+'&backtype='+backtype});
return false;
}
// 登录成功、已经登录返回数组 [用户 id, 用户随机码, 用户昵称, 用户表情]
return [user_id, user_nu, user_nm, user_fa];
}
// 定义一个全局的请求地址
Vue.prototype.apiServer = 'http://0608.cc/'另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
网站名称：使用UniApp实现小程序的微信登录功能的代码详解-创新互联
网页网址：http://mswzjz.cn/article/cocogi.html