小程序

 目錄：

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內容