使用 UniApp 实现小程序的微信登录功能
(编辑:jimmy 日期: 2024/12/28 浏览:3 次 )
1.微信登录思路:
- 在main.js 中封装公共函数,用于判断用户是否登录
- 在main.js 中分定义全局变量,用于存储接口地址
- 如果没有登录、则跳转至登录页面
- 进入登录页面
- 通过 wx.login 获取用户的 code
- 通过 code 获取用户的 SessionKey、OpenId 等信息【本应后台接口、但是此处使用js发送请求】
- 通过 openId 调用后台 Api 获取用户的信息
- 获取成功,则说明已经授权过了,直接登录成功
- 获取失败,则说明没有授权过,需要授权之后才能进行登录
- 用户点击页面微信登录按钮【 <button open-type="getUserInfo"></button>】
- 获取用户数据,然后调用后台接口写入数据库
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"htmlcode"><template> <view> <!-- login view html start --> <view> <view> <view class="header"><image src="/UploadFiles/2021-04-02/login-wx.png"><template> <view>我的页面</view> </template> <script> var loginRes; export default { data() { return {}; }, onLoad() { // 加载定义好的方法 loginRes = this.checkLogin('../my/my', 2); // 没有登录成功,返回空 if (!loginRes) { return; } }, methods: {} }; </script> <style></style>5.PHP 接口 loginApplets
public function loginApplets(Request $request, UserInfo $userInfo) { // 获取数据 $data['u_openid'] = $request->param('openid', ''); // 验证数据 $rule = [ 'u_openid' => 'require|max:200|min:10' ]; $message = [ 'u_openid.require' => 'openid 不能为空', 'u_openid.max' => 'openid 格式错误', 'u_openid.min' => 'openid 格式错误' ]; $validate = Validate::rule($rule)->message($message); if (!$validate->check($data)) { return json(['code' => 1, 'msg' => $validate->getError(), 'res' => null]); } // 根据 openid 判断是否存在 $where['u_openid'] = $data['u_openid']; $user = $userInfo->selOne($where); if (!$user) { return json(['code' => 1, 'msg' => '还没授权登录、请先授权然后登录', 'res' => $user]); } return json(['code' => 0, 'msg' => '已授权获取到用户的数据', 'res' => $user]); }6.PHP 接口 appletsUserInfo
public function appletsUserInfo(Request $request, UserInfo $userInfo) { // 获取数据 $data['u_openid'] = $request->param('openid', ''); $data['u_avatarUrl'] = $request->param('avatarUrl', ''); $data['u_city'] = $request->param('city', ''); $data['u_country'] = $request->param('country', ''); $data['u_gender'] = $request->param('gender', ''); $data['u_language'] = $request->param('language', ''); $data['u_nickName'] = $request->param('nickName', ''); // 验证数据 $rule = [ 'u_openid' => 'require|max:200|min:10', 'u_avatarUrl' => 'require', 'u_nickName' => 'require' ]; $message = [ 'u_openid.require' => 'openid 不能为空', 'u_openid.max' => 'openid 格式错误', 'u_openid.min' => 'openid 格式错误', 'u_avatarUrl.require' => '用户头像 不能为空', 'u_nickName.max' => '用户名 格式错误', ]; $validate = Validate::rule($rule)->message($message); if (!$validate->check($data)) { return json(['code' => 1, 'msg' => $validate->getError(), 'res' => null]); } // 根据 openid 判断是否存在 $where['u_openid'] = $data['u_openid']; $user = $userInfo->selOne($where); // 存在、执行修改 if ($user) { $user_res = $userInfo->updOne($where, $data); $res = []; $res['u_id'] = $user['u_id']; $res['u_regtime'] = $user['u_regtime']; } // 不存在、执行添加 if (empty($user)) { $res = []; $res = $data; $res['u_regtime'] = time(); $res['u_id'] = $userInfo->addOne($res); } // 判断是否添加成功 if (empty($res['u_id'])) { return json(['code' => 1, 'msg' => '注册失败,返回重试', 'res' => null]); } return json(['code' => 0, 'msg' => 'ok', 'res' => $res]); }总结
下一篇:详解vue高级特性
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。