目录：

1. 基本使用
2. 小程序给H5传参
3. H5给小程序传参
4. 小程序跳H5页面
5. H5跳到小程序

1、基本使用

　　标签 + 使用页面路径

　　ps：需要在小程序管理后台配置域名白名单

<web-view src="http://www.baidu.com"></web-view>

2.小程序跳转H5页面

　　因为h5是小程序引入的页面，所以小程序跳转H5也就是小程序跳转小程序页面。

3.小程序给h5传参

<web-view src="http://www.baidu.com?id=123123"></web-view>

<script>
//js获取url参数
    let id = getUrlParam('id'); 
</script>

//vue获取参数
this.Id = this.$route.query.Id;
//详情参考：https://www.jianshu.com/p/adca66e1a473

 

4.H5跳转小程序页面。

　　首先在html中引入js文件，https://res.wx.qq.com/open/js/jweixin-1.3.0.js

　　然后就可以在h5中使用小程序的部分api，如wx.miniProgram.navigateTo、wx.miniProgram.navigateBack、wx.miniProgram.switchTab、wx.miniProgram.reLaunch、wx.miniProgram.redirectTo等

wx.miniProgram.navigateTo({
          url:'/pages/index/index?id=xxx',
          success: function(){
              console.log('success')
          },
          fail: function(){
              console.log('fail');
          },
          complete:function(){
              console.log('complete');
          }
     });

5.h5给小程序传参

　　同上

 

参考：

https://www.cnblogs.com/cap-rq/p/11597836.html

https://blog.csdn.net/liya_nan/article/details/82622013

其他:

　　　<web-view>引入的页面，导航栏内容为引入的h5页面的title内容