微信公众平台网页开发实战--1.微信分享一个网页到朋友圈

2025-02-10 技术教程

对微信的JSSDK进行封装一下，创建一份类似的文件结构，增加index.html与shareApi.js文件，结构如图3.3所示。

图3.3 3.2节文件结构

另外，提醒读者一下，wxJSSDK.js文件的JSSDK环境配置中，需要更改一下配置参数，代码如下：

01jsApiList:[//其他代码略02"onMenuShareTimeline",03"onMenuShareAppMessage",04"onMenuShareQQ",05"onMenuShareWeibo"06]//必填，需要使用的JS接口列表，所有JS接口列表见附录B

index.html文件增加如下代码(HTML5网页)：

01<!DOCTYPEhtml>02<htmllang="en">03<head>04<metacharset="UTF-8">05<title>第3章3.2节分享接口的作用</title>0607<scriptsrc="./js/jquery-1.11.2.min.js"></script>0809<scriptsrc="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>1011<scriptsrc="./js/cookie.js"></script>1213<scriptsrc="./js/wxJSSDK.js"></script>1415<scriptsrc="./shareApi.js"></script>16</head>17<body>18<h2>:)</h2>19<b>分享接口的作用！</b>20</body>21</html>shareApi.js增加分享API的测试封装方案代码：01/*声明：02为了方便读者朋友，这里省略配置环境，直接写检测代码。03*/0405/*06函数名称：wxJSSDK.shareApi07函数功能：为wxJSSDK增加分享模块08参数：09shareList（Array）必选项，待分享的API配置表10*/11wxJSSDK.shareApi=function(shareList){12if(wxJSSDK.isReady){//wxJSSDK.isReady查看微信JSSDK是否初始化完毕1314//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口15if(shareList.onMenuShareTimeline){16varParametersTimeline=shareList.onMenuShareTimeline;17wx.onMenuShareTimeline({18title:ParametersTimeline.title,//分享标题19link:ParametersTimeline.link,//分享链接20imgUrl:ParametersTimeline.imgUrl,//分享图标21success:function(){22//用户确认分享后执行的回调函数23ParametersTimeline.success&&ParametersTimeline.success();24},25cancel:function(){26//用户取消分享后执行的回调函数27ParametersTimeline.cancel&&ParametersTimeline.cancel();28}29});30}3132//获取“分享给朋友”按钮点击状态及自定义分享内容接口33if(shareList.onMenuShareAppMessage){34varParametersAppMessage=shareList.onMenuShareAppMessage;35wx.onMenuShareAppMessage({36title:ParametersAppMessage.title,//分享标题37desc:ParametersAppMessage.desc,//分享描述38link:ParametersAppMessage.link,//分享链接39imgUrl:ParametersAppMessage.imgUrl,//分享图标40type:ParametersAppMessage.type,//分享类型，music、video或link，41不填默认为link42dataUrl:ParametersAppMessage.dataUrl,//如果type是music或video，43则要提供数据链接，默认为空44success:function(){45//用户确认分享后执行的回调函数46ParametersAppMessage.success&&47ParametersAppMessage.success();48},49cancel:function(){50//用户取消分享后执行的回调函数51ParametersAppMessage.cancel&&ParametersAppMessage.cancel();52}53});54}5556//获取“分享到QQ”按钮点击状态及自定义分享内容接口57if(shareList.onMenuShareQQ){58varParametersQQ=shareList.onMenuShareQQ;59wx.onMenuShareQQ({60title:ParametersQQ.title,//分享标题61desc:ParametersQQ.desc,//分享描述62link:ParametersQQ.link,//分享链接63imgUrl:ParametersQQ.imgUrl,//分享图标64success:function(){65//用户确认分享后执行的回调函数66ParametersQQ.success&&ParametersQQ.success();67},68cancel:function(){69//用户取消分享后执行的回调函数70ParametersQQ.cancel&&ParametersQQ.cancel();71}72});73}7475//获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口76if(shareList.onMenuShareWeibo){77varParametersWeibo=shareList.onMenuShareWeibo;78wx.onMenuShareWeibo({79title:ParametersWeibo.title,//分享标题80desc:ParametersWeibo.desc,//分享描述81link:ParametersWeibo.link,//分享链接82imgUrl:ParametersWeibo.imgUrl,//分享图标83success:function(){84//用户确认分享后执行的回调函数85ParametersWeibo.success&&ParametersWeibo.success();86},87cancel:function(){88//用户取消分享后执行的回调函数89ParametersWeibo.cancel&&ParametersWeibo.cancel();90}91});92}9394}else{95console.log("抱歉，wx没有初始化完毕，请等待wx初始化完毕，再调用检测API服96务。");97}9899}100101//成功初始化后执行API分享事务102wxJSSDK.readySuccessCall.push(function(){103vartitle="HTML5外包，HTML5外包，HTML5是我们的生活，值得信赖的HTML5解决104方案提供商！",105link="http://www.html5waibao.com",106imgUrl="http://www.html5waibao.com/p_w_picpaths/logo_35.png",107desc="html5外包,HTML5外包,html5外宝,html5活,html5手机网站",108success=function(){109alert("分享成功回调");110},111cancel=function(){112alert("分享失败回调");113};114wxJSSDK.shareApi({115onMenuShareTimeline:{//分享到朋友圈116title:title,//分享标题117link:link,//分享链接118imgUrl:imgUrl,//分享图标119success:function(){120success();121122},123cancel:function(){124cancel();125126}127},128onMenuShareAppMessage:{129title:title,//分享标题130desc:desc,//分享描述131link:link,//分享链接132imgUrl:imgUrl,//分享图标133type:"link",//分享类型，music、video或link，不填默认为link134dataUrl:"",//如果type是music或video，则要提供数据链接，默认为空135success:function(){136success();137},138cancel:function(){139cancel();140}141},142onMenuShareQQ:{143title:title,//分享标题144desc:desc,//分享描述145link:link,//分享链接146imgUrl:imgUrl,//分享图标147success:function(){148success();149},150cancel:function(){151cancel();152}153},154onMenuShareWeibo:{155title:title,//分享标题156desc:desc,//分享描述157link:link,//分享链接158imgUrl:imgUrl,//分享图标159success:function(){160success();161},162cancel:function(){163cancel();164}165}166});167});

【代码解释】

为“wxJSSDK”增加“shareApi”方法。

以对象的参数形式，为调用“shareApi”方法的使用者配置具体的JSSDK的API。

分别进行配置填充。

用“wxJSSDK.readySuccessCall.push”增加JSSDK分享API的测试用例。

打开手机会看到如图3.4所示的UI。点击右上角的分享到朋友圈按钮，会看到如图3.5所示的UI。如果分享成功会弹出对应的提示，如图3.6所示。

图3.4 测试用例分享界面

图3.5 分享到朋友圈UI

图3.6 分享到朋友圈成功提示

《微信公众平台网页开发实战——HTML5+JSSDK混合开发解密》