uniapp 微信小程序跳转外部链接

一、背景:

开发小程序时,跳转到内部路径通常会使用:uni.navigateTo,uni.redirectTo,uni.reLaunch,uni.switchTab等方法,可以跳转到pages.json中已经注册的页面

uni.navigateTo(OBJECT) | uni-app官网

跳转到外部链接,便不能再使用以上方法,需要利用web-view来实现需求

web-view | uni-app官网

二、实现步骤

2.1、展示效果

2.2、pages.json中创建index与webView两个页面

2.3、在index页面点击按钮跳转到webView页面

**备注:**跳转时携带需要访问的外部路径

javascript 复制代码
<template>
	<view class="content">
		<button @click="goto">跳转到CSDN</button>
	</view>
</template>

<script>
	export default {
		methods: {
			goto(){
				//需要跳转的外部路径
				let url = 'https://blog.csdn.net/weixin_71403100/article/details/135416379?spm=1001.2014.3001.5501'
				uni.navigateTo({
					url:'/pages/webView/webView?url='+url
				})
			}
		}
	}
</script>

2.4、webView页面接收传递的路径,利用web-view标签进行跳转

javascript 复制代码
<template>
	<view>
		<web-view :src="url"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:''
			};
		},
		onLoad(e) {
            //接收传递的访问地址
			this.url = e.url
		}
	}
</script>

三、业务域名问题

3.1、开发跟测试时在本地中打开不校验合法域名

3.2、预览和发布正式版时要在小程序管理后台配置业务域名

**3.2.1问题:**我在开发测试时选择的不校验合法域名,在微信开发者工具点击跳转到CSDN按钮是可以正常跳转的,但是我在手机上进行预览时是无法跳转到CSDN地址的,下面是手机预览跳转时的效果👇

**3.2.2解决:**需要在小程序管理后台配置业务域名

路径👉:登录微信公众平台(微信公众平台),在左侧找到开发/开发管理,进入找到开发工具,其中有一项是配置业务域名👇

**备注:**个人开发的小程序在开发工具中是没有业务域名这一项的,所以个人开发的小程序配置不了业务域名

3.2.3配置域名后的效果:

在配置业务域名后,我预览时跳转的地址就不能再是CSDN了,需要将地址更改成已配置的业务域名地址

手机预览效果:👇

**最后,**👏👏 😀😀😀 👍👍

相关推荐
云霄IT6 分钟前
新版电脑微信4.1.x.x小程序逆向之——寻找小程序存放位置目录和__APP__.wxapkg
java·微信·小程序
wmsj057826 分钟前
微信小程序上的图片怎么批量下载?附工具教程
小程序
鸭鸭梨吖27 分钟前
微信小程序输入框---模糊搜索
微信小程序·小程序·notepad++
2501_9151063242 分钟前
iOS 应用加固与苹果软件混淆指南,如何防止 IPA 被反编译与二次打包?
android·ios·小程序·https·uni-app·iphone·webview
Stringzhua2 小时前
微信小程序快速入门【02】
微信小程序·小程序
赵庆明老师3 小时前
Uniapp微信小程序开发:全局变量的使用
微信小程序·小程序·uni-app
2501_915921434 小时前
iOS 应用加固与苹果软件混淆全解析 IPA 文件防反编译、混淆加密与无源码加固策略
android·macos·ios·小程序·uni-app·cocoa·iphone
2401_885405514 小时前
定位守护童年,科技构筑安全屏障
科技·物联网·安全·小程序·宠物·web app·智能手表
lvchaoq5 小时前
记录小程序真机bug,而模拟器无法复现
小程序·bug
Jyywww1215 小时前
uniapp uni.chooseImage+uni.uploadFile使用方法与详解
开发语言·javascript·uni-app