mui APP 微信登录授权
程序员文章站
2022-06-24 11:14:50
一、在微信平台上申请appid、appsecret。 二、app --》 manifest.json--》SDK配置(填写申请好的appid和appsecret) 三、在登录页,点击微信登录按钮,若绑定微信,则免账号密码登录直接跳转到首页;若未绑定,则弹出未绑定微信。 四、用账号密码登进首页时,判断 ......
一、在微信平台上申请appid、appsecret。
二、app --》 manifest.json--》sdk配置(填写申请好的appid和appsecret)
三、在登录页,点击微信登录按钮,若绑定微信,则免账号密码登录直接跳转到首页;若未绑定,则弹出未绑定微信。
// 微信授权登录对象 var aweixin=null; // 调用plus.oauth.getservices获取保存 // 当前环境支持的所有授权登录对象 var auths = {}; mui.plusready(function() { // 获取鉴权服务 getservice(); }) // 获取登录授权认证服务列表,单独保存微信登录授权对象 // 5+app在plusready事件中调用,uni-app在vue页面的onload中调用 function getservice(){ plus.oauth.getservices(function(services){ for(var i=0;i<services.length;i++){ auths[services[i].id] = services[i]; } aweixin = auths['weixin']; }, function(e){ plus.nativeui.alert("获取登录授权服务列表失败:"+json.stringify(e)); } ); } //wx登录
document.getelementbyid('wxdenglu').addeventlistener('tap',function(){ plus.nativeui.showwaiting("正在登录中...",{padlock: true}); if(!aweixin.authresult){ authlogin().then(res=>{ wxlogin()//调用自定义的登录接口 }).catch(res=>{ plus.nativeui.closewaiting(); }) }else{ wxlogin()//调用自定义的登录接口 } });
四、用账号密码登进首页时,判断是否绑定微信,若为绑定微信,则提示让其绑定微信。
五、微信绑定和解绑。
// 微信授权登录对象 // 调用plus.oauth.getservices获取保存 var aweixin=null; // 当前环境支持的所有授权登录对象 var auths = {}; mui.plusready(function(){ // 获取鉴权服务 getservice() }); //wx绑定 function weixinbind(){ plus.nativeui.showwaiting("正在绑定中...",{padlock: true}); if(!aweixin.authresult){ authorize().then(res=>{ wxbind(1,aweixin.authresult.openid) }).catch(res=>{ plus.nativeui.closewaiting(); }) }else{ wxbind(1,aweixin.authresult.openid) } }; //wx解绑 function weixinunbind(){ plus.nativeui.showwaiting("正在解绑中...",{padlock: true}); wxbind(2,"") } // 获取登录授权认证服务列表,单独保存微信登录授权对象 // 5+app在plusready事件中调用,uni-app在vue页面的onload中调用 function getservice(){ plus.oauth.getservices(function(services){ for(var i=0;i<services.length;i++){ auths[services[i].id] = services[i]; } aweixin = auths['weixin']; }, function(e){ plus.nativeui.alert("获取登录授权服务列表失败:"+json.stringify(e)); } ); } // 获取微信登录授权对象后可进行授权操作 function authorize(){ return new promise(function (resolve, reject) { if(!aweixin){ plus.nativeui.alert("当前环境不支持微信登录"); return; } aweixin.authorize(function(e){ // plus.nativeui.alert("授权成功:"+json.stringify(e)); authlogin().then(res=>{ resolve(res); }); }, function(e){ // plus.nativeui.alert("授权失败:"+json.stringify(e)); plus.nativeui.closewaiting(); reject(e); }, {scope:'snsapi_userinfo',state:'authorize test'}); }) } // 获取微信登录授权对象后可进行登录认证操作 function authlogin(){ return new promise(function (resolve, reject) { if(!aweixin){ plus.nativeui.alert("当前环境不支持微信登录"); return; } if(!aweixin.authresult){ aweixin.login(function(e){ // plus.nativeui.alert("登录认证成功!"+json.stringify(e)); resolve(e); }, function(e){ reject(e); } ); }else{ // plus.nativeui.alert("已经登录认证!"); } }) }
上一篇: Spring mybatis 之-ssm框架环境搭建(方案一)
下一篇: 前端之移动页面布局