小程序 web-view跳转h5页面方法 (包含Query参数丢失解决办法)

1. <web-view>

小程序跳转h5页面，需要官方提供的承载网页的容器，即<web-view>，自动铺满整个小程序的页面。

官方传送地址：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

使用方法：
在项目中建立一个承载h5页面的 .vue 的文件，以【/pages/h5/index】：

<template>
  <view>
    <web-view
      :src="url"
    />
  </view>
</template>
<script>
  export default {
    data() {
      return {
        url: '', // h5的地址
      };
    },
    onLoad(options) {
      let url = options.url;
      this.url = decodeURIComponent(url);
    },
  };
</script>
<style lang="scss" scoped>

</style>

需要跳转h5页面的小程序中某个.vue文件

// 点击跳转h5的按钮
goH5Page(){ 
  uni.navigateTo({ url: `/pages/h5/index?url=${encodeURIComponent(this.h5Url)}` }); // 这里地址里的Query参数url指的是即将跳转的h5的地址
},

---

2.这里需要注意的是：

小程序跳转h5页面时，h5地址后面如果有Query参数时，会被自动忽略，只会取地址中的域名的那部分。
例：https://www.csdn.net/?spm=xxxxx 只会取到：https://www.csdn.net/
后面的spm参数会被忽略。。。

△ 解决：
使用encodeURIComponent 和 decodeURIComponent
对 URL 地址进行编码和解码