微信H5页面自定义分享内容与HTTPS logo兼容性解决方案
// 微信分享功能配置模块
const WeChatShare = {
// 默认分享参数
defaultConfig: {
title: '活动报名入口',
description: '为每位学员提供个性化学习方案，多种价格选择，现在报名可获赠课程！',
imageUrl: '',
shareUrl: ''
},
// 初始化微信分享
init: function(customConfig = {}) {
// 合并用户配置与默认配置
const shareConfig = this.mergeConfig(this.defaultConfig, customConfig);
// 获取微信JS-SDK配置
this.fetchWeChatConfig().then(config => {
this.setupWeChatSDK(config, shareConfig);
});
},
// 合并配置对象
mergeConfig: function(defaultConfig, userConfig) {
return {
title: userConfig.title || defaultConfig.title,
description: userConfig.description || defaultConfig.description,
imageUrl: userConfig.imageUrl || defaultConfig.imageUrl,
shareUrl: userConfig.shareUrl || defaultConfig.shareUrl
};
},
// 获取微信JS-SDK配置参数
fetchWeChatConfig: function() {
const currentUrl = window.location.href.split('#')[0];
return $.ajax({
url: '/rest/getJssdkTicket',
method: 'GET',
dataType: 'json',
data: { url: encodeURIComponent(currentUrl) }
});
},
// 配置微信JS-SDK
setupWeChatSDK: function(wechatData, shareConfig) {
wx.config({
appId: wechatData.appId,
timestamp: wechatData.timestamp,
nonceStr: wechatData.nonceStr,
signature: wechatData.signature,
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
});
wx.ready(() => {
this.configureTimelineShare(shareConfig);
this.configureAppMessageShare(shareConfig);
});
},
// 配置朋友圈分享
configureTimelineShare: function(config) {
wx.onMenuShareTimeline({
title: config.title,
link: this.ensureHttpsUrl(config.shareUrl),
imgUrl: this.resolveImageUrl(config.imageUrl),
success: () => console.log('朋友圈分享成功'),
cancel: () => console.log('用户取消分享')
});
},
// 配置好友分享
configureAppMessageShare: function(config) {
wx.onMenuShareAppMessage({
title: config.title,
desc: config.description,
link: this.ensureHttpsUrl(config.shareUrl),
imgUrl: this.resolveImageUrl(config.imageUrl),
type: 'link',
dataUrl: '',
success: () => console.log('好友分享成功'),
cancel: () => console.log('用户取消分享')
});
},
// 确保URL使用HTTPS协议
ensureHttpsUrl: function(url) {
if (!url) {
return window.location.href.split('#')[0];
}
return url.startsWith('https://') ? url : 'https://' + url.replace(/^https?:\/\//, '');
},
// 处理图片URL，解决HTTPS兼容性问题
resolveImageUrl: function(url) {
if (!url) {
const origin = window.location.origin;
return `${origin}/assets/images/default-share-logo.jpg`;
}
// 如果是相对路径，转换为绝对路径并确保HTTPS
if (!url.startsWith('http')) {
const origin = window.location.origin;
return `${origin}/${url}`;
}
// 确保图片URL使用HTTPS
return url.startsWith('https://') ? url : url.replace('http://', 'https://');
}
};
// 使用示例
const customShareSettings = {
title: '推荐优质教育平台给孩子试试！',
description: '全国已有超过3000万学员选择的在线教育平台。',
imageUrl: '/assets/images/wechat-share-logo.png',
shareUrl: '/promotion/educational-program.html'
};
// 初始化微信分享功能
WeChatShare.init(customShareSettings);
<!-- 在HTML页面中引入微信JS-SDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 确保在页面加载完成后初始化分享功能 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// 如果没有提供自定义分享配置，将使用默认配置
WeChatShare.init();
});
</script>
注意事项：
- 确保已在微信公众平台配置JS接口安全域名
- 图片URL必须使用HTTPS协议，否则在iOS设备上可能无法显示
- 分享链接必须与当前页面的域名一致，或已在公众号后台配置为安全域名
- 服务器端需要实现获取ticket的接口，用于生成签名
- 分享回调函数可以根据业务需求添加更多逻辑
