uniapp打開外部鏈接方式有哪些

這篇“uniapp打開外部鏈接方式有哪些”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“uniapp打開外部鏈接方式有哪些”文章吧。

問題描述

在應用中打開一個外部的html頁面，即完整http鏈接的頁面。h6通過window.open或是內嵌iframe基本都沒有問題，本文主要針對app端的方法進行匯總，不涉及到小程序端。

方案1

使用uni-app的擴展組件 uni-link，使用參考文檔uni-app官網

該組件的行為是在app內打開外部瀏覽器，在h6打開新網頁。

方案2

方案1app端打開外部瀏覽器，在使用體驗上會有一種割裂感

查看uni-link的源碼，發現app端調用的是plus.runtime.openURL方法，

可以在這個基礎上進行優化，使用plus.runtime.openWeb替代app打開,這個方法會新開內置窗口打開頁面，而且自帶標題欄和返回，安卓端的隱私協議文件(androidPrivacy.json)的內容中a標簽調用的即是這個方法

void plus.runtime.openWeb(url);

參數：url: ( String ) 必選 要打開的URL地址 ，僅支持http/https地址
注意標題會讀取載入html的title屬性，如果沒有的話標題顯示為空

方案3

使用app-plus的webview模塊api進行管理，
plus.webview.open( url, id, styles, aniShow, duration, showedCB )或是plus.webview.create( url, id, styles, extras );

這兩個方法都支持通過style屬性控制標題欄的樣式，如果不設置標題文字，則讀取加載的html的title屬性，具體參數支持比較多，

const wv = plus.webview.open(query.src, 'webview', {
        titleNView: {
          autoBackButton: true,
          titleColor: '#fff',
          backgroundColor: '#0045c4',
          titleAlign: 'center',
        },
      })
      // wv.show()

該方案存在問題是返回操作在ios和安卓上不太一致，還可能會清除uni-app的頁面路由管理，不建議使用

方案4

使用uni-app的webview組件進行加載，及新建一個路由頁面，/pages/webview，內容只放一個webview

<template>
  <view v-if="src">
    <!-- #ifdef H5 -->
    <iframe width="100%" height="100%" :src="src" :title="title" />
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <web-view :webview-styles="wbStyles" :src="src" :fullscreen="false" />
    <!-- #endif -->
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      title: '',
      src: '',
      wbStyles: {
        width: '100%',
        height: '100%',
      },
    }
  },
  onLoad(option) {
    this.title = option?.title
    this.src = option?.src
  },
}
</script>

webview組件在h6中也是使用iframe實現，但是dom嵌套層級太多，不方便控制寬高，所以這里就直接按條件編譯，在h6中用iframe。uni-app官方也是推薦h6中使用iframe。

app的標題欄需要通過pages.json來控制

{
    "path": "webview/index",
    "style": {
      "app-plus": {
        "titleNView": {
          "backgroundColor": "#0045c4",
          "titleAlign": "center",
          "titleSize": "16px",
          "backButton": {
            "fontSize": "20px",
            "fontWeight": "bold"
          }
        }
      }
    }
  }

這里titleNView的設置和方案3api的參數基本一致。

以上就是關于“uniapp打開外部鏈接方式有哪些”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。