微信公众平台网页开发实战--1.微信分享一个网页到朋友圈
对微信的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>06<!--依赖文件:jQuery-->07<scriptsrc="./js/jquery-1.11.2.min.js"></script>08<!--依赖文件:微信的JSSDK源文件-->09<scriptsrc="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>10<!--依赖文件:coolie-->11<scriptsrc="./js/cookie.js"></script>12<!--JSSDK的环境-->13<scriptsrc="./js/wxJSSDK.js"></script>14<!--引入检测API的分享接口-->15<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混合开发解密》
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。