小程序跳转第三方H5连接

小程序web-view的用法

小程序的开发，若有涉及到公司平台的活动或者新闻列表，从而快速便捷推广一些第三方连接的新闻或者文章。 在小程序中，要从主体页面直接跳转到第三方H5页面，例如跳转到www.baidu.com，须要经过web-view组件来实现，web-view是一个能够用来承载网页的容器，它会自动铺满小程序整个页面。承载web-view最好是新开一个新的页面。

<template>
  <web-view :src="url"></web-view>
</template>

<script>
export default {
    name: "web-view",
    data() {
      return {
        url: ''
      }
    },
    onLoad: function(options) {
      // 解码
      this.url = decodeURIComponent(options.url);
    },
};
</script>
<style>
  page {
    height: 100%;
  }
  .webViewWrap {
    width: 750rpx;
    height: 100%;
  }
</style>
复制代码

小程序跳转

uni.navigateTo({
  //避免在连接中带有中文字符，在 iOS 中会有打开白屏的问题，建议跳转的时候加一下 encodeURIComponent
  url: `/pages/webView/index?url=${encodeURIComponent(url)}`
})
复制代码

注意

   推送的文章或者第三方必定要配置合法域名，本地开发能够在微信开发者工具的本地设置栏木上去除不检验合法域名选项，而后用真机测试便可生效。线上须要配置合法的域名信息，不然，微信安全设置将阻止用户正常打开页面。