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

原文地址:https://www.cnblogs.com/Dark-fire-liehuo/p/11397257.html

时间: 2024-08-13 00:49:45

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

uni app以及小程序 --环境搭建以及编辑器

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 根据以上网页下载自己电脑相应的版本的微信开发者工具(目录自己创建),然后进行运行安装(建议下载安装) 微信小程序和app比较相似的方式,都可以这个模式进行开发 在H X创建好项目以后可以再谷歌浏览器运行也可以在微信开发者工具上运行(需要进行适配,这个路径就是你刚刚安装工具的那个路径) 这样你就可以运行查看你刚刚创建的项目的效果了(项目目录大致是相通的就不

WordPress开发app(小程序)接口开发教程

引言 废话不多说这套系列的教程就是教你怎么将自己现有的WP网站做成一个app或者小程序 技术栈要求 需要声明的是,在这套教程之中,因为精力有限的关银戒原创系,我不负责任何前端页面的设计以及开发,只讲前端与WP交互的接口设计与开发.当然,我还是会尽可能的做出一个简单Demo用于展示与测试(为了通俗易懂这里使用 uni-app ). 而至于什么是接口开发如果有人不明白的可以去百度一下,这里就不详细说明了.但简单且通俗易懂的来说,其实接口就是客户端(app)与服务端交互的一个桥梁,你可以理解成是app

微信支付之扫码、APP、小程序支付接入详解

做电商平台的小伙伴都知道,支付服务是必不可少的一部分,今天我们开始就说说支付服务的接入及实现.目前在国内,几乎90%中小公司的支付系统都离不开微信支付和支付宝支付.那么大家要思考了,为什么微信支付和支付宝支付能作为大多数公司接入的首选呢?其实这个问题大多小伙伴应该是很清楚的,说白了就是人家有庞大的用户流量,目前微信在国内的用户已突破10亿,支付宝也接近8亿左右,如此庞大的用户群体,你还会选择其他的第三方支付(微博钱包.财付通.快钱等)吗,作为普通客户,大家都希望能方便快捷,谁会为了在一个平台买点

小程序打开app场景

api文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html 此功能需要用户主动触发才能打开 APP,所以不由 API 来调用,需要用 open-type 的值设置为 launchApp 的 button 组件的点击来触发. 当小程序从非 1069 的打开时,会在小程序框架内部会管理的一个状态,为 true 则可以打开 APP,为 false 则不可以打开 APP.这个状态

微信小程序和App的UI设计有什么异同吗?

大家总是把小程序和App放在一起比,因此我也花时间看了一下小程序的开发指南,尤其是UI部分的设计和原则,今天就拿它和苹果的HIG(Human Interface Guidelines)做个比较,其实两者在一些大的原则处理上可以说是一致的. 关键词一:友好礼貌 对应于苹果:Less is more 苹果在iOS7时做了一个非常大的界面调整,以突出内容为主,去除掉了所有会干扰用户的界面元素,这个风格一致延续至今(以苹果自家的App,比如指南针,天气为例就可以看出). 微信在指南一开始也强调了这个原则

APP与小程序的区别

很多人知道APP但都不知道微信小程序是什么,现在我先来说说微信小程序! 微信小程序,他是微信里最新开发的一个程序,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下即可打开应用.也体现了"用完即走"的理念,用户不用关心是否安装太多应用的问题. 应用将无处不在,随时可用,但又无需安装卸载. 微信小程序于2017年1月9日凌晨正式上线.张小龙随后在朋友圈发出一条写着"2017.1.9"的状态,同时配有 iPhon

小程序与app真的就要“灭亡”一个?(出自码教授微博)

微信小程序的火爆让一众人认为app的时代开始衰竭了! 是这样的?难道众多的app开发人员就要面临"失业"?客观来说web app是会因为小程序的介入发生一些动荡! 两派观点:一派:app不可能被取代,小程序的功能都不全面,只能是依附于固定程序实现简单操作,有的手机点单都实现不了.它的代码逻辑可不实用!另一派:用户都是追求快捷方便的,与其手机上一堆各种app,还不如直接一个搞定,省时省力省资源,何乐而不为! 这样的说法在现在看来都太绝对,各自都有站立点,不能完全否定!不过有一点就是:小程

小程序 与 App 与 H5 之间的区别

小程序的实现原理 根据微信官方的说明,微信小程序的运行环境有 3 个平台,iOS 的 WebKit(苹果开源的浏览器内核),Android 的 X5 (QQ 浏览器内核),开发时用的 nw.js(C++ 实现的 web 转桌面应用). 平台渲染js 运行环境 iOSWKWebViewJavaScriptCore AndroidX5 基于 Mobile Chrome 37 内核X5 JSCore 开发工具Chrome WebViewnw.js 小程序运行时会创建两个线程:View Thread 和

APP与小程序的优劣分析

小程序出现并非新的面孔,在去年百度轻应用程序,它也是类似于外部APP形式,更多的是用各种移动浏览器的html应用,手机的浏览器制造商详实之普及,作为浏览器上的应用软件,市场运营需要一个浏览器,有多种功能,在vivo app中开发最广泛的就是html和CS s JavaScript,小程序外包APP有它的优点,由于缺乏后台操作能力,被孤立访问网页等问题一直到限制它的调用功能,对ui设计和使用体验产生了影响.从发展趋势来看,国内大型的互联网企业推出的开放源码的跨平台的开放项目,有效降低了应用开发和普