uniapp转H5 实现微信登录

uniapp转H5 实现微信登录

微信官方文档: 微信官方文档.

在这里插入图片描述
在这里插入图片描述

前端的任务
第一步

开发者需要先到公众平台官网中开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名(这一步是我们项目经理操作的)

第二步

在需要进行微信登录的页面 记性官方第一步的操作

// #ifdef H5
				let url = encodeURIComponent("tsn.dujiaoyu.net"); // 注意一定要encodeURIComponent
				console.log(url);
				window.location.href =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx819aaa71e2c19c91&redirect_uri="授权成功后进入的页面,该页面的域名要和第一步设置的回调域名一致"&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect`
                // #endif
                
第三步

上一步授权成功,在跳转之后的页面链接地址上,会返回code,

// var currentSrc = "https://tsn.dujiaoyu.net/?code="你拿到的code"r&state="
// 拿到code之后
// 调用后端接口,根据后端返回的状态,进行正常的流程
$.ajax({
              type: 'POST',
              contentType: "application/json;charset=UTF-8",
              // dataType: 'jsonp',
              url: `https://tsn.dujiaoyu.net/api/users/weixin/getUserInfoInCode`,
              data: JSON.stringify({
                  code: searchHref
              }),
              success: (res => {
                  console.log(res);
                  if (res.code == 3001) {
                      //去注册
                      if (res.data) {
                          var headimgurl = res.data.headimgurl
                          var openId = res.data.openId
                          var nickname=res.nickname
                          window.location.href = ``
                      }else {
                          showToast(res.message,1000)
                      }
                  }else if(res.code==200){
                      //直接登录 
                      var token=res.data.token
                      var shopId=res.data.shopId
                      var nickName=res.data.nickname
                      var avatarUrl=res.data.avatar
                      var uid=res.data.uid
                      window.location.href=""
                  }
              }),
              error: (error => {
                  console.log(error);

              })
          })

最后
因为项目是用unaipp 转的H5,在写的时候一直不清楚回调返回的那个页面是从哪里来的,我又要怎么才能进入到正常流程的页面,最后的解决办法就是写一个H5页面,进行拿到code之后吊起后端接口的操作 ,然后在跳到项目中的H5链接地址,那自己后来写的H5页面就需要步到那个域名下面.这样就实现了整个流程,但又总觉得不应该是这样的处理办法,希望有大神指点一下下.

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在uniapp中开发H5登录微信公众号并进行联调,有以下几个步骤: 1. 获取微信开发者账号和相关配置信息:首先需要在微信开放平台注册并创建一个开发者账号,然后创建一个微信公众号,并获取相应的AppID和AppSecret等配置信息。 2. 在uniapp项目中配置相关插件:在uniapp项目的manifest.json文件中,添加对应的插件配置,如"@dcloudio/uni-mp-weixin"插件。然后在项目的App.vue中通过uni.login方法获取登录凭证code,并调用uni.request方法发送请求到服务器获取用户的openid和session_key。 3. 前端与后端的联调:根据服务器返回的用户openid和session_key,在前端进行相关的业务逻辑处理,如展示用户信息、跳到其他页面等。其中,服务器端需要处理用户的登录请求,并返回openid和session_key等信息给前端。 4. 微信公众号授权设置:在微信公众号后台设置中,配置网页授权域名和回调地址,并将uniapp项目的H5链接添加到公众号菜单中。 5. 测试和调试:完成以上步骤后,进行测试和调试,确保登录功能在H5中正常使用。可以通过调试工具、日志打印等方式进行定位和解决问题。 总结:在uniapp开发H5登录微信公众号的联调过程中,需要进行微信开发者账号和相关配置的准备,配置相关插件和设置,前端与后端的联调,以及进行测试和调试。通过这些步骤,可以实现uniapp项目中登录微信公众号并进行H5联调。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值