要在微信公众号中实现分享给好友功能,可以使用微信提供的 onMenuShareAppMessage
接口。该接口会在分享给好友菜单项被点击时触发。
以下是示例代码:
// 配置分享给好友信息
wx.onMenuShareAppMessage({
title: '分享标题',
desc: '分享描述',
link: '分享链接',
imgUrl: '分享图标',
success: function () {
// 分享成功回调
console.log('分享给好友成功!');
},
cancel: function () {
// 分享取消回调
console.log('分享给好友取消!');
}
});
其中:
title
表示分享给好友的标题。desc
表示分享给好友的描述。link
表示分享给好友的链接。imgUrl
表示分享给好友的图标。success
表示分享给好友成功的回调函数。cancel
表示分享给好友取消的回调函数。
需要注意的是,要使用 onMenuShareAppMessage
接口,必须先引入微信 JS-SDK,并在页面加载后即可执行 wx.config
和获取 wx.ready
。
以下是示例代码:
// 引入微信 JS-SDK
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
// 配置微信 JS-SDK
wx.config({
// 必填,公众号的唯一标识
appId: 'YOUR_APP_ID',
// 必填,生成签名的时间戳
timestamp: TIMESTAMP,
// 必填,生成签名的随机串
nonceStr: 'YOUR_NONCESTR',
// 必填,签名,见附录1
signature: 'YOUR_SIGNATURE',
// 必填,需要使用的JS接口列表,所有JS接口列表见附录2
jsApiList: ['onMenuShareAppMessage']
});
// 获取微信 JS-SDK
wx.ready(function () {
// 配置分享给好友信息
wx.onMenuShareAppMessage({
title: '分享标题',
desc: '分享描述',
link: '分享链接',
imgUrl: '分享图标',
success: function () {
// 分享成功回调
console.log('分享给好友成功!');
},
cancel: function () {
// 分享取消回调
console.log('分享给好友取消!');
}
});
});
其中,YOUR_APP_ID
、TIMESTAMP
、YOUR_NONCESTR
、YOUR_SIGNATURE
分别表示您的公众号的唯一标识、生成签名的时间戳、生成签名的随机串和签名。这些值需要您根据实际情况进行填写。
如果在使用 wx.config
进行微信 JS-SDK 的配置时,出现了 config:fail,invalid signature
的错误,一般是由于签名的生成出现了问题。
以下是一些可能导致签名生成问题的原因以及解决方法:
- 检查签名的参数是否正确
签名的生成需要一些参数,如:noncestr、timestamp、url、ticket 等。您需要确保这些参数的值都正确、完整并可以被使用。
- 检查签名 URL 是否正确
签名 URL 涵盖了使用微信 JS-SDK 的网页 URL,需要使用 encodeURIComponent
对其进行编码后再进行签名。
可以使用以下代码检查编码后的 URL 是否正确:
function getUrl() {
var url = window.location.href.split('#')[0];
return encodeURIComponent(url);
}
- 检查签名算法是否正确
签名算法需要与使用该签名的地方一致,您需要确保使用 wx.config
时使用的签名算法与实际生成签名时使用的算法一致。
- 检查 JSAPI 接口列表是否正确
在使用 wx.config
配置微信 JS-SDK 时,需要传入一个数组指定需要使用的 JSAPI 列表,需要确保该数组中包含需要使用的 JSAPI。
如下示例:
wx.config({
debug: true,
appId: '',
timestamp: ,
nonceStr: '',
signature: '',
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'onVoicePlayEnd', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'translateVoice', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'closeWindow']
});
- 检查服务器配置是否正确
如果您是通过服务器端进行签名生成,则需要确保签名生成接口已经正确配置。通常该接口需要使用 GET 方式,返回值应该是一个 JSON 对象,包含“nonceStr”、“timestamp”、“signature”等参数。
以上是一些可能导致签名生成出现问题的原因及解决方法,您可以根据实际情况进行检查和排除。
以下是一段 PHP 代码,用于生成微信 JS-SDK 相关的 wx.config 配置:
<?php
$noncestr = substr(str_shuffle('abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'), 0, 16); // 随机字符串
$timestamp = time(); // 时间戳
$url = $_POST['url']; // 当前网页的 URL,需使用 JS 获取
// 使用 access_token 获取 jsapi_ticket
$access_token = get_access_token(); // 先获取 access_token,详见:https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
$url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token='.$access_token;
$ticket_json = file_get_contents($url);
$ticket_data = json_decode($ticket_json, true);
$ticket = $ticket_data['ticket'];
// 对 string1 进行 sha1 加密,得到 signature
$string1 = 'jsapi_ticket='.$ticket.'&noncestr='.$noncestr.'×tamp='.$timestamp.'&url='.$url;
$signature = sha1($string1);
$config = [
'appId' => '<your_appid>',
'timestamp' => $timestamp,
'nonceStr' => $noncestr,
'signature' => $signature,
'jsApiList' => ['chooseImage', 'previewImage', 'uploadImage', 'downloadImage'] // 需使用的 jsapi 列表
];
echo json_encode($config);
?>
此代码将通过调用微信接口获取 jsapi_ticket,然后生成相关参数并返回给前端。您需要将 <your_appid>
替换为您的公众号的 AppID。
注意,由于需要使用 $_POST['url']
这个参数去调用微信接口,所以您需要在前端页面将当前网页的 URL 传递过来。建议使用 JS 根据页面 URL 进行生成和传递。
此外,该代码中仅列举了一部分常用的 JSAPI 列表,您需要根据业务需要进行修改。