很多做小程序开发的朋友都遇到过一个问题：想让小程序里的按钮跳转到外部链接（比如公司官网、博客文章、活动页面），结果用平时跳内部页面的方法试了半天，根本没反应！别慌，今天就给大家分享一套“uni-app开发微信小程序跳转外部链接”的完整方案，从配置到落地，每一步都讲清楚，新手也能跟着做～
一、为什么跳外部链接需要特殊处理？
在开发微信小程序时，跳转到小程序内部页面（比如从首页跳详情页），我们常用uni.navigateTo、uni.redirectTo、uni.reLaunch这些官方提供的方法——只要页面在pages.json里注册过，就能轻松跳转。
但如果要跳转到小程序之外的外部链接（比如CSDN文章、百度搜索页），上面这些方法就完全不管用了。这时候，我们需要借助 uni-app 里的【web-view组件】——它相当于在小程序里嵌入一个“迷你浏览器”，专门用来加载外部的网页链接。
二、4步实现外部链接跳转
接下来咱们一步步来，从页面配置到代码编写，每一步都附详细说明，大家可以直接复制参考（注意别写错路径）。
第一步：先在pages.json里注册2个关键页面
要实现跳转，需要先准备两个页面：
index页：放一个“触发跳转的按钮”（比如“跳转到博客”按钮）；
webView页：专门用web-view组件加载外部链接（相当于“中转站”）。
打开项目里的pages.json文件，在pages数组中添加这两个页面的配置。
{
"pages": [
// 第一个页面: index页(启动页/功能页,放跳转按钮)
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "我的小程序"
}
},
// 第二个页面: webView页(承载外部链接)
{
"path": "pages/webView/webView",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": { // 修正字段大小写
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
第二步：在index页加个“跳转按钮”，并传外部链接
在index页面（也就是用户能看到的页面）里，添加一个按钮，点击按钮时，把要跳转的外部链接作为“参数”，传给webView页。
打开pages/index/index.vue，写如下代码：
<template>
<view class="content">
<button @click="gotoExternalLink">跳转到CSDN文章</button>
</view>
</template>
<script>
export default {
methods: {
gotoExternalLink(){
//1. 定义要跳转的外部链接（替换成你的目标链接）
let targetUrl = 'https://blog.csdn.net/weixin_71403100/article/details/135416379?spm=1001.2014.3001.5501'
//2. 跳转到webView页，并把外部链接传过去
uni.navigateTo({
url:'/pages/webView/webView?url=' + targetUrl
})
}
}
}
</script>
这里要注意：
url: '/pages/webView/webView?url=' + targetUrl这行代码里，?url=是“传参数”的格式，后面跟的是你要跳转的外部链接，别漏了符号～
第三步：在webView页接收链接，用web-view加载
webView页的作用是“接住”从index页传过来的外部链接，再用web-view组件把链接打开。
打开pages/webView/webView.vue，写如下代码：
<template>
<view>
<web-view :src="currentUrl"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
currentUrl:'' //用来存从 index页传过来的外部链接
};
},
onLoad(options) {
//接收传递的访问地址
this.currentUrl = options.url || "
}
}
</script>
这里的onLoad(options)是 uni-app 的“页面加载生命周期”，只要页面一打开，就会自动执行，帮我们拿到index页传过来的外部链接，然后把链接绑定到web-view的src属性上，就能加载外部页面了。
第四步：看效果！本地调试先试手
写好代码后，打开微信开发者工具，运行小程序：
1. 进入index页，点击“跳转到 CSDN 文章”按钮；
2. 会自动跳转到webView页，然后加载出目标外部链接（比如CSDN文章页）；
3. 此时在外部页面里的操作（比如滑动、点击），都能正常进行。
三、注意避坑！域名配置的那些事儿
很多小伙伴会遇到一个问题：本地调试能跳转，一用手机预览就提示“无法打开该页面”——这其实是“业务域名”没配置的问题，咱们分情况说清楚：
情况 1：开发/测试阶段，本地调试不用配域名
在微信开发者工具里调试时，我们可以暂时“关闭域名校验”，这样不用配置也能跳外部链接。操作步骤：
1. 打开微信开发者工具，找到顶部菜单栏的【详情】；
2. 点击【本地设置】，勾选“不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书”；
3. 重新运行小程序，本地跳转就能正常用了。
情况 2：预览/正式发布，必须配置“业务域名”
如果要在手机上预览，或者把小程序发布到线上，就必须在微信公众平台配置“业务域名”——只有配置过的域名，才能通过web-view加载。
配置步骤：
1. 登录【微信公众平台】，进入你的小程序后台；
2. 在左侧菜单找到【开发】→【开发管理】→【开发设置】；
3. 找到“业务域名”选项，点击【修改】，把你要跳转的外部链接的域名（比如blog.csdn.net）添加进去；
4. 按提示完成验证（需要下载验证文件，放到域名对应的服务器根目录，并确保可通过https://你的域名/验证文件名.txt访问），验证通过后，域名就配置好了。
重要提醒：
1. 个人主体的小程序，在后台是没有“业务域名”配置入口的！也就是说，个人小程序无法实现正式版跳转外部链接，如果是企业需求，建议用企业主体注册小程序。
2. 配置的业务域名必须经过ICP备案，且必须支持HTTPS。
3. 配置好业务域名后，index页里的targetUrl必须是“该域名下的链接”（比如你配置了blog.csdn.net，就可以跳转该站下的任何HTTPS链接），否则还是会提示无法打开。
配置后的效果：
把index页里的targetUrl改成“已配置的业务域名下的链接”，再用手机预览：
1. 点击跳转按钮，会顺利跳转到webView页；
2. 加载出目标外部页面（比如公司官网的登录页、活动页）；
3. 手机上操作外部页面，完全正常，不会再提示“无法打开”。
其实uni-app实现微信小程序跳转外部链接，核心就是“用web-view组件当中转站”，再注意域名配置的问题，就能轻松搞定。步骤再梳理一遍：
1. 在pages.json注册index和webView页；
2. index页加按钮，传外部链接到webView页；
3. webView页接收链接，用web-view加载；
4. 开发测本地关校验，预览/发布前配业务域名。
