小程序跳转第三方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)}`
})

注意

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