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

来源：互联网发布：南征北战抄袭知乎编辑：程序博客网时间：2024/05/17 07:04

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

然后将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>12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061

重新上传到服务器，刷新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;
}

0 0