专业的短链接生成工具
链接域名
短网址有效期
教你制作微信外链，一步一步实现
更新时间：2025-5-4 00:17:12 作者：爱短链
以下是制作微信外链的两种常见方案及源码实现，根据需求选择对应方法：
方案一：生成个人微信二维码链接（扫码添加好友）
步骤 1：获取微信二维码图片
打开微信 → 点击头像 → 进入「二维码名片」→ 截图保存二维码。
或使用在线工具生成二维码（如八木屋二维码）。
步骤 2：上传二维码到云存储
将二维码图片上传至云存储（如 GitHub、阿里云OSS），获取直链（如 https://example.com/qrcode.jpg）。
步骤 3：创建 HTML 页面
新建 index.html，内容如下：
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> |
步骤 4：部署到静态站点
将 HTML 文件上传至 GitHub 仓库。
启用 GitHub Pages：仓库 → Settings → Pages → 选择分支 → 保存。
获取生成的 URL（如 https://yourname.github.io/repo）。
步骤 5：生成短链接（可选）
使用短链接工具（如 www.aifabu.com）缩短 URL。
方案二：生成小程序短链接（直接打开小程序）
步骤 1：获取小程序 Access Token
登录微信公众平台，进入「开发」→「开发管理」→「开发设置」→ 获取 AppID 和 AppSecret。
通过接口获取 Access Token：
javascript
| // 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&appid=${appid}&secret=${secret}`) | |
| .then(res => { | |
| const access_token = res.data.access_token; | |
| console.log('Access Token:', access_token); | |
| }); |
步骤 2：生成小程序短链接
javascript
| // Node.js 示例 | |
| 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); | |
| }); |
步骤 3：用户访问短链接
用户点击短链接后，将直接跳转至指定小程序页面。
注意事项
合规性
个人微信二维码链接需用户手动扫码，无法自动添加。
小程序短链接需确保路径和参数合法。
安全性
避免在前端暴露敏感信息（如 AppSecret）。
部署
GitHub Pages 适合静态页面，动态请求需使用后端服务（如 Vercel、Heroku）。
完整代码示例（个人二维码链接）
HTML 文件（index.html）：
html
| <!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> |
部署到 GitHub Pages：
将文件推送到仓库，启用 Pages 功能即可通过 https://用户名.github.io/仓库名 访问。
通过以上步骤，即可生成微信外链。根据需求选择方案，并确保符合微信平台规则。
