首页 > 代码库 > 微信公众平台网页开发实战--1.微信分享一个网页到朋友圈
微信公众平台网页开发实战--1.微信分享一个网页到朋友圈
对微信的JSSDK进行封装一下，创建一份类似的文件结构，增加index.html与shareApi.js文件，结构如图3.3所示。
图3.3 3.2节文件结构
另外，提醒读者一下，wxJSSDK.js文件的JSSDK环境配置中，需要更改一下配置参数，代码如下：
01 jsApiList: [ // 其他代码略02 "onMenuShareTimeline",03 "onMenuShareAppMessage",04 "onMenuShareQQ",05 "onMenuShareWeibo"06 ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录B
index.html文件增加如下代码(HTML5网页)：
01 <!DOCTYPE html>02 <html lang="en">03 <head>04 <meta charset="UTF-8">05 <title>第3章 3.2节 分享接口的作用</title>06 <!--依赖文件：jQuery-->07 <script src="http://www.mamicode.com/js/jquery-1.11.2.min.js"></script>08 <!--依赖文件：微信的JSSDK源文件-->09 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>10 <!--依赖文件：coolie-->11 <script src="http://www.mamicode.com/js/cookie.js"></script>12 <!--JSSDK的环境-->13 <script src="http://www.mamicode.com/js/wxJSSDK.js"></script>14 <!--引入检测API的分享接口-->15 <script src="http://www.mamicode.com/shareApi.js"></script>16 </head>17 <body>18 <h1 style="font-size: 40px">:)</h1>19 <b style="font-size: 20px">分享接口的作用！</b>20 </body>21 </html>shareApi.js增加分享API的测试封装方案代码：01 /*声明：02 为了方便读者朋友，这里省略配置环境，直接写检测代码。03 */04 05 /*06 函数名称：wxJSSDK.shareApi07 函数功能：为wxJSSDK增加分享模块08 参数：09 shareList（Array） 必选项，待分享的API配置表10 */11 wxJSSDK.shareApi = function(shareList){12 if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完毕13 14 // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口15 if(shareList.onMenuShareTimeline){16 var ParametersTimeline = shareList.onMenuShareTimeline;17 wx.onMenuShareTimeline({18 title: ParametersTimeline.title, // 分享标题19 link: ParametersTimeline.link, // 分享链接20 imgUrl: ParametersTimeline.imgUrl, // 分享图标21 success: function () {22 // 用户确认分享后执行的回调函数23 ParametersTimeline.success && ParametersTimeline.success();24 },25 cancel: function () {26 // 用户取消分享后执行的回调函数27 ParametersTimeline.cancel && ParametersTimeline.cancel();28 }29 });30 }31 32 // 获取“分享给朋友”按钮点击状态及自定义分享内容接口33 if(shareList.onMenuShareAppMessage){34 var ParametersAppMessage = shareList.onMenuShareAppMessage;35 wx.onMenuShareAppMessage({36 title: ParametersAppMessage.title, // 分享标题37 desc: ParametersAppMessage.desc, // 分享描述38 link: ParametersAppMessage.link, // 分享链接39 imgUrl: ParametersAppMessage.imgUrl, // 分享图标40 type: ParametersAppMessage.type, // 分享类型，music、video或link， 41 不填默认为link42 dataUrl: ParametersAppMessage.dataUrl, // 如果type是music或video，43 则要提供数据链接，默认为空44 success: function () {45 // 用户确认分享后执行的回调函数46 ParametersAppMessage.success && 47 ParametersAppMessage.success();48 },49 cancel: function () {50 // 用户取消分享后执行的回调函数51 ParametersAppMessage.cancel && ParametersAppMessage.cancel();52 }53 });54 }55 56 // 获取“分享到QQ”按钮点击状态及自定义分享内容接口57 if(shareList.onMenuShareQQ){58 var ParametersQQ = shareList.onMenuShareQQ;59 wx.onMenuShareQQ({60 title: ParametersQQ.title, // 分享标题61 desc: ParametersQQ.desc, // 分享描述62 link: ParametersQQ.link, // 分享链接63 imgUrl: ParametersQQ.imgUrl, // 分享图标64 success: function () {65 // 用户确认分享后执行的回调函数66 ParametersQQ.success && ParametersQQ.success();67 },68 cancel: function () {69 // 用户取消分享后执行的回调函数70 ParametersQQ.cancel && ParametersQQ.cancel();71 }72 });73 }74 75 // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口76 if(shareList.onMenuShareWeibo){77 var ParametersWeibo = shareList.onMenuShareWeibo;78 wx.onMenuShareWeibo({79 title: ParametersWeibo.title, // 分享标题80 desc: ParametersWeibo.desc, // 分享描述81 link: ParametersWeibo.link, // 分享链接82 imgUrl: ParametersWeibo.imgUrl, // 分享图标83 success: function () {84 // 用户确认分享后执行的回调函数85 ParametersWeibo.success && ParametersWeibo.success();86 },87 cancel: function () {88 // 用户取消分享后执行的回调函数89 ParametersWeibo.cancel && ParametersWeibo.cancel();90 }91 });92 }93 94 }else{95 console.log("抱歉，wx没有初始化完毕，请等待wx初始化完毕，再调用检测API服96 务。");97 }98 99 }100 101 // 成功初始化后执行API分享事务102 wxJSSDK.readySuccessCall.push(function(){103 var title = "HTML5外包，HTML5外包，HTML5是我们的生活，值得信赖的HTML5解决104 方案提供商！",105 link = "http://www.html5waibao.com",106 imgUrl = "http://www.html5waibao.com/images/logo_35.png",107 desc = "html5外包,HTML5外包,html5外宝,html5活,html5手机网站",108 success = function(){109 alert("分享成功回调");110 },111 cancel = function(){112 alert("分享失败回调");113 };114 wxJSSDK.shareApi({115 onMenuShareTimeline : { // 分享到朋友圈116 title: title, // 分享标题117 link: link, // 分享链接118 imgUrl: imgUrl, // 分享图标119 success: function () {120 success();121 122 },123 cancel: function () {124 cancel();125 126 }127 },128 onMenuShareAppMessage:{129 title: title, // 分享标题130 desc: desc, // 分享描述131 link: link, // 分享链接132 imgUrl: imgUrl, // 分享图标133 type: "link", // 分享类型，music、video或link，不填默认为link134 dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空135 success: function () {136 success();137 },138 cancel: function () {139 cancel();140 }141 },142 onMenuShareQQ:{143 title: title, // 分享标题144 desc: desc, // 分享描述145 link: link, // 分享链接146 imgUrl: imgUrl, // 分享图标147 success: function () {148 success();149 },150 cancel: function () {151 cancel();152 }153 },154 onMenuShareWeibo:{155 title: title, // 分享标题156 desc: desc, // 分享描述157 link: link, // 分享链接158 imgUrl: imgUrl, // 分享图标159 success: function () {160 success();161 },162 cancel: function () {163 cancel();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混合开发解密》
欢迎一起交流本书
微信公众平台网页开发实战--1.微信分享一个网页到朋友圈
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。