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

来源：互联网发布：微信抓取朋友圈数据库编辑：程序博客网时间：2024/05/01 11:43

对微信的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="./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 */0405/*06 函数名称：wxJSSDK.shareApi07 函数功能：为wxJSSDK增加分享模块08 参数：09    shareList（Array） 必选项，待分享的API配置表10 */11wxJSSDK.shareApi = function(shareList){12    if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完毕1314        // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口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        }3132        // 获取“分享给朋友”按钮点击状态及自定义分享内容接口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 && 47ParametersAppMessage.success();48                },49                cancel: function () {50                    // 用户取消分享后执行的回调函数51                    ParametersAppMessage.cancel && ParametersAppMessage.cancel();52                }53            });54        }5556        // 获取“分享到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        }7475        // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口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        }9394    }else{95        console.log("抱歉，wx没有初始化完毕，请等待wx初始化完毕，再调用检测API服96务。");97    }9899}100101// 成功初始化后执行API分享事务102wxJSSDK.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();121122            },123            cancel: function () {124                cancel();125126            }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混合开发解密》

欢迎一起交流本书

阅读全文

0 0