微信JS-SDK接口上传图片以及wx.config的配置

最近做的微信网页要实现一个上传图片的功能，倒腾了半天终于搞好了，具体的步骤可以查看微信官方文档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 + '" alt=""> ' +
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" alt=""> ' +
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的配置不需要前端做什么处理，都是后端处理好之后传到前端，前端拿来用即可，没有很复杂，希望帮到有需要的同行们


posted @ 2019-11-06 10:12  leahtao  阅读(6329)  评论(0)  编辑  收藏  举报