亲宝软件园·资讯

展开

uni-app打开外部链接方式总结(h5和app)

成江 人气:0

问题描述

在应用中打开一个外部的html页面,即完整http链接的页面。h5通过window.open或是内嵌iframe基本都没有问题,本文主要针对app端的方法进行汇总,不涉及到小程序端。

方案1

使用uni-app的扩展组件 uni-link,使用参考文档uni-app官网

该组件的行为是在app内打开外部浏览器,在h5打开新网页。

方案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属性,具体参数支持比较多,参考文档​​​​​​​​​​​​​​HTML5+ API Reference

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组件在h5中也是使用iframe实现,但是dom嵌套层级太多,不方便控制宽高,所以这里就直接按条件编译,在h5中用iframe。uni-app官方也是推荐h5中使用iframe。

app的标题栏需要通过pages.json来控制,如下参考,具体文档见​​​​​​​uni-app官网

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

这里titleNView的设置和方案3api的参数基本一致

总结

加载全部内容

相关教程
猜你喜欢
用户评论