mui APP 微信登录授权

2022-10-14,,,

一、在微信平台上申请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("已经登录认证!");
        }
    })
}
        

 

《mui APP 微信登录授权.doc》

下载本文的Word格式文档,以方便收藏与打印。