本文并非是对微信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开发
保存图片到本地服务器
因为涉及到上传到本地服务器，所以还需要一个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。
