微信公眾平臺網頁開發實戰--1.微信分享一個網頁到朋友圈
阿新 • • 發佈：2017-06-16
微信開發 html5 jssdk 實戰 網頁開發
對微信的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混合開發解密》
微信公眾平臺網頁開發實戰--1.微信分享一個網頁到朋友圈