微信小程序内嵌h5,h5自动登录功能实现

在实现这个功能之前,我们得先了解两个概念,code, openid,Unionid。

code 是小程序登录 或者 h5授权登录 后,微信给的一个临时凭证,这个凭证有效期五分钟。开发者需要在开发者服务器后台调用 code2Session,使用 code 换取 openid、unionid、session_key 等信息。

openid 是微信给某个用户在某个应用下生产的一个id,同一个用户在同一个主题下的不同应用生产的openid不同。

unionid 是微信开放平台为同一个微信用户在同一个开放平台账号下的不同公众号或小程序提供的一个全局唯一的标识符。

比如,主体是A企业,A企业下面有应用小程序,H5, app,那么这个三个应用里面,同一个用户的openid不同,但是unionid相同。

回到主题,那么我们已知,同一个主体,比如 主体A,下面有一个小程序,一个h5,现在用户已经在小程序上登录了,然后访问内嵌h5,这个时候h5里面用户是没有登录的,那么怎么获取呢?

内嵌h5自动登录

在小程序的webview页面,src加上一个code,比如,https://www.h5.cn?code=324g3241934ujx8ufh3kfjhei

然后h5通过url拿到code,需要请一个后端接口,吧code传给后端

后端调用微信接口 GET https://api.weixin.qq.com/sns/jscode2session ,拿到openid,unionid,

通过unionid拿到用户信息,然后连同token一起返回给h5

这样h5就登录了。

  • 11
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序是一种轻量级的应用程序,可以直接在微信内部运行。与传统的H5页面不同,微信小程序具有更快的加载速度、更高的交互性、更多的功能和更好的用户体验。但是,有些时候,为了满足用户的需求,我们可能需要在微信小程序中嵌入H5页面。 在微信小程序中嵌入H5页面的过程分为两个步骤: 1. 生成微信小程序的web-view组件,这个组件可以承载H5页面。 2. 在H5页面中引入微信提供的JS-SDK,通过JS-SDK调用微信小程序的API,实现在小程序内嵌H5页面的效果。 下面是具体步骤: 1. 在微信小程序的wxml代码中,添加web-view组件,代码如下: <web-view src="{{url}}"></web-view> 其中,url是要嵌入的H5页面的URL地址。 2. 在H5页面中引入微信提供的JS-SDK,代码如下: <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> 3. 在H5页面中使用JS-SDK调用微信小程序的API,实现在小程序内嵌H5页面的效果,代码如下: <script> wx.miniProgram.navigateTo({ url: '/pages/webview/webview?url=' + encodeURIComponent(window.location.href) }); </script> 以上代码实现的功能是,在H5页面中调用微信小程序的API,跳转到小程序页面,并把当前页面的URL地址通过query参数传递给小程序页面。 需要注意的是,在使用微信小程序内嵌H5页面时,需要遵循微信小程序的一些规则,比如必须使用HTTPS协议、不能跳转到其他小程序等。同时,也要注意H5页面的适配性,确保在小程序中的显示效果与在浏览器中一致。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值