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

本文并非是对微信JS-SDK说明文档的复制,而是通过一个简单的例子来更深入的了解使用微信JS-SDK,具体文档请参考官方说明文档《微信JS-SDK说明文档》。微信公众平台面向开发者开放微信内网页开发工具包(微信JS-SDK),通过微信JS-SDK提供的11类接口集,开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力,还可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。微信JS-SDK提供的11类接口(分享接口、图像接口、音频接口、智能接口、设备信息、界面操作、地理位置、微信扫一扫、微信小店、微信卡券、微信支付)在使用方式上完全相同,唯一需要注意的是,这11类接口并不是都开放的,有些接口非认证用户是没有权限的,比如分享接口,小店接口、卡券接口、支付接口则必须通过微信认证后才能使用。具体权限问题可参考你的接口权限表

开放必须项

  1.  开发者ID (应用ID和应用密匙)
  2.  在公众号(服务号)设置——功能设置(JS接口安全域名)中填写已备案的域名
  3.  服务器环境
  4.  简单的后台知识,如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对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:

  1.  success:接口调用成功时执行的回调函数。
  2.  fail:接口调用失败时执行的回调函数。
  3.  complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
  4.  cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。
  5.  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;
  }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值