uniapp连接后端（uni-app打开外部链接方式汇总(h5&app)）

问题描述

在应用中打开一个外部的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的参数基本一致