前不久做了一个微信公众号项目，有用到JSSDK接口，今晚正好有空，就开始动手整理。如何获得accesstoken和jsapitiket以及生成签名就不细说了，大家看接口文档，有不明白的地方可以给我留言。本文主要介绍了如何去使用JSSDK的部分接口，包括选择图片、上传图片、下载图片、获取地理位置、调用微信扫一扫，其他接口以后补充，代码我贴出来了，测试通过。
接口文档官方地址：https://mp.weixin.qq.com/wiki。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>接入微信JSSDK</title>
<base href="<%=basePath%>">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
$(function() {
var appId = '${sign.appId}';
var nonceStr = '${sign.nonceStr}';
var timestamp = '${sign.timestamp}';
var signature = '${sign.signature}';
wx.config({
debug: true,
appId: appId,
timestamp: timestamp,
nonceStr: nonceStr,
signature: signature,
jsApiList: [
'checkJsApi',
'chooseImage',
'uploadImage',
'downloadImage',
'getLocation',
'scanQRCode'
]
});
var images = {
localId: [],
serverId: [],
downloadId: []
};
//选择图片
$("#chooseImage").bind("click", function() {
wx.chooseImage({
count: 9, // 默认9，最多可选9张图片
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function(res) {
images.localId = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
}
});
});
//上传图片
$("#uploadImage").bind("click", function() {
var i = 0,
len = images.localId.length;
if(len == 0) {
alert('请先使用 chooseImage 接口选择图片', null);
return;
}
// if(images.localId.length > 1) {
// alert('目前仅支持单张图片上传,请重新上传');
// images.localId = [];
// return false;
// }
function wxUpload() {
wx.uploadImage({
localId: images.localId[i], // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 9, // 默认为1，显示进度提示
success: function(res) {
i++;
alert('已上传：' + i + '/' + len);
//将上传成功后的serverId保存到serverid
images.serverId.push(res.serverId);
//上传成功，下载到本地
wxImgCallback(res.serverId);
if(i < len) {
wxUpload();
}
},
fail: function(res) {
alert('上传失败');
}
});
}
wxUpload();
});
//下载图片
$("#downloadImage").bind("click", function() {
var i = 0,
len = images.serverId.length;
if(len == 0) {
alert('请先使用 chooseImage 接口选择图片', null);
return;
}
function wxDownload() {
wx.downloadImage({
serverId: images.serverId[i], // 需要下载的图片的服务器端ID，由uploadImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function(res) {
i++;
alert('已下载：' + i + '/' + len);
images.downloadId.push(res.localId);
if(i < len) {
wxDownload();
}
}
});
}
wxDownload();
});
//获取地理位置
$("#openLocation").bind("click", function() {
wx.getLocation({
success: function(res) {
alert(JSON.stringify(res));
},
cancel: function(res) {
alert('用户拒绝授权获取地理位置');
},
fail: function(res) {
alert(JSON.stringify(res));
}
});
});
//调用扫一扫
$("#scanQRCode").bind("click", function() {
wx.scanQRCode({
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
alert(result);
}
});
});
});
function wxImgCallback(serverId) {
$.ajax({
type: "get",
url: "${base}/mall/download",
contentType: "application/json;charset=utf-8",
data: "serverId=" + serverId,
success: function(data) {
if(data == 1){
alert("下载成功");
}
},
error: function(data) {
alert("失败");
}
});
}
wx.error(function(res) {
alert("出错了：" + res.errMsg);
});
</script>
</head>
<body>
<input type="button" id="chooseImage" value="选择图片" /> <br>
<input type="button" id="uploadImage" value="上传图片" /> <br>
<input type="button" id="downloadImage" value="下载图片" /> <br>
<input type="button" id="openLocation" value="查看位置" /> <br>
<input type="button" id="scanQRCode" value="扫一扫" /> <br>
</body>
</
（转载注明出处，原文地址：http://blog.csdn.net/ke7in1314/article/details/72904491）
