对微信的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 */
- 04
- 05 /*
- 06 函数名称:wxJSSDK.shareApi
- 07 函数功能:为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 不填默认为link
- 42 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,不填默认为link
- 134 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混合开发解密 》
欢迎一起交流本书
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/14741331/viewspace-2140753/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/14741331/viewspace-2140753/