最近做的微信网页要实现一个上传图片的功能,倒腾了半天终于搞好了,具体的步骤可以查看微信官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html,这里只是简答说一下,
JSSDK使用步骤
步骤一:绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注:登录后可在“开发者中心”查看对应的接口权限。
步骤二:引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js
如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.4.0.js
第三步:请求后台接口,注入配置信息
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: ‘‘, // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: ‘‘, // 必填,生成签名的随机串
signature: ‘‘,// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
下面是前端详细代码:
1 1 (function () { 2 2 let url = ‘caf/Verification/getConfig.do‘; 3 3 let myData = {}; 4 4 myData[‘configUrl‘] = location.href; 5 5 //alert(location.href); 6 6 sendAjax(url, myData, callback); 7 7 8 8 function callback(data) { 9 9 var timestamp = data.timestamp; 10 10 var noncestr = data.nonceStr; 11 11 var signature = data.signature; 12 12 //通过config接口注入权限验证配置 13 13 wx.config({ 14 14 debug: false, //调试模式建议开启true 15 15 appId: "wx68df519fcf184a96", //微信公众号的appid,不是个人的 16 16 timestamp: timestamp.toString(), 17 17 nonceStr: noncestr, //生成签名的随机串 18 18 signature: signature, //签名 19 19 jsApiList: [‘chooseImage‘, ‘uploadImage‘, ‘downloadImage‘] //下面要调用的微信接口写在这里,否则不能使用 20 20 }); 21 21 } 22 22 })(); 23 //请求函数封装 24 function sendAjax(url,requestdata,callback) { 25 var getDataAddress = ‘http://wx.ccnuoxin.cn/credit/‘ 26 mui.ajax({ 27 type: "post", 28 url: getDataAddress+url, 29 async: true, 30 data: requestdata, 31 headers: {‘Content-Type‘: ‘application/json‘}, 32 dataType: "json", 33 //jsonp: "jsoncallback", 34 success: function (data) { 35 callback(data); 36 } 37 }); 38 }
请求完成后,就可以调用上面配置的微信接口了
1 function chooseImgfun(imgdesc, id) { 2 wx.chooseImage({ 3 count: 1, // 默认9,1-9张 4 sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有 5 sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机,默认二者都有 6 success: function (res) { 7 var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 8 //上传图片 9 wx.uploadImage({ 10 localId: ‘‘ + localIds + ‘‘, // 需要上传的图片的本地ID,由chooseImage接口获得 11 isShowProgressTips: 1, // 默认为1,显示进度提示 12 success: function (res) { 13 var serverId = res.serverId; // 返回图片的服务器端ID 14 let url = ‘archives/Verification/uploadFile.do‘; 15 let myData = {}; 16 myData[‘mediaId‘] = serverId; 17 18 sendAjax(url, myData, chooseImgfun_callback); 19 20 function chooseImgfun_callback(data) { 21 mui.toast(‘上传成功‘); 22 var timestamp = parseInt((new Date()).valueOf()); 23 var div = document.createElement("div"); 24 div.className = "filebox"; 25 div.id = "content" + timestamp; 26 div.innerHTML = 27 ‘<div class="uploadimg">‘ + 28 ‘<img class="uploadimgUrl" src="‘ + localIds + ‘" > ‘ + 29 ‘<span>‘ + imgdesc + ‘</span>‘ + 30 ‘</div>‘ + 31 ‘<div class="comm1 delete" id="delete‘ + timestamp + ‘" onclick="delefun(‘ + timestamp + ‘)"> ‘ + 32 ‘<img style="margin-right:0.4rem;width: 1.5rem;height: 1.5rem;vertical-align: middle" src="../image/delete.png" > ‘ + 33 ‘<span>删除</span> ‘ + 34 ‘</div>‘; 35 mui(‘#edcationContent‘)[0].append(div); 36 mui(‘#jnpopover‘).popover(‘hide‘); //选择完关闭弹出框 37 var listData = {}; 38 listData = { 39 "fileTypeId": id, 40 "filePath": data.filePath, 41 "dataid": timestamp 42 }; 43 archivesList.push(listData); 44 } 45 } 46 }); 47 48 49 } 50 }) 51 }
wx.config的配置不需要前端做什么处理,都是后端处理好之后传到前端,前端拿来用即可,没有很复杂,希望帮到有需要的同行们