H5微信分享卡片
在微信生态中，分享链接到朋友圈或朋友，发现分享出去是一串链接，没有卡片样式，查看微信文档，需要微信JS-SDK进行配置与调用，而且还需要公众号（企业认证类）才行。那么个人开发者如何使用呢，这里我们可以走曲线，微信测试号来实现。
[scode type="blue" size=""]需要工信部备案域名，注册一个测试号[/scode]
测试号签名生成接口请求有限，单独写个工具，需要分享进工具填写参数再分享。
登录微信测试号，设置安全域名，记住appid和密钥。
生成请求接口
wx_sign.php
<?php
// ================================
// 微信分享签名生成接口
// ================================
// ==== 1. 替换为你自己的公众号信息 ====
// （在微信公众平台 → 开发 → 基本配置 中查看）
$appid = "XXXXXX";
$appsecret = "XXXXXXXXXXXXXXX";
// ==== 2. 获取 access_token ====
$token_data = json_decode(file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appid&secret=$appsecret"), true);
if (!isset($token_data['access_token'])) {
echo json_encode(['error' => '无法获取access_token']);
exit;
}
$access_token = $token_data['access_token'];
// ==== 3. 获取 jsapi_ticket ====
$ticket_data = json_decode(file_get_contents("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$access_token&type=jsapi"), true);
if (!isset($ticket_data['ticket'])) {
echo json_encode(['error' => '无法获取jsapi_ticket']);
exit;
}
$jsapi_ticket = $ticket_data['ticket'];
// ==== 4. 生成签名 ====
$nonceStr = "9ywkcom" . rand(1000,9999);
$timestamp = time();
$url = $_GET['url'] ?? '';
$string = "jsapi_ticket=$jsapi_ticket&noncestr=$nonceStr×tamp=$timestamp&url=$url";
$signature = sha1($string);
// ==== 5. 返回JSON ====
echo json_encode([
"appId" => $appid,
"timestamp" => $timestamp,
"nonceStr" => $nonceStr,
"signature" => $signature
]);
?>[scode type="blue" size="simple"]
访问wx_sign.php返回类似{"appId":"xxxxxx","timestamp":1763294755,"nonceStr":"xxx","signature":"xxxxx"}说明配置成功
[/scode]
Index
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>微信分享参数设置工具</title>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<style>
body {
font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
background: #f8f9fb;
padding: 16px;
color: #333;
font-size: 14px;
}
h2 {
text-align: center;
margin-bottom: 15px;
font-size: 18px;
}
.config-box {
max-width: 420px;
margin: 0 auto;
background: #fff;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
padding: 14px;
}
label {
display: block;
margin: 8px 0 3px;
font-weight: bold;
font-size: 13px;
}
input {
width: 100%;
padding: 5px 8px;
border-radius: 6px;
border: 1px solid #ccc;
font-size: 13px;
}
.btn {
margin-top: 10px;
width: 30%;
display: inline-block;
background: #409eff;
color: #fff;
padding: 7px 0;
border: none;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
transition: 0.2s;
}
.btn:hover {
background: #66b1ff;
}
.btn-secondary {
background: #999;
}
.btn-secondary:hover {
background: #aaa;
}
.btn-refresh {
background: #67c23a;
}
.btn-refresh:hover {
background: #85ce61;
}
p.notice {
text-align: center;
margin-top: 6px;
color: #666;
font-size: 12px;
}
/* ====== 预览区域样式 ====== */
.preview-area {
max-width: 340px;
margin: 20px auto 0;
}
.preview-title {
font-weight: bold;
font-size: 13px;
margin: 8px 0 4px;
color: #444;
text-align: left;
}
.preview-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
margin-bottom: 12px;
overflow: hidden;
padding: 6px;
}
/* 朋友圈预览 */
.preview-timeline {
display: flex;
align-items: center;
gap: 6px;
}
.preview-timeline img {
width: 45px;
height: 45px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
}
.preview-timeline .title {
font-size: 12.5px;
font-weight: bold;
color: #333;
flex: 1;
line-height: 1.3;
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 分享给朋友预览 */
.preview-appmsg {
padding: 4px;
}
.preview-appmsg .title {
font-size: 12.5px;
font-weight: bold;
margin-bottom: 2px;
color: #333;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.preview-appmsg .desc-row {
display: flex;
align-items: flex-start;
gap: 5px;
}
.preview-appmsg .desc {
flex: 1;
font-size: 12px;
color: #666;
line-height: 1.3;
max-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
}
.preview-appmsg img {
width: 40px;
height: 40px;
border-radius: 6px;
object-fit: cover;
flex-shrink: 0;
}
</style>
</head>
<body>
<h2>微信分享设置工具</h2>
<div class="config-box">
<label>分享标题（最多66字符）：</label>
<input type="text" id="title" maxlength="66" placeholder="例如：玖月博客 | www.9ywk.com" oninput="limitTitleLength(); updatePreview();">
<label>分享描述（最多120字符）：</label>
<input type="text" id="desc" maxlength="120" placeholder="例如：摘要描述..." oninput="limitDescLength(); updatePreview();">
<label>分享链接：</label>
<input type="text" id="link" placeholder="例如：https://www.9ywk.com" oninput="updatePreview()">
<label>缩略图URL：</label>
<input type="text" id="imgUrl" placeholder="SSL-URL" oninput="updatePreview()">
<div style="text-align:center;display:flex;justify-content:space-between;gap:5px;flex-wrap:wrap;">
<button class="btn" onclick="saveConfig()">保存</button>
<button class="btn btn-refresh" onclick="refreshPage()">刷新</button>
<button class="btn btn-secondary" onclick="resetConfig()">重置</button>
</div>
<p class="notice">保存后刷新页面即可生效</p>
</div>
<!-- ======= 预览区 ======= -->
<div class="preview-area">
<div class="preview-title">分享朋友圈预览</div>
<div class="preview-card">
<div class="preview-timeline">
<img id="previewTimelineImg" src="" alt="缩略图">
<div class="title" id="previewTimelineTitle"></div>
</div>
</div>
<div class="preview-title">分享给朋友预览</div>
<div class="preview-card">
<div class="preview-appmsg">
<div class="title" id="previewAppmsgTitle"></div>
<div class="desc-row">
<div class="desc" id="previewAppmsgDesc"></div>
<img id="previewAppmsgImg" src="" alt="缩略图">
</div>
</div>
</div>
</div>
<script>
const defaultConfig = {
title: '玖月博客 | www.9ywk.com',
desc: '摘要描述...',
link: 'https://www.9ywk.com',
imgUrl: 'https://cdn.9ywk.com/2025/11/96ecb8d4f841c.png'
};
const saved = JSON.parse(localStorage.getItem('wxShareConfig') || '{}');
const current = Object.assign({}, defaultConfig, saved);
document.getElementById('title').value = current.title;
document.getElementById('desc').value = current.desc;
document.getElementById('link').value = current.link;
document.getElementById('imgUrl').value = current.imgUrl;
function limitTitleLength() {
const titleInput = document.getElementById('title');
if (titleInput.value.length > 66) {
titleInput.value = titleInput.value.slice(0, 66);
}
}
function limitDescLength() {
const descInput = document.getElementById('desc');
if (descInput.value.length > 120) {
descInput.value = descInput.value.slice(0, 120);
}
}
function updatePreview() {
const title = document.getElementById('title').value.trim() || defaultConfig.title;
const desc = document.getElementById('desc').value.trim() || defaultConfig.desc;
const imgUrl = document.getElementById('imgUrl').value.trim() || defaultConfig.imgUrl;
document.getElementById('previewTimelineTitle').textContent = title;
document.getElementById('previewTimelineImg').src = imgUrl;
document.getElementById('previewAppmsgTitle').textContent = title;
document.getElementById('previewAppmsgDesc').textContent = desc;
document.getElementById('previewAppmsgImg').src = imgUrl;
}
updatePreview();
function saveConfig() {
const config = {
title: document.getElementById('title').value.trim(),
desc: document.getElementById('desc').value.trim(),
link: document.getElementById('link').value.trim(),
imgUrl: document.getElementById('imgUrl').value.trim()
};
localStorage.setItem('wxShareConfig', JSON.stringify(config));
alert('保存成功！刷新后生效');
}
function refreshPage() {
location.reload();
}
function resetConfig() {
localStorage.removeItem('wxShareConfig');
location.reload();
}
fetch('https://www.9ywk.com/wxtool/wx_sign.php?url=' + encodeURIComponent(location.href.split('#')[0]))
.then(res => res.json())
.then(config => {
if (config.error) {
console.error("签名接口错误：", config.error);
return;
}
wx.config({
debug: false,
appId: config.appId,
timestamp: config.timestamp,
nonceStr: config.nonceStr,
signature: config.signature,
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
});
wx.ready(function () {
const share = JSON.parse(localStorage.getItem('wxShareConfig') || '{}');
const params = Object.assign({}, defaultConfig, share);
wx.onMenuShareTimeline({
title: params.title,
link: params.link,
imgUrl: params.imgUrl
});
wx.onMenuShareAppMessage({
title: params.title,
desc: params.desc,
link: params.link,
imgUrl: params.imgUrl
});
});
wx.error(function (err) {
console.error('微信配置错误：', err);
});
});
</script>
</body>
</html>当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »