浅析如何从小程序跳到H5页面？（示例解析）

浅析如何从小程序跳到H5页面？（示例解析）
如何从小程序跳到H5页面？下面本篇文章给大家介绍一下微信小程序跳转到H5页面的方法，希望对大家有所帮助！

如何从小程序跳到h5页面？下面本篇文章给大家介绍一下微信小程序跳转到h5页面的方法，希望对大家有所帮助！

微信小程序：虽然开发方法类似网页，但实际上是一种只能运行在微信自己开发的浏览器中的特殊网页，它所能够使用的所有功能都必须由微信浏览器提供；H5页面：这是真正的网页应用，运行在通用浏览器中，各种浏览器虽然在细微上有所差别，但总的来说是一致的，微信浏览器同时也是一种通用浏览器，能够支持真正的网页应用。

因此我们才有可能在微信小程序和H5页面之间进行跳转，但这种跳转是受到微信浏览器的严格控制的，因此我们有必要了解这些控制包括哪些。

H5页面所在的域名：假设你需要调转的H5页面URL为https://www.mysite.com/h5page，那么这里所说的域名就是www.mysite.com，另外你没有看错，这个URL必须是https，如果你还没有为你的网站加上SSL，那么就先去申请一个证书吧（注意必须是公开申请的证书，不能是自签名的，微信不认哦！）

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

由于web-view组件是一个全屏组件，不能和其它小程序组件合用，因此需要独立占据一个页面，所以我们到例子就是在小程序的A页面加一个链接，跳转到B页面，然后在B页面使用web-view组件来加载H5页面。

A页面

<view class="answerer flex-wrp" bindtap=&#39;jumpToH5&#39;> <view class="avatar flex-item"> <image src="/images/logo-small.jpg"></image> </view> <view class="answerer-info flex-item"> <text class="answerer-name">文章标题</text> <text class="answerer-des">文章摘要</text> </view> <view class="follow flex-item"> <text>十 关注</text> </view></view>