微信接口 —— 图片接口
一、HTML部分
<
input
type
=
"button"
value
=
"checkJSAPI"
id
=
"checkJsApi"
><
br
>
<
h3
id
=
"menu-image"
>图像接口</
h3
>
<
span
class
=
"desc"
>拍照或从手机相册中选图接口</
span
><
br
>
<
button
class
=
"btn btn_primary"
id
=
"chooseImage"
>chooseImage</
button
><
br
>
<
span
class
=
"desc"
>预览图片接口</
span
><
br
>
<
button
class
=
"btn btn_primary"
id
=
"previewImage"
>previewImage</
button
><
br
>
<
span
class
=
"desc"
>上传图片接口</
span
><
br
>
<
button
class
=
"btn btn_primary"
id
=
"uploadImage"
>uploadImage</
button
><
br
>
<
span
class
=
"desc"
>下载图片接口</
span
><
br
>
<
button
class
=
"btn btn_primary"
id
=
"downloadImage"
>downloadImage</
button
><
br
>
显示图片<
imgalt
=
""
src
=
""
id
=
"faceImg"
data-bd-imgshare-binded
=
"1"
>
二、 JS部分,在<script>...</script>之间
wx.config({
debug: false,
appId: '@ViewBag.WxAppId', // 必填,公众号的唯一标识
timestamp: '@ViewBag.TimeStamp', // 必填,生成签名的时间戳
nonceStr: '@ViewBag.Nonce', // 必填,生成签名的随机串
signature: '@ViewBag.Signature',// 必填,签名,见附录1
jsApiList: ['checkJsApi',
'scanQRCode',// 微信扫一扫接口
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage'
] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function () {
debug: false,
appId: '@ViewBag.WxAppId', // 必填,公众号的唯一标识
timestamp: '@ViewBag.TimeStamp', // 必填,生成签名的时间戳
nonceStr: '@ViewBag.Nonce', // 必填,生成签名的随机串
signature: '@ViewBag.Signature',// 必填,签名,见附录1
jsApiList: ['checkJsApi',
'scanQRCode',// 微信扫一扫接口
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage'
] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function () {
此处为微信接口
});
//初始化jsapi接口 状态
wx.error(function (res) {
alert("调用微信jsapi返回的状态:" + res.errMsg);
});
//初始化加载数据
$(document).ready(function () {
});
//初始化jsapi接口 状态
wx.error(function (res) {
alert("调用微信jsapi返回的状态:" + res.errMsg);
});
//初始化加载数据
$(document).ready(function () {
});
三、 weixin-JS-JDK部分,在 wx.ready(function(){ .... })之间
// 5 图片接口 // 5.1 拍照、本地选图 var images = { localId: [], serverId: [] }; document.querySelector('#chooseImage').onclick = function () { wx.chooseImage({ success: function (res) { images.localId = res.localIds; alert('已选择 ' + res.localIds.length + ' 张图片'); } }); }; // 5.2 图片预览 document.querySelector('#previewImage').onclick = function () { wx.previewImage({ current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg', urls: [ 'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg', 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg', 'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg' ] }); }; // 5.3 上传图片 document.querySelector('#uploadImage').onclick = function () { if (images.localId.length == 0) { alert('请先使用 chooseImage 接口选择图片'); return; } var i = 0, length = images.localId.length; images.serverId = []; function upload() { wx.uploadImage({ localId: images.localId[i], success: function (res) { i++; alert('已上传:' + i + '/' + length); images.serverId.push(res.serverId); if (i < length) { upload(); } }, fail: function (res) { alert(JSON.stringify(res)); } }); } upload(); }; // 5.4 下载图片 document.querySelector('#downloadImage').onclick = function () { if (images.serverId.length === 0) { alert('请先使用 uploadImage 上传图片'); return; } var i = 0, length = images.serverId.length; images.localId = []; function download() { wx.downloadImage({ serverId: images.serverId[i], success: function (res) { i++; alert('已下载:' + i + '/' + length); images.localId.push(res.localId); if (i < length) { download(); } } }); } download(); };