微信公眾平臺開發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 = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=".$access_token."&media_id=".$media_id;
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="http://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。
相關文章
- 微信公眾平臺開發入門
- 1.PHP微信公眾平臺開發(一) 配置介面PHP
- PHP微信公眾平臺開發視訊PHP
- 微信公眾平臺開發之店鋪類
- 6.PHP微信公眾平臺開發 - 翻譯功能開發PHP
- 7.PHP微信公眾平臺開發 聊天機器人開發PHP機器人
- 4.PHP微信公眾平臺開發 - 簡單回覆功能開發PHP
- 2.PHP微信公眾平臺開發(二) 公眾平臺示例程式碼分PHP
- 9.微信公眾平臺開發 - 資料庫操作資料庫
- 微信公眾號開發
- 5.PHP微信公眾平臺開發 - 天氣預報功能開發PHP
- Spring Boot 開發微信公眾號後臺Spring Boot
- uni-app微信公眾號web JS-SDK開發之一接入APPWebJS
- Nodejs微信公眾號開發NodeJS
- .net開發微信公眾號
- 微信公眾號開發-分享
- 微信公眾號定時群發平臺
- Python開發微信公眾號後臺(系列二)Python
- onethink二次開發微信多使用者公眾平臺
- 8.PHP微信公眾平臺開發 自定義選單功能PHP
- 3.PHP微信公眾平臺開發 訂閱事件處理PHP事件
- 微信開發系列之一 - 微信公眾號開發的開發環境搭建開發環境
- 淺析微信支付:公眾平臺卡券功能開通、HTML5線上發券(JS-SDK介面)、檢視卡券詳情HTMLJS
- 基於svelteKit開發仿微信app介面聊天例項APP
- 微信公眾號開發5-自定義選單-微信開發phpPHP
- 微信公眾號開發之坑(一)
- Python+Tornado開發微信公眾號Python
- PHP微信公眾號開發——公共方法PHP
- 【Java】微信公眾號開發筆記Java筆記
- Laravel+easywechat 開發微信公眾號Laravel
- 微信公眾號開發推送事件排重事件
- 微信公眾號支付開發手記(node)
- 記一次微信公眾號開發
- 微信公眾號開發Django JSSDK授權DjangoJS
- 微信公眾號開發(一)基礎配置
- 微信公眾號開發之客服訊息
- 微信公眾號開發 —— 微信網頁授權小記網頁
- 微信公眾平臺/擴充套件套件
- 微信公眾平臺基礎框架框架