第一步:登录微信公众平台。
设置——公众号设置——得到原始ID
设置——公众号设置——功能设置——配置JS接口安全域名
第二步:引入JS文件。
在需要调用JS接口的页面引入JS文件:http://res.wx.qq.com/open/js/jweixin-1.0.0.js
如果你的页面启用了https,引入JS文件 :https://res.wx.qq.com/open/js/jweixin-1.0.0.js
第三步:通过config接口注入权限验证配置
var pathName = window.location.pathname + window.location.search + window.location.hash;
var sendData = {
"param": JSON.stringify({
"ghId": "第一步得到的原始ID",
"url": "第一步配置的域名"+ pathName
})
};
ece.post("接口地址", sendData).suc(function (result) {
if(0 == result.code){
//所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用
wx.config({
debug: false,
appId: result.data.appId,
timestamp: result.data.timestamp,
nonceStr: result.data.nonceStr,
signature: result.data.signature,
jsApiList:[//需要使用的JS接口列表
'chooseImage',
'uploadImage'
]
});
}
}).err(function (result) {
});
第四步:通过ready接口处理成功失败验证
//单张图片上传
wx.ready(function(){
$("#infoHead").click(function(){
wx.chooseImage({//选择图片
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
wx.uploadImage({//上传图片
localId: res.localIds[0],
isShowProgressTips: 1,
success: function (res) {
// 返回图片的服务器端ID
var serverId = res.serverId;
//为了用户体验,先直接读取,因为从服务器读取需要一定时间。
//之后服务器读取图片完成替换。
----------------------------------------
//直接读取图片,有效期3天.
$(".vipimg").attr("src", res.localIds);
//从服务器读取图片.
ece.get("接口" + serverId).suc(function (res) {
if('0' === res.code){
$(".vipimg").attr("src", res.data);
}
});
});
});
}
});
}
})
});
wx.error(function (res) {
console.log(res.errMsg);
});
备注:上传图片有效期3天,可用微信多媒体接口下载图片到自己的服务器,此处获得的 serverId 即 media_id。
//多张图片上传
wx.ready(function(){
$('#filePicker').on('click', function () {
wx.chooseImage({
count: 6,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
var localIds = res.localIds;
syncUpload(localIds);
}
});
});
});
var syncUpload = function(localIds){
var localId = localIds.pop();
wx.uploadImage({
localId: localId,
isShowProgressTips: 1,
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
//其他对serverId做处理的代码
if(localIds.length > 0){
syncUpload(localIds);
}
}
});
};
备注:目前只支持一次上传一张,多张图片需等前一张图片上传之后再调用该接口,也就是说,如果想要上传多张图片,需要将之前并行上传改成串行。
补充——微信sdk坑:调用微信sdk的时候,如果上个页面传递过来的参数过长会影响当前页面微信sdk调用失效。
参考资料:
https://leo108.com/pid-2069.asp
http://www.2cto.com/weixin/201509/444181.html
http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html