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

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

# 微信 2024-05-05 10:15 0 21 来源：云博客

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

技术分享 650) this.width=650;" src="https://images.winkp.com/imgs/winkp/_winkp/2023/08/1794966060041496328" class="aligncenter">

图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="./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="./js/cookie.js"></script>12     <!--JSSDK的环境-->13     <script src="./js/wxJSSDK.js"></script>14     <!--引入检测API的分享接口-->15     <script src="./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 });