如何从小程序跳到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&; }，这时当你满怀希望地点击链接时，第一个障碍就出现了:自由网络开发者

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

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

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

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

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

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

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

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

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

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

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