微信的圖像有3種JSSDK的API，可以做一些簡單的需求，本節講解一個讓用戶在手機中選擇照片然後分享的項目。 ...
通過對需求的瞭解，可以將其分解為：
（1）微信端手機用戶，可以使用微信的JSSDK。
（2）選取圖片，使用JSSDK的“chooseImage”，由於分享圖片時本地地址無法分享，因此還需要JSSDK的“uploadImage”。
（3）分享到朋友圈，需要JSSDK的“onMenuShareTimeline”。
綜合起來，業務邏輯如圖4.5所示。
圖4.5 業務邏輯結構圖
首先將JSSDK的環境複製一份到本節目錄下，創建index.html文件、imageSharing.js文件，目錄結構如圖4.6所示。
圖4.6 4.2節目錄結構
修改一下JSSDK環境的配置文件，代碼如下：
01 jsApiList: [ // 必填，需要使用的JS介面列表，所有JS介面列表見附錄B 02 "chooseImage", 03 "previewImage", 04 "uploadImage", 05 "onMenuShareTimeline" 06 ] 07 //其他代碼略
依據需求，構建一個“id”等於“chooseImage”的點擊按鈕，以及點擊按鈕後，用來顯示選中圖片的容器，在index.html文件中增加如下代碼：
01 <!DOCTYPE html>
02 <html lang="en">
03 <head>
04 <meta charset="UTF-8">
05 <meta name="viewport" content="width=device-width, initial-scale=1.0,
06 minimum-scale=1, maximum-scale=1.0, user-scalable=no">
07 <title>第4章 4.2節-實例：從手機相冊中選照片然後分享</title>
08 <!--依賴文件：jQuery-->
09 <script src="./js/jquery-1.11.2.min.js"></script>
10 <!--依賴文件：微信的JSSDK源文件-->
11 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
12 <!--依賴文件：coolie-->
13 <script src="./js/cookie.js"></script>
14 <!--JSSDK的環境-->
15 <script src="./js/wxJSSDK.js"></script>
16 <!--引入檢測API的圖像服務-->
17 <script src="imageSharing.js"></script>
18 <style>
19 input{
20 width: 100%;
21 padding: 0.2em;
22 background-color: #5eb95e;
23 font-size: 1.4em;
24 background-image: linear-gradient(to bottom, #62c462, #57a957);
25 background-repeat: repeat-x;
26 color: #ffffff;
27 text-align: center;
28 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
29 border-radius: 0.3em;
30 }
31 </style>
32 </head>
33 <body>
34 <h1 style="font-size: 8em">:)</h1>
35 <b style="font-size: 2em">實例：從手機相冊中選照片然後分享，支持選擇1張圖片！
36 </b><br /><br />
37 <p id="imageContainer" style="text-align: center;width: 100%"></p>
38 <p id="selectImg" style="color: #5eb95e;text-align: center">沒有自定義分享圖片</p>
39 <input type="button" value="請選擇分享圖片" id="chooseImage" /><br /><br />
40 </body>
41 </html>
在imageSharing.js文件中增加處理業務的代碼如下：
01 /*
02 函數名稱：wxJSSDK.shareApi
03 函數功能：為wxJSSDK增加分享模塊
04 參數：
05 shareList（Array） 必選項，待分享的API配置表
06 */
07 wxJSSDK.shareApi = function(shareList){
08 if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完畢
09
10 //獲取“分享到朋友圈”按鈕點擊狀態及自定義分享內容介面
11 if(shareList.onMenuShareTimeline){
12 var ParametersTimeline = shareList.onMenuShareTimeline;
13 wx.onMenuShareTimeline({
14 title: ParametersTimeline.title, // 分享標題
15 link: ParametersTimeline.link, // 分享鏈接
16 imgUrl: ParametersTimeline.imgUrl, // 分享圖標
17 success: function () {
18 // 用戶確認分享後執行的回調函數
19 ParametersTimeline.success && ParametersTimeline.success();
20 },
21 cancel: function () {
22 // 用戶取消分享後執行的回調函數
23 ParametersTimeline.cancel && ParametersTimeline.cancel();
24 }
25 });
26 }
27
28 }else{
29 console.log("抱歉，wx沒有初始化完畢，請等待wx初始化完畢，再調用分享服務。");
30 }
31 }
32 /*
33 函數名稱：wxJSSDK.imageApi
34 函數功能：為wxJSSDK增加圖像服務
35 參數：
36 imageApi 圖像API Object 配置
37 */
38 wxJSSDK.imageApi = function(imageApi){
39 if(wxJSSDK.isReady){//wxJSSDK.isReady 查看微信JSSDK是否初始化完畢
40 if(imageApi){
41
42 imageApi.chooseImage && wx.chooseImage({//拍照或從手機相冊中選圖介面
43 success: function (res) {
44 imageApi.chooseImage.success &&
45 imageApi.chooseImage.success(res);
46 }
47 });
48
49 imageApi.previewImage && wx.previewImage({ // 預覽圖片介面
50 current: imageApi.previewImage.current, // 當前顯示的圖片鏈接
51 urls: imageApi.previewImage.urls // 需要預覽的圖片鏈接列表
52 });
53
54 imageApi.uploadImage && wx.uploadImage({ // 上傳圖片介面
55 localId: imageApi.uploadImage.localId, // 需要上傳的圖片的本地ID，
56 由chooseImage介面獲得
57 isShowProgressTips: imageApi.uploadImage.isShowProgressTips || 1, //
58 預設為1，顯示進度提示
59 success: function (res) {
60 imageApi.uploadImage.success &&
61 imageApi.uploadImage.success(res);
62 }
63 });
64
65 imageApi.downloadImage && wx.downloadImage({//下載圖片介面
66 serverId:imageApi.downloadImage.serverId, // 需要下載的圖片的伺服器端
67 ID，由uploadImage介面獲得
68 isShowProgressTips: imageApi.downloadImage.isShowProgressTips || 1, //
69 預設為1，顯示進度提示
70 success: function (res) {
71 imageApi.downloadImage.success &&
72 imageApi.downloadImage.success(res);
73 }
74 });
75 }else{
76 console.log("缺少配置參數");
77 }
78 }else{
79 console.log("抱歉，wx沒有初始化完畢，請等待wx初始化完畢，再調用圖像介面服
80 務。");
81 }
82
83 }
84
85 window.onload = function(){
86 var chooseImageID, // 拍照或從手機相冊中選圖介面
87 shareImage,
88 uploadImage = function(back){
89 wxJSSDK.imageApi({ // 上傳圖片···
90 uploadImage:{
91 localId:chooseImageID.toString(),
92 success:function(res){//臨時access_token，上傳圖片成功之後，執行分
93 享操作
94 shareImage =
95 "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=
96 eQv3HPwEFxwsw8cyh5O7DjaNOoGd4d-jYtG_c9uW-YbwUYxkMywh_O3LCC
97 ZtmX8ZWr8np0Q5CqAox7lghNkNuiNHU8M618jbRvcaLjQuHq8&media_id="+res.serverId; // 返回圖片的伺服器端ID
98 back && back();
99 }
100 }
101 });
102 },
103 shareTimeline = function(){
104 uploadImage(function(){
105 wxJSSDK.shareApi({ // 分享圖片···
106 onMenuShareTimeline : { // 分享到朋友圈
107 title: "實例：從手機相冊中選照片然後分享！", // 分享標題
108 link: 'http://weibo.com/xixinliang', // 分享鏈接
109 imgUrl: shareImage, // 分享圖標
110 success: function () {
111
112 },
113 cancel: function () {
114
115 }
116 }
117 });
118 });
119 };
120 $("#chooseImage").click(function(){
121 wxJSSDK.imageApi({
22 chooseImage:{
23 success:function(res){
24 chooseImageID = res.localIds[0]; // 返回選定照片的本地ID列表，
25 localId可以作為img標簽的src屬性顯示圖片
26 $("#imageContainer").html("<img style='width: 30%'
27 src='"+chooseImageID+"'>");
28 $("#selectImg").html("已選擇圖片，請點擊右上角分享到朋友圈按鈕");
29 shareTimeline();
30 }
31 }
32 });
33 });
34 }
【代碼解釋】
- 在index.html中，創建了一個分享自定義圖片的按鈕，如圖4.7所示。
- 點擊分享按鈕，調用JSSDK的選擇圖片API，讓用戶選中圖片，如圖4.8所示。
圖4.7 自定義分享圖片UI
圖4.8 選擇圖片之後的UI
- 之後，調用“uploadImage”上傳圖片。
- 上傳成功之後，返回上傳之後的服務端“serverId”，再調用下載多媒體的API，將圖片賦值給JSSDK的分享API“onMenuShareTimeline”。
用戶可以查看分享效果，如圖4.9和圖4.10所示。
圖4.9 分享到朋友圈編輯的UI
圖4.10 成功分享自定義圖片到朋友圈
《微信公眾平臺網頁開發實戰——HTML5+JSSDK混合開發解密》
歡迎一起交流本書
