欢迎访问 licqi IT技术
我们一直在努力

微信公众平台网页开发实战–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	
02	
03	
04		
05		第3章 3.2节 分享接口的作用
06	    
07	    
08	    
09	    
10	    
11	    
12	    
13	    
14	    
15	    
16	
17	
18	    

🙂

19 分享接口的作用! 20 21 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混合开发解密

赞(0) 打赏
未经允许不得转载:licqi IT技术 » 微信公众平台网页开发实战–1.微信分享一个网页到朋友圈
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏