VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云优惠活动

如何从小程序跳到H5页面?(实例分析)(如何通过小程序跳转到h5)

主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

如何从小程序跳转H5页面?下面这篇文章介绍了微信小程序跳转H5页面的方法,希望能帮到你!

如何从小程序跳到H5页面?(实例分析)(如何通过小程序跳转到h5)

所以我们在微信小程序和H5页面之间的跳转是有可能的,但是这种跳转是被微信浏览器严格控制的,所以我们有必要知道这些控制包括哪些内容。

假设你需要转的H5页面的网址是https://www.mysite.com/h5page,,那么这里所说的域名是www.mysite.com,你没有看错。此URL必须是https。如果您的网站还没有添加SSL,请先申请证书(注意必须是公开申请的证书,不能自签名。微信不认!)

好了,这些都准备好了,我们开始开发一个小例子。

因为web-view组件是全屏组件,不能和其他小程序组件共享,所以需要独立占用一个页面。所以,我们的例子是在小程序的A页面添加一个链接,跳转到B页面,然后使用B页面上的web-view组件加载H5页面。

第一页

ltview class = 回答者flex -wrp ;bindtap = # 39jumpToH5 # 39 gt ltview class = avatar flex -item ; gt ltimage src = /images/logo -small . jpg ; gt lt/image gt; lt/view gt; ltview class = 回答-info flex -item ; gt lttext class = answer -name ; gt标题

ltweb -view src = ;{ { link } } bindmessage = getMessage gt lt/web -view gt;数据:{ link: ;https://www.mysite.com/h5page&; },这时当你满怀希望地点击链接时,第一个障碍就出现了:自由网络开发者

1.png

这是什么鬼东西?原来使用web-view组件是任何上来的人都不允许的。这时候就需要进行第一次授权,就是授权开发者使用这个组件。这里可笑的是,这个组件虽然是小程序用的,但是不能在小程序开发号里设置,必须在订阅号或者服务号里设置。下面这张截图,经常能在网上找到,只有登录订阅号或者服务号才能看到。

2.png

在这里设置好开发者绑定的微信号后,我们终于可以使用web-view组件了,但这时又出现了一个新问题:不支持打开非商业域名。

3.png

原来光拿网址是无法设置跳转的。不能在你的小程序中直接跳转到百度,小程序可以跳转到的域名必须在商务域名中注册。最后,这次是在小程序开发号里设置的,但是注意服务号设置里还有业务域名设置,不要混淆(说微信名字太没想象力,简直就是一坨浆糊)。

设置好这个商业域名,欢天喜地的打开小程序,点击链接,什么!再次,这次的问题变成了:redirect_uri参数错了。

4.png

此时控制权已经从小程序转移到H5页面,但是微信页面跳转的内部机制比较复杂,涉及OAuth认证之类的,所以这个错误已经被H5页面上报,需要在H5页面关联的服务号中设置。这次设置的项目叫网页授权域名,在微信官方账号的功能设置中设置。

5.png

添加完需要跳转的域名后,终于可以在调试器上看到H5页面了!

最后,普及一下微信公众平台三类账号的区别。

【相关学习推荐:小程序开发教程】以上是小程序如何跳转到H5页面的简要分析?(实例分析)详情请多关注主机参考其他相关文章!

这几篇文章你可能也喜欢:

本文由主机参考刊发,转载请注明:如何从小程序跳到H5页面?(实例分析)(如何通过小程序跳转到h5) https://zhujicankao.com/74827.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 如何从小程序跳到H5页面?(实例分析)(如何通过小程序跳转到h5)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!