溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
對微信的JSSDK進行封裝一下，創(chuàng)建一份類似的文件結(jié)構(gòu)，增加index.html與shareApi.js文件，結(jié)構(gòu)如圖3.3所示。
圖3.3 3.2節(jié)文件結(jié)構(gòu)
另外，提醒讀者一下，wxJSSDK.js文件的JSSDK環(huán)境配置中，需要更改一下配置參數(shù)，代碼如下：
01 jsApiList: [ // 其他代碼略 02 "onMenuShareTimeline", 03 "onMenuShareAppMessage", 04 "onMenuShareQQ", 05 "onMenuShareWeibo" 06 ] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄B
index.html文件增加如下代碼(HTML5網(wǎng)頁)：
01 <!DOCTYPE html>
02 <html lang="en">
03 <head>
04 <meta charset="UTF-8">
05 <title>第3章 3.2節(jié) 分享接口的作用</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的環(huán)境-->
13 <script src="./js/wxJSSDK.js"></script>
14 <!--引入檢測API的分享接口-->
15 <script src="./shareApi.js"></script>
16 </head>
17 <body>
18 <h2 >:)</h2>
19 <b >分享接口的作用！</b>
20 </body>
21 </html>
shareApi.js增加分享API的測試封裝方案代碼：
01 /*聲明：
02 為了方便讀者朋友，這里省略配置環(huán)境，直接寫檢測代碼。
03 */
04
05 /*
06 函數(shù)名稱：wxJSSDK.shareApi
07 函數(shù)功能：為wxJSSDK增加分享模塊
08 參數(shù)：
09 shareList（Array） 必選項，待分享的API配置表
10 */
11 wxJSSDK.shareApi = function(shareList){
12 if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完畢
13
14 // 獲取“分享到朋友圈”按鈕點擊狀態(tài)及自定義分享內(nèi)容接口
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 // 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
23 ParametersTimeline.success && ParametersTimeline.success();
24 },
25 cancel: function () {
26 // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
27 ParametersTimeline.cancel && ParametersTimeline.cancel();
28 }
29 });
30 }
31
32 // 獲取“分享給朋友”按鈕點擊狀態(tài)及自定義分享內(nèi)容接口
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 則要提供數(shù)據(jù)鏈接，默認為空
44 success: function () {
45 // 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
46 ParametersAppMessage.success &&
47 ParametersAppMessage.success();
48 },
49 cancel: function () {
50 // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
51 ParametersAppMessage.cancel && ParametersAppMessage.cancel();
52 }
53 });
54 }
55
56 // 獲取“分享到QQ”按鈕點擊狀態(tài)及自定義分享內(nèi)容接口
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 // 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
66 ParametersQQ.success && ParametersQQ.success();
67 },
68 cancel: function () {
69 // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
70 ParametersQQ.cancel && ParametersQQ.cancel();
71 }
72 });
73 }
74
75 // 獲取“分享到騰訊微博”按鈕點擊狀態(tài)及自定義分享內(nèi)容接口
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 // 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
85 ParametersWeibo.success && ParametersWeibo.success();
86 },
87 cancel: function () {
88 // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
89 ParametersWeibo.cancel && ParametersWeibo.cancel();
90 }
91 });
92 }
93
94 }else{
95 console.log("抱歉，wx沒有初始化完畢，請等待wx初始化完畢，再調(diào)用檢測API服
96 務(wù)。");
97 }
98
99 }
100
101 // 成功初始化后執(zhí)行API分享事務(wù)
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/p_w_picpaths/logo_35.png",
107 desc = "html5外包,HTML5外包,html5外寶,html5活,html5手機網(wǎng)站",
108 success = function(){
109 alert("分享成功回調(diào)");
110 },
111 cancel = function(){
112 alert("分享失敗回調(diào)");
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，則要提供數(shù)據(jù)鏈接，默認為空
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”方法。
以對象的參數(shù)形式，為調(diào)用“shareApi”方法的使用者配置具體的JSSDK的API。
分別進行配置填充。
用“wxJSSDK.readySuccessCall.push”增加JSSDK分享API的測試用例。
打開手機會看到如圖3.4所示的UI。點擊右上角的分享到朋友圈按鈕，會看到如圖3.5所示的UI。如果分享成功會彈出對應(yīng)的提示，如圖3.6所示。
圖3.4 測試用例分享界面
圖3.5 分享到朋友圈UI
圖3.6 分享到朋友圈成功提示
《微信公眾平臺網(wǎng)頁開發(fā)實戰(zhàn)——HTML5+JSSDK混合開發(fā)解密》
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
