資訊專欄INFORMATION COLUMN
摘要：點擊右上角的分享到朋友圈按鈕，會看到如圖所示的。圖測試用例分享界面圖分享到朋友圈圖分享到朋友圈成功提示微信公眾平臺網(wǎng)頁開發(fā)實戰(zhàn)混合開發(fā)解密歡迎一起交流本書
對微信的JSSDK進行封裝一下，創(chuàng)建一份類似的文件結構，增加index.html與shareApi.js文件，結構如圖3.3所示。
圖3.3 3.2節(jié)文件結構
另外，提醒讀者一下，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 02 03 04 05第3章 3.2節(jié) 分享接口的作用 06 07 08 09 10 11 12 13 14 15 16 17 18:)
19 分享接口的作用！ 20 21
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)及自定義分享內容接口
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í)行的回調函數(shù)
23 ParametersTimeline.success && ParametersTimeline.success();
24 },
25 cancel: function () {
26 // 用戶取消分享后執(zhí)行的回調函數(shù)
27 ParametersTimeline.cancel && ParametersTimeline.cancel();
28 }
29 });
30 }
31
32 // 獲取“分享給朋友”按鈕點擊狀態(tà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í)行的回調函數(shù)
46 ParametersAppMessage.success &&
47 ParametersAppMessage.success();
48 },
49 cancel: function () {
50 // 用戶取消分享后執(zhí)行的回調函數(shù)
51 ParametersAppMessage.cancel && ParametersAppMessage.cancel();
52 }
53 });
54 }
55
56 // 獲取“分享到QQ”按鈕點擊狀態(tà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í)行的回調函數(shù)
66 ParametersQQ.success && ParametersQQ.success();
67 },
68 cancel: function () {
69 // 用戶取消分享后執(zhí)行的回調函數(shù)
70 ParametersQQ.cancel && ParametersQQ.cancel();
71 }
72 });
73 }
74
75 // 獲取“分享到騰訊微博”按鈕點擊狀態(tà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í)行的回調函數(shù)
85 ParametersWeibo.success && ParametersWeibo.success();
86 },
87 cancel: function () {
88 // 用戶取消分享后執(zhí)行的回調函數(shù)
89 ParametersWeibo.cancel && ParametersWeibo.cancel();
90 }
91 });
92 }
93
94 }else{
95 console.log("抱歉，wx沒有初始化完畢，請等待wx初始化完畢，再調用檢測API服
96 務。");
97 }
98
99 }
100
101 // 成功初始化后執(zhí)行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手機網(wǎng)站",
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，則要提供數(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ù)形式，為調用“shareApi”方法的使用者配置具體的JSSDK的API。
分別進行配置填充。
用“wxJSSDK.readySuccessCall.push”增加JSSDK分享API的測試用例。
打開手機會看到如圖3.4所示的UI。點擊右上角的分享到朋友圈按鈕，會看到如圖3.5所示的UI。如果分享成功會彈出對應的提示，如圖3.6所示。
圖3.4 測試用例分享界面
圖3.5 分享到朋友圈UI
圖3.6 分享到朋友圈成功提示
《微信公眾平臺網(wǎng)頁開發(fā)實戰(zhàn)——HTML5+JSSDK混合開發(fā)解密》
歡迎一起交流本書
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/83463.html
摘要：需求最近在做一個項目需求，分享領好書活動，獲取用戶的個人信息以及，并誘導用戶分享給好友或朋友圈，達到裂變拉新的目的。 需求 最近在做一個項目需求，分享領好書活動，獲取用戶的個人信息以及unionID，并誘導用戶分享給好友或朋友圈，達到裂變拉新的目的。在做的過程中遇到了一些坑的地方，所以回過來總結一下 技術方案 使用微信JS-SDK自定義分享到好友和分享到朋友圈 實現(xiàn)步驟 1、要實現(xiàn)微信...
摘要：在實際開發(fā)中，無論是做端端還是微信公眾號等類型的項目的時候，或多或少都會涉及到微信相關的開發(fā)，最近公司項目要求實現(xiàn)微信網(wǎng)頁授權，并獲取微信用戶基本信息的功能及微信分享的功能，現(xiàn)在總算完成了，但開發(fā)過程中遇到好幾個坑。 在實際開發(fā)中，無論是做PC端、WebApp端還是微信公眾號等類型的項目的時候，或多或少都會涉及到微信相關的開發(fā)，最近公司項目要求實現(xiàn)微信網(wǎng)頁授權，并獲取微信用戶基本信息的...
閱讀 2820·2021-10-26 09:48
閱讀 1689·2021-09-22 15:22
閱讀 4071·2021-09-22 15:05
閱讀 626·2021-09-06 15:02
閱讀 2617·2019-08-30 15:52
閱讀 2119·2019-08-29 18:38
閱讀 2768·2019-08-28 18:05
閱讀 2339·2019-08-26 13:55
