公众号自定义菜单的view类型可以跳转到任意H5地址，菜单编辑时填写一个公网可访问的URL即可。但H5页面在微信内的分享行为并不会自动读取你指定的分享卡片内容，微信默认会抓取页面<title>、描述元数据和图片资源，这个抓取结果经常和活动想要的文案不一致。为了让转发好友和分享朋友圈时显示固定的标题、摘要和缩略图，需要在H5页面前置微信JS-SDK的分享配置，并由后端提供签名数据。
一、自定义菜单跳转H5的基础条件
先确认公众号类型和后台权限。微信JS-SDK的分享类接口通常要求公众号是认证服务号，订阅号尤其未认证订阅号在公众平台后台看不到“JS接口安全域名”设置入口，即使页面加载了JS-SDK也无法通过config校验。因此如果你在后台找不到菜单配置或JS接口安全域名，可以先检查账号主体是否已经完成微信认证。
菜单配置本身不复杂：进入公众平台后台，在“自定义菜单”中新建一个子菜单，类型选择“跳转网页”，将H5地址填入页面地址。保存并重新关注公众号后，菜单会很快生效。这里的URL可以是带查询参数的活动地址，例如https://ipipp.com/activity?id=1001。不过要注意，如果该页面后续要调用分享接口，这个域名必须和后台“JS接口安全域名”中配置的域名一致，并且不能填写IP地址或localhost。
另一个容易被忽略的问题是页面内跳转。H5活动经常使用SPA路由，如果用户从菜单进入后在页面上跳了几次，分享时当前地址可能已经变化，此时签名必须使用用户实际打开页面的URL，而不是写死菜单入口地址。前端可以使用window.location.href.split('#')[0]获取去掉hash部分的完整地址，再传给后端。
二、后端签名：access_token与jsapi_ticket
微信JS-SDK的签名核心参数是jsapi_ticket，它不能由前端直接获取，必须由服务端先调用凭证接口拿access_token，再换取jsapi_ticket。access_token的有效期是7200秒，官方对调用频次有限制，所以生产环境需要做全局缓存。下面是一个Java版本的签名工具类，核心逻辑包括获取ticket、按字典序拼接参数、SHA1加密。
签名时要求四个参数：jsapi_ticket、noncestr、timestamp、url。其中noncestr可以由时间戳或随机字符串生成，timestamp是当前秒级时间戳，url是当前页面地址。把这些参数按字段名ASCII码升序排序后，用&连接成key1=value1&key2=value2形式，再做SHA1运算。这里最容易出错的是排序和拼接格式，多一个、少一个字符都会导致invalid signature。
import java.security.MessageDigest;
import java.util.Map;
import java.util.TreeMap;
import org.springframework.web.client.RestTemplate;
public class WxJsSdkSignUtil {
private static final String APPID = "你的appid";
private static final String SECRET = "你的secret";
private static String cachedTicket = null;
private static long ticketExpireAt = 0L;
public Map<String, Object> buildSign(String url) throws Exception {
String ticket = getJsapiTicket();
String nonceStr = System.currentTimeMillis() + "";
String timestamp = System.currentTimeMillis() / 1000 + "";
Map<String, String> params = new TreeMap<String, String>();
params.put("noncestr", nonceStr);
params.put("jsapi_ticket", ticket);
params.put("timestamp", timestamp);
params.put("url", url);
StringBuilder raw = new StringBuilder();
for (Map.Entry<String, String> entry : params.entrySet()) {
raw.append(entry.getKey()).append("=").append(entry.getValue()).append("&");
}
String rawString = raw.substring(0, raw.length() - 1);
String signature = sha1(rawString);
Map<String, Object> result = new TreeMap<String, Object>();
result.put("appId", APPID);
result.put("timestamp", timestamp);
result.put("nonceStr", nonceStr);
result.put("signature", signature);
return result;
}
private String getJsapiTicket() throws Exception {
if (cachedTicket != null && System.currentTimeMillis() < ticketExpireAt) {
return cachedTicket;
}
RestTemplate restTemplate = new RestTemplate();
String tokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + APPID + "&secret=" + SECRET;
Map<String, Object> tokenResp = restTemplate.getForObject(tokenUrl, Map.class);
String accessToken = tokenResp.get("access_token").toString();
String ticketUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + accessToken + "&type=jsapi";
Map<String, Object> ticketResp = restTemplate.getForObject(ticketUrl, Map.class);
cachedTicket = ticketResp.get("ticket").toString();
ticketExpireAt = System.currentTimeMillis() + 7000 * 1000L;
return cachedTicket;
}
private String sha1(String input) throws Exception {
MessageDigest digest = MessageDigest.getInstance("SHA-1");
byte[] bytes = digest.digest(input.getBytes());
StringBuilder sb = new StringBuilder();
for (byte b : bytes) {
int i = b & 0xff;
if (i < 16) {
sb.append("0");
}
sb.append(Integer.toHexString(i));
}
return sb.toString();
}
}
上面的代码把ticket缓存在内存中，过期时间设置成7000秒，比官方7200秒略早，可以避免临界点失效。如果服务是多实例部署，内存缓存会导致每台机器各自请求ticket，建议改用Redis集中缓存。access_token也可以按同样思路缓存，微信对获取token的接口有频率限制，短时间高频调用会被拒绝。
三、前端JS-SDK调用与分享参数
前端先引入微信官方JS文件。可以通过<script>标签加载https://res.wx.qq.com/open/js/jweixin-1.6.0.js。然后向后端接口请求签名数据，请求时把当前页面URL传给后端。拿到appId、timestamp、nonceStr、signature后，调用wx.config进行权限注入。
wx.config里的debug建议在测试环境打开，它会弹出每个接口的校验结果。生产环境关闭即可。jsApiList中要列出所有需要使用的接口名称，分享类接口建议同时写新接口和旧接口，因为部分旧版本微信客户端仍然只支持onMenuShareAppMessage和onMenuShareTimeline。
wx.config({
debug: false,
appId: signConfig.appId,
timestamp: signConfig.timestamp,
nonceStr: signConfig.nonceStr,
signature: signConfig.signature,
jsApiList: [
'updateAppMessageShareData',
'updateTimelineShareData',
'onMenuShareAppMessage',
'onMenuShareTimeline'
]
});
wx.ready(function () {
var baseShare = {
title: '活动标题',
desc: '活动描述',
link: window.location.href.split('#')[0],
imgUrl: 'https://ipipp.com/cover.jpg',
success: function () {
console.log('分享成功');
},
cancel: function () {
console.log('用户取消分享');
}
};
wx.updateAppMessageShareData(baseShare);
wx.updateTimelineShareData({
title: baseShare.title,
link: baseShare.link,
imgUrl: baseShare.imgUrl,
success: baseShare.success
});
});
分享给好友和分享到朋友圈的字段略有差异：好友分享支持desc描述字段，朋友圈分享不展示描述，只展示标题和图片。imgUrl必须是公网可访问的HTTPS图片地址，建议使用正方形或1:1比例的图片，否则朋友圈卡片会被裁剪变形。图片大小尽量控制在300KB以内，过大的图片在弱网下容易出现缩略图空白。
如果页面使用hash路由，传给后端的URL要去掉#后面的内容，但分享链接本身要保留完整地址。签名URL和实际打开URL不一致时，wx.config会报invalid signature。另一种常见做法是在后端接口中直接接收前端传的URL，不自己做任何拼接或改写，确保两者完全一致。
四、高频报错与排查
第一个高频问题就是invalid signature。它的排查顺序是：确认JS接口安全域名是否配置正确且不带协议头；确认后端用于签名的URL和前端页面URL完全一致，包括协议、域名、路径和查询参数；确认jsapi_ticket没有过期；确认拼接顺序为字典序；确认SHA1运算结果是小写十六进制字符串。可以用微信官方的“JS接口签名校验工具”对比签名值。
第二个问题是config:fail，通常说明当前域名不在JS接口安全域名列表中，或者公众号类型不支持分享接口。需要注意的是，JS接口安全域名设置后可能有几分钟生效延迟，刚配置完立即测试容易误判。
第三个问题是分享配置成功但朋友圈不显示自定义文案。朋友圈分享有缓存机制，同一个URL短期内分享多次，微信可能复用旧的分享卡片。测试时可以给URL追加一个随机查询参数，例如https://ipipp.com/activity?id=1001&v=123456，强制微信重新抓取。同时确认imgUrl返回的图片服务器允许微信客户端访问，且有正确的Content-Type响应头。
最后，如果活动页面部署在多个子域名下，每个子域名都要加入JS接口安全域名，否则切换域名后分享配置会失效。整条链路里，菜单跳转、域名校验、后端签名、前端调用是环环相扣的，任何一个环节错位都会让分享卡片回退到默认抓取状态。上线前建议在真机上分别测试好友转发、朋友圈分享，以及从菜单进入后直接分享和页面内跳转后再分享两种路径。