Interface documentation: WeChat JS-SDK documentation
Wechat JS-SDK is a web development toolkit based on Wechat provided by Wechat public platform for web developers.
1. First log in to the WeChat public platform and enter the "Function Settings" of "Official Account Settings" and fill in the "JS interface security domain name".
2. Introducing JS files into H5 pages: http://res.wx.qq.com/open/js/jweixin-1.0.0.js
wx.config({
debug: true, // Turn on the debug mode, the return values of all the apis called will be alerted on the client side, if you want to view the incoming parameters, you can open it on the pc side, and the parameter information will be printed out through the log, only on the pc side will print.
appId: '', // Required, the unique ID of the official account
timestamp: , // required, the timestamp of the generated signature
nonceStr: '', // Required, generate a random string for signature
signature: '',// Required, signature, see Appendix 1
jsApiList: [] // Required, a list of JS interfaces to be used, see Appendix 2 for a list of all JS interfaces
});
3. Because AppSecret is placed on the server side (not recommended on the front end), the following information is obtained from the server side:
1. Input parameters: URL of the page to be shared
Output parameters: timestamp, nonceStr, signature
2. Function logic:
First get api_ticket (api_ticket is a temporary ticket used to call the WeChat card coupon JS API, valid for 7200 seconds, obtained through access_token. type=jsapi)
http request method: GET
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
3. Generate a signature according to the signature algorithm
Code snippet (Perl language):
sub createSignature {
my $url = $_[0];
my $timestamp = time();
my $jsapi_ticket = getTicket();
if ($jsapi_ticket->{errcode} ne "0" || $jsapi_ticket->{errmsg} ne "ok") {#接口错误返回
return $jsapi_ticket;
}
$jsapi_ticket = $jsapi_ticket->{ticket};
my $nonceStr = '';
for (my $i = 0; $i < 30; $i++) {
$nonceStr .= chr(65+int(rand(125-65)));
}
my $data = {
'jsapi_ticket' => $jsapi_ticket,
'nonceStr' => $nonceStr,
'timestamp' => $timestamp,
'url' => $url
};
my $signStr = 'jsapi_ticket=' . $data->{jsapi_ticket}
. '&noncestr=' . $data->{nonceStr}
. '×tamp=' . $data->{timestamp}
. '&url=' . $data->{url};
my $signature = lc(sha1_hex($signStr));
$data->{signature} = $signature;
$data->{appId} = $WECHAT_APPID;
delete ($data->{jsapi_ticket});
delete ($data->{url});
return $data;
}
四、通过ready接口处理成功验证
function shareWx(data,title,img){
var config={
debug: false, // 开启调试模式
appId: data.appId, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature,// 必填，签名，见附录1
jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ","onMenuShareWeibo","onMenuShareQZone"] // 必填，需要使用的JS接口列表
}
//微信配置
wx.config(config);
wx.ready(function(){
runWxShare(title,img);
});
}
function runWxShare(title,img){
var link="xxxx";
var imgUrl="xxxx";
var desc="";
var title=title;
var desc1=title;
wx.onMenuShareTimeline({
title:desc1, // 分享标题
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
success: function () {
//用户分享成功后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//分享到朋友
wx.onMenuShareAppMessage({
title:title, // 分享标题
link: link, // 分享链接
imgUrl: imgUrl, // 分享图标
desc: desc, // 分享描述
type: 'link', // 分享类型,music、video或 link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
}