微信公衆平臺網頁開發實戰--1.微信分享一個網頁到朋友圈

時間 2019-11-11

標籤微信公衆平臺網頁開發實戰分享一個朋友欄目 HTML 简体版

原文原文鏈接

對微信的JSSDK進行封裝一下，建立一份相似的文件結構，增長index.html與shareApi.js文件，結構如圖3.3所示。

圖3.3 3.2節文件結構
另外，提醒讀者一下，wxJSSDK.js文件的JSSDK環境配置中，須要更改一下配置參數，代碼以下：html

01            jsApiList: [ // 其餘代碼略
02                "onMenuShareTimeline",
03                "onMenuShareAppMessage",
04                "onMenuShareQQ",
05                "onMenuShareWeibo"
06            ]         // 必填，須要使用的JS接口列表，全部JS接口列表見附錄B

index.html文件增長以下代碼(HTML5網頁)：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的測試封裝方案代碼：jquery

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    });

【代碼解釋】微信