当前位置:首页 > uni-app

uniapp 外部连接

2026-03-05 01:14:27uni-app

在 uniapp 中打开外部链接

使用 uni.navigateTo 无法直接打开外部链接,需要借助 WebView 或浏览器打开。

在页面中嵌入 WebView 组件加载外部链接:

uniapp 外部连接

<template>
  <web-view src="https://example.com"></web-view>
</template>

通过浏览器打开外部链接

调用系统浏览器打开链接:

uni.navigateTo({
  url: '/pages/webview/webview?url=' + encodeURIComponent('https://example.com')
})

或直接使用:

uniapp 外部连接

plus.runtime.openURL('https://example.com')

处理 App 端外部链接

在 manifest.json 中配置 URL 跳转规则:

"plus": {
  "schemes": {
    "myapp": {
      "url": "https://example.com"
    }
  }
}

H5 端链接处理

在 H5 端可以直接使用 <a> 标签:

<a href="https://example.com" target="_blank">打开链接</a>

注意事项

  • iOS 需要配置白名单
  • 安卓可能需要配置 intent-filter
  • 微信小程序需要配置业务域名
  • 部分平台会限制非 HTTPS 链接

标签: uniapp
分享给朋友:

相关文章

uniapp 消息推送

uniapp 消息推送

uniapp 消息推送实现方法 使用uniPush服务 uniapp官方提供了uniPush服务,支持iOS、Android及小程序平台的消息推送。需要在manifest.json中配置推送模块,并按…

uniapp安装uview

uniapp安装uview

安装uView到UniApp项目 方法一:通过npm安装(推荐) 确保项目已初始化npm,在项目根目录执行以下命令: npm install uview-ui 在main.js文件中引入并注册uV…

uniapp旋转横屏

uniapp旋转横屏

实现横屏模式的方法 在UniApp中实现横屏模式,可以通过配置页面方向或使用CSS旋转实现。以下是两种常见方法: 修改manifest.json配置 在项目的manifest.json文件中…

uniapp实现标题栏渐变

uniapp实现标题栏渐变

实现标题栏渐变的方法 在UniApp中实现标题栏渐变效果,可以通过修改页面的导航栏样式或使用自定义导航栏来实现。以下是几种常见的方法: 方法一:使用原生导航栏渐变 通过修改pages.json中的…

精通uniapp

精通uniapp

掌握UniApp的基础知识 UniApp是一个基于Vue.js的跨平台开发框架,支持一次开发多端部署(如H5、小程序、App等)。核心概念包括Vue语法、组件化开发、条件编译(针对不同平台适配)以及U…

uniapp擎

uniapp擎

uniapp 引擎简介 uniapp 是一个基于 Vue.js 的开发框架,允许开发者使用一套代码同时构建跨平台应用(如 iOS、Android、H5、小程序等)。其核心引擎负责将 Vue 语法转换为…