H5页面有轻便,灵活的优势,且可以借助于微信平台做低成本推广,得到的广泛的应用。不过纯页面在功能上受限,好在可以借助微信提供的APi实现更多功能,必然调用手机硬件功能,本文讲解下最常用的,H5页面调用微信API实现拍摄照片并上传的功能。
1、引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js
2、前端页面对微信API初始化配置
需要获取微信js-sdk参数,具体获取方法参考另一篇文章 微信JS-SDK数字签名生成方法(NodeJS版本)
wx.config({ debug: false, // 开启调试模式 appId: "$!{wxsign.get('appId')}", // 必填,公众号的唯一标识 timestamp: "$!{wxsign.get('timeStamp')}", // 必填,生成签名的时间戳 nonceStr: "$!{wxsign.get('nonceStr')}", // 必填,生成签名的随机串 signature: "$!{wxsign.get('signature')}",// 必填,签名,见附录1 jsApiList: ['checkJsApi', 'chooseImage', 'previewImage', 'uploadImage'] // 必填,需要使用的JS接口列表 }); var images = { localId: [], serverId: [] };
3、配置拍照或从手机相册中选图
wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 } });
注意,这里的上传是将图片上传到微信的服务器,有几天的缓存期,在这期间可以凭serverId获取。
wx.uploadImage({ localId: '', // 需要上传的图片的本地ID,由chooseImage接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success: function (res) { var serverId = res.serverId; // 返回图片的服务器端ID } });
5、下载图片到自己的服务器
微信返回的serverid我们需要通过微信api获取真实的图片二进制数据。