微平臺開發之(JS-SDK開發影象介面例項)
本文並非是對微信JS-SDK說明文件的複製,而是通過一個簡單的例子來更深入的瞭解使用微信JS-SDK,具體文件請參考官方說明文件《微信JS-SDK說明文件》。微信公眾平臺面向開發者開放微信內網頁開發工具包(微信JS-SDK),通過微信JS-SDK提供的11類介面集,開發者不僅能夠在網頁上使用微信本身的拍照、選圖、語音、位置等基本能力,還可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力,為微信使用者提供更優質的網頁體驗。微信JS-SDK提供的11類介面(分享介面、影象介面、音訊介面、智慧介面、裝置資訊、介面操作、地理位置、微信掃一掃、微信小店、微信卡券、微信支付)在使用方式上完全相同,唯一需要注意的是,這11類介面並不是都開放的,有些介面非認證使用者是沒有許可權的,比如分享介面,小店介面、卡券介面、支付介面則必須通過微信認證後才能使用。具體許可權問題可參考你的
開放必須項
- 開發者ID (應用ID和應用密匙)
- 在公眾號(服務號)設定——功能設定(JS介面安全域名)中填寫已備案的域名
- 伺服器環境
- 簡單的後臺知識,如PHP
本文將通過PHP(只會PHP)來演示影象介面(其他介面使用方式相似)
首先在微信開發者平臺下載它的示例程式碼,連結中包含php、java、nodejs以及python的示例程式碼供第三方參考,這裡使用php包。我把php資料夾重新命名為weixin放在網站根目錄下,如圖:
這裡我們只修改sample.php.程式碼如下:
<?php
//設定報錯級別,忽略警告,設定字元
error_reporting(E_ALL || ~E_NOTICE);
header("Content-type:text/html; charset=utf-8");
require_once "jssdk.php";
$jssdk = new JSSDK("AppID", "AppSecret");
$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<!--因為在手機中,所以新增viewport-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>微信測試</title>
</head>
<body>
<button id="weixin" style="display: block;margin: 2em auto" >微信介面測試</button>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
debug: true, //除錯階段建議開啟
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
/*
* 所有要呼叫的 API 都要加到這個列表中
* 這裡以影象介面為例
*/
"chooseImage",
"previewImage",
"uploadImage",
"downloadImage"
]
});
var btn = document.getElementById('weixin');
wx.ready(function () {
// 在這裡呼叫 API
btn.onclick = function(){
wx.chooseImage ({
success : function(res){
var localIds = res.localIds;
// 返回選定照片的本地ID列表,localId可以作為img標籤的src屬性顯示圖片
}
});
}
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
然後將weixin目錄上傳到你的伺服器上,該伺服器域名必須和你在微信設定中的域名一致。我上傳到了根目錄,通過firefox提供的頁面二維碼功能,在微信上掃一掃即可測試。截圖如下:
圖1-4分別為一進去(因為開啟了debug),所以會顯示你成功呼叫介面;圖二表示點選了按鈕後,將彈出微信拍照或者從照片中選擇;圖三是我點選了從手機相簿中選擇後調出你的手機相簿列表;圖四是我選擇了其中某一張照片,點選完成後返回的該照片資訊(圖片的本地ID)
接著,來測試一下上傳介面,修改HTML程式碼如下:
<button id="weixin" style="display: block;margin: 2em auto">微信介面測試</button>
<button id="upload" style="display: block;margin: 2em auto">上傳介面測試</button>
<button id="getServices" style="display: block;margin: 2em auto">獲取已上傳的圖片</button>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
debug: true, //除錯階段建議開啟
appId: '<?php echo $signPackage["appId"];?>',
timestamp: <?php echo $signPackage["timestamp"];?>,
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [
/*
* 所有要呼叫的 API 都要加到這個列表中
* 這裡以影象介面為例
*/
"chooseImage",
"previewImage",
"uploadImage",
"downloadImage"
]
});
var btn = document.getElementById('weixin');
//定義images用來儲存選擇的本地圖片ID,和上傳後的伺服器圖片ID
var images = {
localId: [],
serverId: []
};
wx.ready(function () {
// 在這裡呼叫 API
btn.onclick = function(){
wx.chooseImage ({
success : function(res){
images.localId = res.localIds; //儲存到images
// 返回選定照片的本地ID列表,localId可以作為img標籤的src屬性顯示圖片
}
});
}
document.getElementById('upload').onclick = function(){
var i = 0, len = images.localId.length;
function wxUpload(){
wx.uploadImage({
localId: images.localId[i], // 需要上傳的圖片的本地ID,由chooseImage介面獲得
isShowProgressTips: 1, // 預設為1,顯示進度提示
success: function (res) {
i++;
//將上傳成功後的serverId儲存到serverid
images.serverId.push(res.serverId);
if(i < len){
wxUpload();
}
}
});
}
wxUpload();
}
document.getElementById('getServices').onclick = function(){
alert(images.serverId);
}
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
重新上傳到伺服器,重新整理Firefox,生成新二維碼,微信掃描,截圖如下
圖1是修改後的頁面;圖2是點選上傳按鈕後的loading提示(isShowProgressTips: 1, // 預設為1,顯示進度提示);圖3是上傳成功後返回的該圖片的serverId;圖4是點選獲取已上傳的圖片按鈕後返回的已上傳的圖片的資訊;上傳圖片有效期3天,可用微信多媒體介面下載圖片到自己的伺服器,此處獲得的 serverId 即 media_id
通過以上兩個簡單的例子,基本可以掌握微信JS-SDK的使用方法。11個介面使用方式基本相同,你可以一一嘗試。官方的說明是:
通過ready介面處理成功驗證
通過error介面處理失敗驗證
所有介面通過wx物件(也可使用jWeixin物件)來呼叫,引數是一個物件,除了每個介面本身需要傳的引數之外,還有以下通用引數:
- success:介面呼叫成功時執行的回撥函式。
- fail:介面呼叫失敗時執行的回撥函式。
- complete:介面呼叫完成時執行的回撥函式,無論成功或失敗都會執行。
- cancel:使用者點選取消時的回撥函式,僅部分有使用者取消操作的api才會用到。
- trigger: 監聽Menu中的按鈕點選時觸發的方法,該方法僅支援Menu中的相關介面。
具體可參考官方API。
經過測試需要修改httpGet函式為:
private function httpGet($url) {
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$res = curl_exec($curl);
curl_close($curl);
return $res;
}