uni-app关于小程序及app端第三方微信登陆问题

Posted 小义博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uni-app关于小程序及app端第三方微信登陆问题相关的知识,希望对你有一定的参考价值。

1.第一次做第三方微信登陆,所以在这方面话太多时间了,主要是在获取code的时候感觉头痛,uni-app没有说明如何获取code,后来在网上搜索诸多信息后终于解决了问题

uni-app在app端第三方微信登陆时要获取code再传给后端,后端根据code向微信发送登陆请求:

复制代码
// #ifdef APP-PLUS
        login() {
            var it=this;
            var  getAppid = plus.runtime.appid;
            console.log(\'app端登陆\')
            uni.login({
              provider: \'weixin\',
              success: function (loginRes) {
                console.log(JSON.stringify(loginRes.authResult));
                uni.showModal({
                    content: JSON.stringify(loginRes.authResult),
                    cancelText: "我再想想",
                    cancelColor: "#999",
                    confirmText: "转让",
                    confirmColor: "#DEC17C",
                    success: function(res) {
                        
                    }
                })
              }
            });
            var weixinService = null;
            // http://www.html5plus.org/doc/zh_cn/oauth.html#plus.oauth.getServices
            plus.oauth.getServices(function(services) {
                console.log(312589340656548)
                console.log(services)
                if (services && services.length) {
                    for (var i = 0, len = services.length; i < len; i++) {
                        if (services[i].id === \'weixin\') {
                            weixinService = services[i];
                            console.log(\'授权对象\')
                            console.log(weixinService)
                            break;
                        }
                    }
                    if (!weixinService) {
                        console.log(\'没有微信登录授权服务\');
                        return;
                    }
                    // http://www.html5plus.org/doc/zh_cn/oauth.html#plus.oauth.AuthService.authorize
                    weixinService.authorize(function(event) {  //此处获取code的关键
                        console.log(event)
                        console.log(event.code,\'这次是真的授权后返回的code\')
                        it.weixinCode = event.code; //用户换取 access_token 的 code
                        // it.requestLogin();
                        let data={code: it.weixinCode};
                        it.$api.user.login.getWeiXinCode(data).then(function(userInfo) {
                            console.log(\'是否走到这里\')
                                console.log(\'第三方登录授权\',it.weixinCode)
                                console.log(\'第三方登录授权1111\',userInfo)
                                it.$store.commit(\'isLogged\', true);
                                it.$store.commit(\'user\', {});
                                it.$store.commit(\'user\', userInfo.data);
                                uni.navigateBack()
                            }).catch(res => {
                            console.log(res)        
                                });
                        
                    }, function(error) {
                        console.error(\'authorize fail:\' + JSON.stringify(error));
                    }, {
                        // http://www.html5plus.org/doc/zh_cn/oauth.html#plus.oauth.AuthOptions
                        appid: getAppid, //开放平台的应用标识。暂时填个假的充数,仅做演示。
                    });
                } else {
                    console.log(\'无可用的登录授权服务\');
                }
            }, function(error) {
                console.error(\'getServices fail:\' + JSON.stringify(error));
            });
        },
        // #endif
复制代码

2. 微信小程序登陆方式 :

复制代码
// #ifdef MP-WEIXIN
        getUserInfo(v) {
            let vm = this;
            uni.login({
                provider: \'weixin\',
                success: function(loginRes) {
                    uni.getUserInfo({
                        success: function(res) {
                            vm.$api.user.login.weChatAppletLogin(loginRes.code,res.encryptedData,res.iv)
                                .then(function(userInfo) {
                                    vm.$store.commit(\'isLogged\', true);
                                    vm.$store.commit(\'user\', {});
                                    vm.$store.commit(\'user\', userInfo.data);
                                    uni.navigateBack()
                                }).catch(res => {
                                });
                        },
                        fail: function(res) {
                            vm.$store.commit(\'isLogged\', false);
                        }
                    });
                },
                fail: function(res) {
                }
            });
        }
        // #endif
复制代码

 

 

以上是关于uni-app关于小程序及app端第三方微信登陆问题的主要内容,如果未能解决你的问题,请参考以下文章

若依前后端分离发布富文本框内容 | uni-app微信小程序展示富文本框内容

uni-app第三方登陆-微信

uni-app框架简介

uni-app 微信小程序获取手机号并解密

uni-app简介条件编译App端Nvue开发HTML5+开发环境搭建自定义组件配置平台环境uniCloud云开发平台

uni-app简介条件编译App端Nvue开发HTML5+开发环境搭建自定义组件配置平台环境uniCloud云开发平台