微信公众平台开发 JS-SDK开发(图像接口实例)-阿里云开发者社区

开发者社区> 阿里云SAP上云> 正文
登录阅读全文

微信公众平台开发 JS-SDK开发(图像接口实例)

简介: 本文并非是对微信JS-SDK说明文档的复制,而是通过一个简单的例子来更深入的了解使用微信JS-SDK,具体文档请参考官方说明文档《微信JS-SDK说明文档》。微信公众平台面向开发者开放微信内网页开发工具包(微信JS-SDK),通过微信JS-SDK提供的11类接口集,开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力,还可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

本文并非是对微信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。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: