小程序跳轉第三方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)}`
})
複製代碼

注意

   推送的文章或者第三方必定要配置合法域名，本地開發能夠在微信開發者工具的本地設置欄木上去除不檢驗合法域名選項，而後用真機測試便可生效。線上須要配置合法的域名信息，不然，微信安全設置將阻止用戶正常打開頁面。