微信公眾平臺開發JS-SDK開發（影像介面例項）

水靈兒發表於2017-11-03
JS

本文並非是對微信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開發微信公眾平臺開發 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。


相關文章