最近做的微信網頁要實現一個上傳圖片的功能，倒騰了半天終於搞好了，具體的步驟可以查看微信官方文檔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的配置不需要前端做什么處理，都是后端處理好之后傳到前端，前端拿來用即可，沒有很復雜，希望幫到有需要的同行們