uni-app，在app和h5中如何跳转至外部链接？

最新推荐文章于 2024-08-15 11:07:10 发布
最新推荐文章于 2024-08-15 11:07:10 发布
阅读量6.5k 收藏 4
点赞数 2
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XZGDWYH/article/details/117356777
版权
本文介绍了uni-app在H5和APP端跳转外部链接的方法。在H5环境中，使用`window.location.href`实现跳转；而在APP端，借助`plus.runtime.openURL`完成。注意跳转链接需以`https://`开头。
摘要由CSDN通过智能技术生成

uni-app在app和h5中跳转至外部链接的方式有所不同，需要进行条件编译

1、在h5端的跳转

// #ifdef H5
window.location.href=this.url;
// #endif

this.url为你需要跳转到的外部链接，需要是https://开头，才能识别是外部链接

2、在APP端的跳转

	// #ifdef APP-PLUS
		plus.runtime.openURL(this.url);
	// #endif
努力拼搏的小王同学
关注
基于uni-app和colorUI开发H5初始模板
12-22
非常简单，使用方便
Echarts.zip（适用uni-app App端和H5端的echarts图表组件）
05-27
在uni-app框架中，Echarts可以用于App端和H5端的图表展示，这使得开发者能够在多种平台上保持一致的视觉效果。 1. **uni-app介绍**：uni-app是H5、小程序、App多端开发框架，由DCloud(即海豚浏览器团队)推出。它...
uni-app打开外部链接方式汇总
最新发布
weixin_42333548的博客
08-15 985
App平台可以使用 plus.runtime.openURL、plus.runtime.openWeb或web-view组件；1. 在App内部打开一个浏览器，加载这个地址，在App端打开，这个方法会新开内置窗口打开页面，而且自带标题栏和返回。注意：web-view组件可能会存在跨域，比如你要打开一个发布的公众号页面，web-view肯定是会跨域。在应用中打开一个外部的http/https链接的页面，h5通过window.open或是内嵌。该组件的行为是在app内打开外部浏览器，在h5打开新网页。
【UniApp】uniapp跳转外部链接的方式
m0_61049675的博客
07-29 2193
在uniapp中，跳转外部链接的方式主要依赖于应用运行的平台（如H5、App、微信小程序等），因为不同平台对外部链接的处理方式有所不同。
uniApp-h5端跳转外链
Amen的博客
02-24 4137
跳转外链只能h5，公众号可以实现，小程序不支持跳转外链 链接必须是http / https 开头 否则跳转是 路由后面拼接上跳转地址 // #ifdef H5 window.location.href=http://www.baidu.com; // #endif
uniapp访问外部页面链接
The_Night_Shadow的博客
01-22 1722
uniapp上需要注意配置好对应的router路径！
uniapp 编写h5遇到需要跳转其他网址解决方法
qq_34741156的博客
07-08 3341
现在使用uniapp 编写代码，无论编译成h5 还是 小程序都很方便，而且h5 通过它编写后，也不用在考虑自适应问题了，真的很方便，但是，h5 或小程序里面需要添加一个跳转链接怎么办呢？
uni-app页面通过点击跳转至外部链接
m0_58293192的博客
10-26 5458
uni-app页面通过点击跳转至外部链接
uniapp跳转 外部网页 h5和app端
m0_47668952的博客
05-27 6417
aboutLearnMore() { // 跳转外部链接h5 // #ifdef H5 window.location.href = 'http://www.baidu.com'; // #endif // #ifdef APP-PLUS plus.runtime.openURL('http://www.baidu.com') //不需要拼接 // plus.runtime.openURL(`http://${jumpUrl}`)//需要拼接 ...
uni-app 打包为 H5 并上传服务器
01-08
总的来说，将uni-app打包为H5并上传至服务器是一个涉及配置、打包、上传等多个步骤的过程，每个环节都需要细心处理，以确保应用能顺利地在Web环境下运行。在实际操作中，根据项目的特性和服务器环境，可能还需要进行...
Custom-scanCode-for-uni-app:uni-app中h5+自定义二维码扫码界面
05-12
综上所述，"Custom-scanCode-for-uni-app"项目提供了在uni-app中实现H5+自定义二维码扫描界面的解决方案，通过结合原生扫码能力和H5界面设计，开发者可以创建具有个性化特色的扫描功能。理解和运用这些知识点，对于...
uniapp转换成html界面,在uni-app项目中跳转链接到一个HTML5页面
weixin_39611765的博客
05-30 2258
打开HBuilder，右键新建项目，任意命名即可建好后在 pages.json能看到 已被自动添加页面页面跳转传参，修改前面创建的那个页面即可var wv;//计划创建的webviewexport default {onReady() {// #ifdef APP-PLUSvar currentWebview = this.$scope.$getAppWebview() //此对象相当于html5...
uni.location与Window.location.href
柏舟的博客
06-30 4460
在H5页面使用Window.location.href来跳转地址是没有问题的，在把H5转化为小程序是遇到要携带地址跳转是把Window.location.href改为uni.location就好了。1.当时用H5的Window.location.href时 2.当时用uniapp的uni.location.时，点击考勤就可以携带当前地址跳转页面了...
微信小程序内嵌h5页面或者跳转至外部链接，及在webview页面添加元素
07-02 1795
方法很简单，只需要在wxml里写上 <web-view src="http://www.baidu.com"></web-view> 这样这个小程序页面就会显示链接里的地址内容了
uniapp h5调起第三方应用_聊聊关于H5的那些测试点
weixin_39974882的博客
12-03 647
在我们平常的测试的过程中，会遇到一些H5页面的测试，对于H5的测试，本人在测试的过程中曾经遇到一些坑，为了避免大家犯同样的错，总结出来供大家参考。这里告诉大家一个通用的思考方式，在实际工作和面试过程中你可以这样应用，面试官一般情况下是找不到任何的毛病的。在拿到一个项目后，我们主要通过以下方面去考虑测试：功能测试、UI测试、兼容性测试、性能测试、安全测试、网络测试。如果是APP的话，需要加...
uniapp 路由跳转的几种方式（包含跳转到外部链接）
热门推荐
weixin_50606255的博客
07-01 2万+
1.navigateTo（保留当前页面，跳转到其他页面，使用navigateTo可以返回上一页） uni.navigateTo({ url:'./straSettings' }); 2.reLaunch（关闭所有页面，跳转到其他页面） uni.reLaunch({ url:'./straSettings' }) 3.redirectTo（关闭当前页面，跳转到其他页面） uni.redirectTo({ url:'./straSettings' }) 4.switchTab（适用于..
uniapp 跳转到外部链接
qwe19991123的博客
01-19 2415
window.location.href = 'https://' + link 一定要加 https://
uniapp 从当前网页跳转到外部网页
颜良文丑的博客
06-01 6610
不同地址之间的网页跳转，切换方法。
uni-app打包app 嵌套h5跳转外部链接怎么返回
03-31
在uni-app中，如果要在嵌套的H5页面中跳转到外部链接，并且需要返回到上一个页面，可以使用uni-app提供的uni.navigateBack()方法。 在H5页面中跳转到外部链接时，可以使用window.location.href来实现： ``` window.location.href = 'https://www.example.com'; ``` 当需要返回时，可以在uni-app中使用uni.navigateBack()方法： ``` uni.navigateBack({ delta: 1 // 返回上一个页面 }); ``` 其中，delta表示返回的页面数，如果是返回上一个页面，则设置为1即可。如果需要返回更多层，则可以设置为2、3等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值