# 微信公众平台开发 JS-SDK开发(图像接口实例) **本文内容已过于陈旧,请以最新微信文档为准** 本文并非是对微信`JS-SDK`说明文档的复制,而是通过一个简单的例子来更深入的了解使用微信`JS-SDK`,具体文档请参考官方说明文档《[微信JS-SDK说明文档](http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html)》。微信公众平台面向开发者开放微信内网页开发工具包(微信JS-SDK),通过微信JS-SDK提供的11类接口集,开发者不仅能够在网页上使用微信本身的拍照、选图、语音、位置等基本能力,还可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。 微信JS-SDK提供的11类接口(`分享接口、图像接口、音频接口、智能接口、设备信息、界面操作、地理位置、微信扫一扫、微信小店、微信卡券、微信支付`)在使用方式上完全相同,唯一需要注意的是,这11类接口并不是都开放的,有些接口非认证用户是没有权限的,比如分享接口,小店接口、卡券接口、支付接口则必须通过微信认证后才能使用。具体权限问题可参考你的[接口权限表](https://mp.weixin.qq.com/advanced/advanced?action=dev&t=advanced/dev&token=2107682138&lang=zh_CN)。
### 开发前提 - 开发者ID (应用ID和应用密匙) - 在公众号(服务号)设置——功能设置(JS接口安全域名)中填写`已备案`的域名 - 服务器环境 - 简单的后台知识,如PHP - `linux`服务器,请确保目录有`可写权限` *本文以`php`为例* 首先在微信开发者平台下载它的[示例代码](http://demo.open.weixin.qq.com/jssdk/sample.zip),链接中包含php、java、nodejs以及python的示例代码供第三方参考,这里使用php包。我把php文件夹重命名为weixin放在网站根目录下,如图: ![微信公众平台开发 JS-SDK开发](//img.smohan.net/article/4f4ac93a1425d32976218a6892b59b6e.jpg) ### 保存图片到本地服务器 因为涉及到上传到本地服务器,所以还需要一个api接口(`api.php`),简单展示下上传保存代码: #### 后端服务 ```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` ``` html GetSignPackage(); ?> 微信上传DEMO
上传图片
``` 好了,将修改后的代码连同新建的`api.php`同时上传到服务器。`该服务器域名必须和你在微信设置中的域名一致`。我上传到了根目录,通过firefox提供的页面二维码功能,在微信上扫一扫即可测试。截图如下: ![微信上传图片测试](//img.smohan.net/article/b3687e63ae7ae79e1f98741efb950bd4.jpg '微信上传图片测试') ### 图片说明 - [图一] 表示我们的微信配置正确 - [图二] 点击 `上传图片` 按钮后弹出 `拍照`,`从手机相册选择` 等功能按钮 - [图三] 进入了手机相册 - [图四] 选择一张图片后,返回该图片的`localId` - [图五] 利用`localId`作为图片预览,并且生成了`serverID` - [图六] `api` 上传并保存了图片到本地服务器,返回图片在本地服务器的地址,并且回调在了页面上 ### 小结 通过以上两个简单的例子,基本可以掌握微信JS-SDK的使用方法。11个接口使用方式基本相同,你可以一一尝试。官方的说明是: `通过ready接口处理成功验证` `通过error接口处理失败验证` 所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数: - success:接口调用成功时执行的回调函数。 - fail:接口调用失败时执行的回调函数。 - complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。 - cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。 - trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。 具体可参考官方API。 原文链接:[https://smohan.net/blog/efg5ty](https://smohan.net/blog/efg5ty) 原文标题:[微信公众平台开发 JS-SDK开发(图像接口实例)] 原文标签:[javascript,微信,js-sdk] 创建于[Thu Apr 30 2015 23:19:40 GMT+0800 (中国标准时间)],最后更新与[Sun Aug 28 2022 15:39:51 GMT+0800 (中国标准时间)]