微平台开发之（JS-SDK开发图像接口实例）

最新推荐文章于 2024-10-07 10:34:26 发布

思必得

最新推荐文章于 2024-10-07 10:34:26 发布

阅读量7.4k

点赞数

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