uniapp框架开发APP—微信登录

需求说明:

我的项目需求是已有微信小程序项目,新增app项目,需要将微信小程序的用户和app端的用户相关联。

实现方法:在微信开放平台,在同一账户下分别创建移动应用和微信小程序。

实现原理:同一微信登录的微信小程序和app,用户对应的unionid是一致的。

微信登录代码实现如下:

可查看uniapp官方文档的登录api,有详细的参数说明。

// 微信登录
wechatLogin(){
    var that=this
	uni.getProvider({
	    service: 'oauth',
	    success: function(res) {
	        console.log(res.provider);
	        //支持微信、qq和微博等
	        if (~res.provider.indexOf('weixin')) {
	            uni.login({
			        provider: 'weixin',
				    success: function (loginRes) {
				        console.log("App微信获取用户信息成功",loginRes);
                        //调用后端接口做登陆操作
				        that.wechatLoginFun(loginRes.authResult)
				    },
				    fail:function(loginRes){
				        console.log("App微信获取用户信息失败",res);
                        //调用后端接口做登陆操作
				        that.wechatLoginFun(loginRes)
				    }
			    })
            }
        }
    });
}

遇到的问题:分别在微信小程序和app登录,获取的unionid不一致。

查找资料得知导致unionid不一致的原因有:

1>移动应用与微信小程序不在同一主体下

2>移动应用与微信小程序不在同一开放平台账号下

大家可以优先自己检查下这两点。

排除以上两点,在微信公众平台社区发帖求助,得到的官方回应如下:

查阅文档发现想要获取正确的unionid需要使用自定义基座。

配置自定义基座可参考另一篇博客,有详细介绍。

使用自定义基座后,可以正确的获得unionid,微信小程序和app的用户成功关联。

ios13+苹果登录

到这儿,登录功能还没完全完成,官方文档有明确指出,苹果在ios13+新增苹果登录功能,如果app登录有使用第三方登录(微信登录等),必须同时有苹果登录,否则app提审很可能会被拒绝。详情可查看:苹果登录

苹果登录代码如下:需要在苹果开发平台创建应用的时候,选择apple  sign。

//判断是apple 13+
onLoad(){
    let that = this
    uni.getSystemInfo({
        success: function (res) {
            that.system = Number(res.system.substring(0,2))
            that.platform = res.platform
            if(that.platform == 'ios' && that.system < 13){
                //不支持苹果登录
            }else if(that.platform == 'ios' && that.system >= 13){
                //调用苹果登录
                that.appleLogin()
            }
        }
    });
},
methods:{
    //苹果登录
    appleLogin(){
	    uni.login({  
	        provider: 'apple',  
	        success: function (loginRes) {  
	            // 登录成功  
	            uni.getUserInfo({  
	                provider: 'apple',  
	                success(res) {  
	                    // 获取用户信息成功  
	                    console.log(res)
                        /*
                            返回的数据
                            {
                                "errMsg": "getUserInfo:ok",
                                "rawData": "json字符串",
                                "userInfo": {
                                    "openId": "xxx.xxxxx.xxx", // 苹果用户唯一标识符,该值在同一个开发者账号下的所有 App 下是一样的,开发者可以用该唯一标识符与自己后台系统的账号体系绑定起来。
                                    "fullName": {}, // 当且仅当第一次授权才会返回
                                    "authorizationCode": "12345678xxx", // 服务器验证需要使用的参数
                                    "identityToken": "header.payload.signature", // 服务器验证需要使用的参数
                                    "realUserStatus": 1 // 用于判断当前登录的苹果账号是否是一个真实用户
                                },
                                "signature": ""
                            }
                        */
	                    if(res.userInfo.openId != undefined){
	                        uni.showToast({
                                title:'登录成功',
	                            icon:'none'
	                        })
	                    }
	                }  
	            })  
	        },  
	        fail: function (err) {  
	            console.log(err)
	        }  
	    });  
	},
}

在苹果登录的开发过程中,我遇到了一下问题,经过不断地查阅资料,得到了有效的解决方案。

问题1:IOS开发者证书信息有误,请重新填写相关信息 IOS profile文件与私钥证书文件不匹配。

原因:在mac上生成.p12证书错误

解决方案:

第二条很关键,我就是第二条错了。

问题2:运行到手机端的时候,提示“安装失败 return code=-402620395 ,手动安装提示校验失败”

原因:

1>查看官方说明code=-402620395官方说明

2>调试的手机没有被添加到苹果开发账号的设备里

解决方案:在苹果开发平台添加该设备。详细操作可参考基座配置博客。

问题3:运行到苹果手机,页面出现We'are sorry ... Back Close选择项

原因:mainfest.json里面模块权限没加

解决方案:注意配置完mainfest.json需要重新上传云打包,进行打包,否则不生效。

到这儿,uniapp实现app端的微信登录功能就实现啦。博客不断更新中~
要努力学习上进的芋头呀!!

原文地址:https://blog.csdn.net/weixin_40597676/article/details/110889471

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


文章浏览阅读52次。1.0.0版本 只需修改API接口即可 接口位置:/api/request.js 可以二开自行开发,或直接引用组件。
文章浏览阅读820次。在uni-app和vue3中,我们可以封装全局函数来复用代码。以上就是在uni-app和vue3中封装全局函数的详细完整的方法。_uniapp vue3 vue.prototype
文章浏览阅读671次,点赞22次,收藏6次。整理在Uniapp应用开发中遇到的问题、错误代码与解决方案。
文章浏览阅读122次。【代码】Uniapp Vue3 父组件给子组件传值。_uniapp 父级组件改变子组件值
文章浏览阅读765次。包括数据绑定和计算属性、条件渲染和列表渲染、事件处理、表单输入处理、生命周期钩子、自定义指令和过滤器、路由和导航以及状态管理(如Vuex)
文章浏览阅读129次。Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件_uniapp小程序端tabbar跳转插件
文章浏览阅读1k次,点赞20次,收藏7次。uniapp Vue3 日历 可签到 跳转_uniapp vue3 日历
文章浏览阅读479次。在uni-app中,我们可以使用Vue3的全局API来挂载函数到全局。将全局函数挂载到Vue实例上。这样,我们就可以在任何组件中通过。文件中引入了Vue3和我们的全局函数。在这个例子中,我们首先在。来调用这个全局函数了。_uniapp vue3挂在全局变量
文章浏览阅读316次。包含 首页、社区、关于、我的、预约、订购、选购、话题、主题、收货地址、购物车、系统通知、会员卡、优惠券、积分、储值金、订单信息、积分、充值、礼品、首饰等_uniapp婚恋模板
文章浏览阅读419次。了解uni-app是什么,它的优势和适用场景,以及它作为一个跨平台框架的基本概念。如何安装uni-app,包括环境配置和项目创建等步骤。如何进行uni-app项目的目录结构和代码规范的了解,这对于后续的项目开发至关重要。如何进行uni-app项目的打包和发布,以完成从开发到上线的整个过程。实战项目,通过实际操作案例来巩固和应用所学知识,提升解决实际问题的能力。了解HBuilderX的基本概念和主要特点,以及它与uni-app开发的关系。
文章浏览阅读144次。位置:uni_modules/TC-choujiang/components/TC-choujiang/TC-choujiang。注意 :不用管pages目录内文件,因为已经在components内创建组件,直接引用即可。为了防止别人修改抽奖几率,所以写在了云函数(云函数名称jishu)中,大家可以自行修改。里面的商品图片和被抽出商品跳转页面按照实际情况进行修改。商品图片可以从数据库中获取进行赋值即可。调试时请选择 连接云端云函数 进行调试。Uniapp 横向滚动抽奖页面 组件。_uniapp 横向抽奖
文章浏览阅读112次。开发中使用媒体查询来适配大屏小屏,match-media是一个可适配不同屏幕的基本视图组件。 可以指定一组 media query 媒体查询规则,满足查询条件时,这个组件才会被展示。_移动端match-media
文章浏览阅读33次。【代码】Uniapp Vue3 子组件给父组件传值。
文章浏览阅读91次。全端支持,只需引用组件,更改内容即可_uniapp滚动组件
文章浏览阅读26次。【代码】uniapp Vue2 子组件给父组件传值。
文章浏览阅读177次。微信隐私保护弹出框 隐私协议弹出框,微信隐私保护弹出框,支持vue2和vue3_uninapp 实现微信的隐私弹窗
文章浏览阅读82次。uniapp各类按钮,方便大家复制粘贴使用,提高大家的效率。_uniapp button 图片
文章浏览阅读531次。酷炫钱包页面模板 直接引用_uniapp 钱包页面
文章浏览阅读544次。uniapp 微信小程序登录_uniapp 引入wx.login
文章浏览阅读922次。在这个例子中,我们将所有以’/api’开头的请求代理到’http://localhost:3000’。这样,我们就可以在本地开发环境中访问后端服务器了。在uni-app中,我们可以使用vue.config.js文件来配置跨域(代理)。注意:这个配置只在开发环境中生效,生产环境需要另外配置。_uniapp 代理