文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

uniapp打开外部链接方式有哪些

2023-07-05 05:00

关注

这篇“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打开外部链接方式有哪些”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯