183
微信公眾平台開發 JS-SDK開發（圖像接口實例）
本文並非是對微信JS-SDK說明文檔的複製，而是通過一個簡單的例子來更深入的了解使用微信JS-SDK，具體文檔請參考官方說明文檔《微信JS-SDK說明文檔》。微信公眾平台麵向開發者開放微信內網頁開發工具包（微信JS-SDK），通過微信JS-SDK提供的11類接口集，開發者不僅能夠在網頁上使用微信本身的拍照、選圖、語音、位置等基本能力，還可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優質的網頁體驗。
微信JS-SDK提供的11類接口（分享接口、圖像接口、音頻接口、智能接口、設備信息、界麵操作、地理位置、微信掃一掃、微信小店、微信卡券、微信支付）在使用方式上完全相同，唯一需要注意的是，這11類接口並不是都開放的，有些接口非認證用戶是沒有權限的，比如分享接口，小店接口、卡券接口、支付接口則必須通過微信認證後才能使用。具體權限問題可參考你的接口權限表。
開發前提
- 開發者ID (應用ID和應用密匙)
- 在公眾號（服務號）設置——功能設置（JS接口安全域名）中填寫
已備案的域名 - 服務器環境
- 簡單的後台知識，如PHP
-
linux服務器，請確保目錄有可寫權限
本文以php為例
首先在微信開發者平台下載它的示例代碼，鏈接中包含php、java、nodejs以及python的示例代碼供第三方參考，這裏使用php包。我把php文件夾重命名為weixin放在網站根目錄下，如圖：
微信公眾平台開發 JS-SDK開發保存圖片到本地服務器
因為涉及到上傳到本地服務器，所以還需要一個api接口(api.php)，簡單展示下上傳保存代碼：
後端服務
//保存為同級目錄下api.php
require_once './config/app.php';
require_once './config/wexin.php';
//curl
function getcurl($url, $data=array()){
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));
$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch) ;
return $response;
}
/**
* 獲取微信access_token
*/
function get_access_token () {
global $wxConfig;
$url = "https://api.weixin.qq.com/cgi-bin/token";
$data = array(
'grant_type'=>'client_credential',
'appid'=> $wxConfig['appId'],
'secret'=> $wxConfig['appSecret']
);
$file = getcurl($url,$data);
$josn = json_decode($file,true);
$token = $josn['access_token'];
if($token){
return $token;
}else{
return null;
}
}
/**
* 上傳圖片
* @param media_id
*/
function upload($media_id) {
$access_token = get_access_token();
if (!$access_token) return false;
$url = "https://file.api.weixin.qq.com/cgi-bin/media/get?access_token=".$access_token."&media_color:rgb(167,29,93);font-weight:700;">if (!file_exists(UPLOAD_PATH)) {
mkdir('./upload/', 0775, true); //將圖片保存到upload目錄
}
$fileName = date('YmdHis').rand(1000,9999).'.jpg';
$targetName = './upload/'. $fileName;
$ch = curl_init($url);
$fp = fopen($targetName, 'wb');
curl_setopt($ch, CURLOPT_FILE, $fp); // 設置輸出文件的位置，值是一個資源類型
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_exec($ch);
curl_close($ch);
fclose($fp);
return '/upload/'.$fileName; //輸出文件名
}
/**
* 輸出json
*/
function toJson ($code = 200, $data = array(), $message = 'success') {
return json_encode(array('code' => $code, 'data' => $data, 'message' => $message));
}
if (isset($_GET['api'])) {
$api = $_GET['api'];
//上傳
if ($api == 'upload') {
$mediaId = $_POST['media_id'];
$file = upload($mediaId);
if ($file) {
exit (toJson(200, array('url' => $file)));
} else {
exit (toJson(400, null, 'error'));
}
}
}
前端頁麵
再簡單修改下sample.php
<?php
require_once './config/app.php';
require_once './config/wexin.php';
require_once "./libs/wexin/jssdk.php";
$jssdk = new JSSDK($wxConfig['appId'], $wxConfig['appSecret']);
$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="blank">
<meta name="format-detection" content="telephone=no, email=no">
<link rel="stylesheet" href="./public/css/weui.css" media="screen">
<title>微信上傳DEMO</title>
</head>
<body>
<article>
<a class="weui-btn weui-btn_plain-primary upload-toggle" id="js-upload">上傳圖片</a>
<figure><img src="" id="js-preview"></figure>
</article>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="./public/js/zepto.min.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"
]
});
wx.ready(function() {
/**
* [weixinUpload 調用微信接口實現上傳]
* @param {[function]} choose [選擇圖片後的回調]
* @param {[function]} upload [上傳後的回調]
*/
function weixinUpload(choose, upload) {
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
var localIds = res.localIds;
choose && choose(localIds); //選擇圖片後回調
// 上傳照片
wx.uploadImage({
localId: '' + localIds,
isShowProgressTips: 1, //開啟上傳進度
success: function(res) {
serverId = res.serverId;
upload && upload(serverId); //上傳圖片後回調
}
});
}
});
}
/**
* [uploadImage 上傳圖片到本地服務器]
* @param {[type]} mediaId [圖片serverID]
* @param {Function} callback [回調]
*/
function uploadImage(mediaId, callback) {
$.ajax({
type: "POST",
url: "api.php?api=upload",
data: {
media_id: serverId
},
dataType: "json",
success: function(result) {
if (result.code == 200) {
callback(result.data);
} else {
alert("上傳失敗！");
}
},
error: function() {
alert("係統異常，請稍後重試");
}
});
}
var $uploadButton = $('#js-upload')
var $uploadPreview = $('#js-preview')
//點擊上傳按鈕
$uploadButton.on('click', function() {
weixinUpload(
function(localIds) {
$uploadPreview.attr('src', localIds); //微信本地圖片地址,可以用來做上傳前預覽
},
function(serverId) {
uploadImage(serverId, function(data) {
$uploadPreview.attr('src', data.url); //返回真實的圖片地址
});
}
);
})
});
</script>
</body>
</html>
好了，將修改後的代碼連同新建的api.php同時上傳到服務器。該服務器域名必須和你在微信設置中的域名一致。我上傳到了根目錄，通過firefox提供的頁麵二維碼功能，在微信上掃一掃即可測試。截圖如下：
微信上傳圖片測試圖片說明
- [圖一] 表示我們的微信配置正確
- [圖二] 點擊
上傳圖片按鈕後彈出拍照，從手機相冊選擇等功能按鈕 - [圖三] 進入了手機相冊
- [圖四] 選擇一張圖片後，返回該圖片的
localId - [圖五] 利用
localId作為圖片預覽，並且生成了serverID - [圖六]
api上傳並保存了圖片到本地服務器，返回圖片在本地服務器的地址，並且回調在了頁麵上
小結
通過以上兩個簡單的例子，基本可以掌握微信JS-SDK的使用方法。11個接口使用方式基本相同，你可以一一嚐試。官方的說明是：通過ready接口處理成功驗證通過error接口處理失敗驗證
所有接口通過wx對象(也可使用jWeixin對象)來調用，參數是一個對象，除了每個接口本身需要傳的參數之外，還有以下通用參數：
- success：接口調用成功時執行的回調函數。
- fail：接口調用失敗時執行的回調函數。
- complete：接口調用完成時執行的回調函數，無論成功或失敗都會執行。
- cancel：用戶點擊取消時的回調函數，僅部分有用戶取消操作的api才會用到。
- trigger: 監聽Menu中的按鈕點擊時觸發的方法，該方法僅支持Menu中的相關接口。
具體可參考官方API。
最後更新：2017-11-03 11:04:00