微信小程序怎么跳转H5页面

在微信小程序内要跳转至外部的H5页面，做法比较简单。可以看到微信官方文档中，微信小程序提供了承载网页的容器： web-view，通过这个容器，其实可以实现在小程序内打开一个H5页面。也就是可以在小程序中设置一个空白页面，专门用于打开此类外部H5页面。具体做法如下：

1、在小程序内新建一个空白页面，内置web-view容器，用于承载网页

index.wxml 文件：

<view class="page-body">
  <web-view src="{{targetUrl}}"></web-view>
</view>

index.js文件

Page({
  data: {
   targetUrl: '' // 打开的h5页面的地址
  },
  onLoad: function(option){
    console.log('传过来什么地址', option.targetUrl)
    this.setData({
      targetUrl: option.targetUrl
    })
    const eventChannel = this.getOpenerEventChannel()
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log('上个页面传来了', data)
    })
  }
})

如上所示，可以在onload钩子中，获取上个页面跳转过来时传递的地址，也可以监听acceptDataFromOpenerPage事件，获取上个页面通过eventChannel传递过来的更多的数据，然后再web-view容器中，绑定src参数，打开对应的外部H5页面即可。

2、在要跳转的小程序的页面的JS事件中，设置跳转地址及传递参数

goH5Page(e) {
    var targetUrl = 'https://www.baidu.com';
    // 跳转h5页面需要包装在小程序内，不能直接跳转
    wx.navigateTo({
      url: `../outside/index?targetUrl=${targetUrl}`,
      success: function(res) {
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
      }
    })
  }

其中，这里的 /outside/index 指的是新建好的用于承载外部H5页面的空白页面

wx.navigateTo会跳转至对应的页面，并可以通过url直接传值如targetUrl，也可以通过eventChannel向被打开页面传送数据data。

由此，在现有页面触发goH5Page事件时，就会跳转至承载了H5页面的小程序页面，但其实还是在小程序内。

注意，web-view容器会自动铺满整个小程序页面，另外个人类型的下程序暂时不支持使用。