教你制作微信外链，一步一步实现

做推广或者私域运营时，经常会遇到一个挺实际的问题：怎么把微信入口搬到微信之外？比如在短信里放一个链接，用户点开就能扫码加好友；又或者在网页里直接拉起小程序，省掉搜索这一步。其实这类微信外链做起来没什么门槛，常见做法有两种，分别对应不同场景，按需选择就好。

先看最简单的一种：个人微信二维码链接，适合引导用户扫码加好友的场景。全程不需要后端，一个纯静态页面就能跑通。

第一步是拿到二维码图片。打开微信，点自己的头像，进入「二维码名片」，截图保存即可。要是对美观度有要求，想加 logo 或者定制样式，也可以借助在线工具生成，快缩短网址这类平台一般都自带二维码功能。

图片到手后，还得让它能被公网访问。把二维码上传到支持直链的云存储——GitHub 仓库、阿里云 OSS、七牛云都可以——拿到一个类似 https://example.com/qrcode.jpg 的图片地址。注意这里必须是直链，也就是点开链接直接显示图片，而不是跳转到一个预览页。

接下来新建一个 index.html，写一个极简的展示页：

<!DOCTYPE html>

<html>

<head>

<title>扫码添加好友</title>

<style>

body { text-align: center; padding: 50px; }

img { width: 200px; margin: 20px; }

</style>

</head>

<body>

<h1>点击扫码添加好友</h1>

<img src="https://example.com/qrcode.jpg" alt="微信二维码">

<p>长按二维码识别添加好友</p>

</body>

</html>

页面写好，部署也几乎零成本。把这个 HTML 文件推到 GitHub 仓库，然后进入仓库的 Settings，找到 Pages 选项，选好分支保存，等上一两分钟，就能通过 https://yourname.github.io/repo 这样的地址访问了。这个地址就是你要的微信外链。

要是嫌 GitHub Pages 默认生成的链接太长，塞进短信或者印在物料上都不好看，可以用短链接工具（比如 www.suo.run）再压缩一道，传播起来顺手不少。

另一种需求是让用户点击链接直接打开小程序，这就得走微信官方接口了。流程稍重一些，需要写几行服务端代码。

首先要拿到小程序的 Access Token。登录微信公众平台，依次进入「开发」→「开发管理」→「开发设置」，把 AppID 和 AppSecret 复制下来，再调接口换 Token。Node.js 环境下大概长这样：

const axios = require('axios');

const appid = '你的小程序AppID';

const secret = '你的小程序AppSecret';

axios.get(https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&amp;appid=${appid}&amp;secret=${secret})

.then(res => {

const access_token = res.data.access_token;

console.log('Access Token:', access_token);

});

拿到 Token 之后，调用 urllink 接口就能生成短链接。path 填小程序内的页面路径，query 是要携带的参数，没有参数可以留空：

const path = 'pages/index/index'; // 小程序页面路径

const query = 'key=value'; // 参数（可选）

axios.post(https://api.weixin.qq.com/wxa/urllink?access_token=${access_token}, {

path,

query

})

.then(res => {

const shortUrl = res.data.url_link;

console.log('小程序短链接:', shortUrl);

});

生成的短链接直接发给用户就行，点击后会自动跳到指定的小程序页面，体验比扫码顺滑得多。

两条路子各有边界，动手之前有几个坑值得留意。合规上，个人二维码链接本质上只是展示图片，用户必须手动长按识别，或者保存后再扫码，做不到点击就自动加好友——别在这方面动歪脑筋，微信管得很严。小程序短链接则要保证 path 和 query 都合法，路径必须是小程序里真实存在的页面。安全上，AppSecret 这类敏感信息千万不能写进前端代码，一旦被扒出来，等于把小程序的后台钥匙拱手让人。部署上，GitHub Pages 只适合纯静态页面；一旦涉及动态请求，比如调用微信接口，就得上 Vercel、Heroku 或者自己的服务器了。

最后给一个体验更完整的个人二维码页面。它比上面的极简版多了样式优化和下载按钮，用户不方便扫码时可以直接保存图片：

<!DOCTYPE html>

<html>

<head>

<title>微信好友二维码</title>

<style>

body { font-family: Arial, sans-serif; max-width: 400px; margin: 20px auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px; }

img { width: 100%; height: auto; margin: 20px 0; }

.button { display: inline-block; padding: 10px 20px; background: #07c160; color: white; text-decoration: none; border-radius: 4px; }

</style>

</head>

<body>

<h2>扫码添加好友</h2>

<img src="https://example.com/qrcode.jpg" alt="微信二维码">

<p>长按二维码识别或保存图片扫码添加</p>

<a href="https://example.com/qrcode.jpg" download="wechat-qrcode.jpg" class="button">下载二维码</a>

</body>

</html>

部署方式和前面一样：推送到仓库，开启 Pages，就能通过 https://用户名.github.io/仓库名访问了。

整体看下来，两种方案都不算复杂，关键是先想清楚自己要什么——是让人扫码加好友，还是直接拉起小程序。想明白之后照着对应的路子走，再注意别踩微信平台的红线，基本不会出什么问题。

短链接生成成功!

批量生成结果

教你制作微信外链，一步一步实现