微信小程序实现外链跳转的两种方式226

概述

微信小程序是一种在微信生态内运行的小应用程序，提供便捷的服务和功能。由于微信小程序的封闭性，开发者在开发小程序时需要遵守微信的规范和限制。其中，对外部链接的跳转有着严格的规定，小程序无法直接跳转到非微信生态内的网站或应用。

但是，微信也提供了两种官方途径来实现小程序外链跳转，分别是「小程序WebView」和「授权跳转」。

小程序WebView

小程序WebView是一种在小程序内嵌入的浏览器视图，允许小程序访问并显示外部网页。开发人员可以将目标网页的URL作为参数传递给小程序WebView，从而实现外链跳转。

优点：
无需用户授权，即刻跳转
可以访问外部网页的全部功能，如表单提交、视频播放等

缺点：
网页加载速度较慢，体验不佳
无法与小程序进行交互，如分享、支付等

授权跳转

授权跳转需要用户授权，在用户同意后，小程序可以将用户重定向到外部网页。授权跳转主要用于小程序与外部平台（如电商网站、支付平台）进行交互。

优点：
跳转速度快，体验良好
可以与外部平台进行交互，如下单、支付等

缺点：
需要用户授权，增加了操作步骤
外部平台需要支持微信授权登录

使用场景

小程序WebView和授权跳转各有其适用场景：
小程序WebView：适合不需要与外部平台交互，且对加载速度要求不高的场景，如展示资讯、产品介绍等。
授权跳转：适合需要与外部平台交互，且对加载速度要求较高的场景，如下单、支付、登录等。

具体实现

小程序WebView实现

在小程序代码中使用方法，并传入url参数为目标网页的URL即可。例如：
({
url: ''
})

授权跳转实现

在小程序代码中使用方法获取用户的code，然后使用该code向后台服务器发起请求，获取授权凭证（access token），最后拼装跳转URL并使用方法进行跳转。例如：
// 获取用户code
({
success: function(res) {
const code =
// 向后台服务器发起请求，获取授权凭证
({
url: '/api/getAccessToken',
data: {
code: code
},
success: function(res) {
const accessToken = .access_token
// 拼装跳转URL
const redirectUrl = '/redirect?access_token=' + accessToken
// 进行跳转
({
url: redirectUrl
})
}
})
}
})

需要注意的事项

使用小程序WebView和授权跳转功能时需要注意以下事项：
小程序WebView只能跳转到https协议的网页，否则会报错。
授权跳转时，需要在文件中声明需要使用redirect权限。
使用授权跳转功能时，外部平台需要支持微信授权登录。

微信小程序提供了小程序WebView和授权跳转两种官方途径来实现外链跳转。开发人员可根据具体场景选择合适的方式，满足小程序的业务需求。同时，需要注意相关规范和限制，确保小程序的合规性和用户体验。

2024-12-02

上一篇：微信小程序外链：全面解析用法与注意事项

下一篇：发外链的网站