微信分享模块集成开发

发表于 | 更新于: | 分类于
字数统计: 378 | 阅读时长 ≈ 1

本文主要介绍集成微信jssdk, 实现在微信中打开网页，能够分享到朋友圈，发送给朋友，并正确显示分享内容的实现。

安全域名设置

首先我们准备一个微信测试号或认证的微信订阅号或服务号。

在公众平台设置js接口安全域名

js接口安全域名设置页面js引入及设置

        var shareTitle='网址导航_新一代安全上网导航--蓝旗子';    
var descContent='为用户提供微信API、购物、手机网站、视频、开放平台等分类的优秀内容和网站入口，提供简单便捷的上网导航服务。安全上网。';    
var img_Url='https://www.yf2017.top/files/image/logo/lqz.jpg';    
   
url=location.href+'';    
var lineLink=url; // encodeURIComponent('')    
$.post('home\_wxShare\_getSign.html',{'url': lineLink},function(data){    
console.log(data);    
var json=eval('('+data+')');    
lineLink=json.url;    
//console.log(json.appId);    
//var json=data;    
wx.config({    
debug: false,    
appId: json.appId,    
timestamp: json.timestamp ,    
nonceStr: json.nonceStr,    
signature: json.signature,    
jsApiList: \[    
'checkJsApi',    
'onMenuShareTimeline',    
'onMenuShareAppMessage',    
'onMenuShareQQ',    
'onMenuShareWeibo',    
'onMenuShareQZone',    
'hideMenuItems',    
'showMenuItems',    
'hideAllNonBaseMenuItem',    
'showAllNonBaseMenuItem',    
'translateVoice',    
'startRecord',    
'stopRecord',    
'onVoiceRecordEnd',    
'playVoice',    
'onVoicePlayEnd',    
'pauseVoice',    
'stopVoice',    
'uploadVoice',    
'downloadVoice',    
'chooseImage',    
'previewImage',    
'uploadImage',    
'downloadImage',    
'getNetworkType',    
'openLocation',    
'getLocation',    
'hideOptionMenu',    
'showOptionMenu',    
'closeWindow',    
'scanQRCode',    
'chooseWXPay',    
'openProductSpecificView',    
'addCard',    
'chooseCard',    
'openCard'    
\]    
});    
wx.ready(function() {    
wx.checkJsApi({    
jsApiList: \['onMenuShareTimeline','onMenuShareQQ'\], // 需要检测的JS接口列表，所有JS接口列表见附录2,    
success: function(res) {    
// 以键值对的形式返回，可用的api值true，不可用为false    
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}    
}    
});    
// friends    
wx.onMenuShareAppMessage({    
title: shareTitle,    
desc: descContent,    
link: lineLink,    
imgUrl: img_Url,    
trigger: function (res) {    
//alert('用户点击发送给朋友');    
},    
success: function (res) {    
//alert('分享成功');    
},    
cancel: function (res) {    
//alert('已取消');    
},    
fail: function (res) {    
//alert("失败");    
//alert(JSON.stringify(res));    
}    
});    
// 朋友圈    
wx.onMenuShareTimeline({    
title: shareTitle+" "+descContent,    
link: lineLink,    
imgUrl: img_Url,    
success: function () {    
//alert("分享成功");    
},    
cancel: function () {    
// alert("取消分享");    
}    
});    
wx.onMenuShareQQ({    
title: shareTitle,    
desc: descContent,    
link: lineLink,    
imgUrl: img_Url,    
success: function (res) {    
//alert('分享成功');    
},    
cancel: function (res) {    
// alert('已取消');    
}    
});    
wx.onMenuShareQZone({    
title: shareTitle,    
desc: descContent,    
link: lineLink,    
imgUrl: img_Url,    
trigger: function (res) {    
//alert('用户点击发送给朋友');    
},    
success: function (res) {    
//alert('分享成功');    
},    
cancel: function (res) {    
//alert('已取消');    
},    
fail: function (res) {    
//alert("失败");    
//alert(JSON.stringify(res));    
}    
});    
wx.error(function(res){    
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。    
});    
});    
})    

定时生成ticket

生成签名之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。

1.参考以下文档获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）：../15/54ce45d8d30b6bf6758f68d2e95bc627.html

2.用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access\_token=ACCESS_TOKEN&type=jsapi

后台签名等计算 get_Sign.html

url处理 

$url=$_POST\['url'\];
$jk=$url;
if(strpos($url,'#')>0)$url=substr($url,0,strpos($url,'#'));
$timestamp = time()+'';
$nonceStr = $this->createNonceStr();

签名信息输出
$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";

$signature = sha1($string);

$signPackage = array(
    "appId"     => $this->appId,
    "nonceStr"  => $nonceStr,
    "timestamp" => $timestamp,
    "url"       => $url,
    "signature" => $signature,
    "rawString" => $string,
    "jk"=>$jk
);
echo  json_encode($signPackage);

调试

wx.config({

debug: true,

最后预览

分享给朋友

分享给朋友

发送到朋友圈

至此，开发完成。

0%