Java微信公眾平臺開發(十二)--微信JSSDK的使用
在前面的文章中有介紹到我們在微信web開發過程中常常用到的 【微信JSSDK中Config配置】 ，但是我們在真正的使用中我們不僅僅只是為了配置Config而已，而是要在我們的專案中真正去使用微信JS-SDK給我們帶來便捷，那麼這裡我們就簡述如何在微信web開發中使用必要的方法！在開始之前，上一篇有朋友有疑問，如何在手機端顯示，這裡我們來補充一下：
這裡的前提是你要跟著做到，瀏覽器顯示返回200 狀態碼。
(一)修改我們的menue。
開啟我們的menueMain，將Button修改，修改後的程式碼如下：
1 @Component
2 public class MenuMain {
3 public void createMenu(){
4 ViewButton cbt=new ViewButton();
5 cbt.setUrl("http://zqfbk.iok.la/mychat/jssdkconfig.jsp");
6 cbt.setName("測試");
7 cbt.setType("view");
8
9
10 ViewButton vbt=new ViewButton();
11 vbt.setUrl("https://www.cnblogs.com/gede");
12 vbt.setName("部落格");
13 vbt.setType("view");
14
15 JSONArray sub_button=new JSONArray();
16 sub_button.add(cbt);
17 sub_button.add(vbt);
18
19
20 JSONObject buttonOne=new JSONObject();
21 buttonOne.put("name", "選單");
22 buttonOne.put("sub_button", sub_button);
23
24 JSONArray button=new JSONArray();
25 button.add(vbt);
26 button.add(buttonOne);
27 button.add(cbt);
28
29 JSONObject menujson=new JSONObject();
30 menujson.put("button", button);
31 System.out.println(menujson);
32
33 //這裡為請求介面的url +號後面的是token，這裡就不做過多對token獲取的方法解釋
34 String url="https://api.weixin.qq.com/cgi-bin/menu/create?access_token="+GlobalConstants.getInterfaceUrl("access_token");
35
36 try{
37 String rs=HttpUtils.sendPostBuffer(url, menujson.toJSONString());
38 System.out.println(rs);
39 }catch(Exception e){
40 System.out.println("請求錯誤！");
41 }
42 }
43 }修改完成後，執行專案，呼叫我們的生成選單方法：在瀏覽器中輸入：http://zqfbk.iok.la/mychat/menue/。呼叫成功，後臺會返回如下資訊：
（二）測試
進入我們的公眾號，點選測試，如下圖，則配置成功：
接下來這裡我們就簡述如何在微信web開發中使用必要的方法！
在微信公眾號提供的所有介面中我們可以按照介面實現的難易程度分成兩個部分：
-
較易實現：基礎介面、分享介面、裝置資訊介面、地理位置介面、介面操作介面、微信掃一掃介面；
-
較難實現：影象介面、音訊介面、智慧介面、微信小店介面、微信卡券介面、微信支付介面；（注：這裡說較難是因為需要後端和本地檔案配合介面）
在這裡我們將講述所有較易實現的介面的具體實現方法，在文在文章 https://www.cnblogs.com/gede/p/10949458.html中講述過了如何配置和引入需要的js，通過這些配置之後我們就可以開始使用js的方法了！
①基礎介面-判斷當前瀏覽器是否支援某些js介面
1 /*
2 * 注意：
3 * 所有的JS介面只能在公眾號繫結的域名下呼叫，公眾號開發者需要先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。
4 */
5 wx.ready(function () {
6 //1. 判斷當前版本是否支援指定 JS 介面，支援批量判斷，只需要將需要判斷的介面放入到jsApiList中即可
7 checkJsApifunction () {
8 wx.checkJsApi({
9 jsApiList: [
10 'getNetworkType',
11 'previewImage'
12 ],
13 success: function (res) {
14 alert(JSON.stringify(res));
15 }
16 });
17 };②分享介面，這裡包含：分享給朋友、分享到朋友圈、分享到qq、分享到微博、分享到qq空間(但是這裡要提醒要注意不要有誘導分享等違規行為，對於誘導分享行為將永久回收公眾號介面許可權
③裝置資訊介面--這裡是獲取裝置網路狀態，以防在頁面中存在視訊或者大流量檔案播放的時候對使用者給出友好提示！
1 // 3 裝置資訊介面
2 // 3.1 獲取當前網路狀態
3 getNetworkTypefunction () {
4 wx.getNetworkType({
5 success: function (res) {
6 alert(res.networkType);
7 var networkType = res.networkType; // 返回網路型別2g，3g，4g，wifi
8 if(networkType=='3g'){
9 alert("您好，您的網路狀態是3g網路，這裡將播放視訊檔案會產生大流程!");
10 }
11 },
12 fail: function (res) {
13 alert(JSON.stringify(res));
14 }
15 });
16 };
④地理位置介面，這裡包含檢視經緯度對應的地圖位置和獲取當前位置的經緯度，可用做地圖位置展示的第一步！
1 // 4 地理位置介面
2 // 4.1 檢視地理位置
3 openLocationfunction () {
4 wx.openLocation({
5 latitude: 23.099994,
6 longitude: 113.324520,
7 name: 'TIT 創意園',
8 address: '廣州市海珠區新港中路 397 號',
9 scale: 14,
10 infoUrl: 'http://weixin.qq.com'
11 });
12 };
13
14 // 4.2 獲取當前地理位置
15 getLocationfunction () {
16 wx.getLocation({
17 success: function (res) {
18 alert(JSON.stringify(res));
19 },
20 cancel: function (res) {
21 alert('使用者拒絕授權獲取地理位置');
22 }
23 });
24 };
⑤介面操作介面，這裡說的介面操作其實就是在微信瀏覽器中操作和改名的那右上角的【三個點】，對這裡隱藏的選單進行操作和關閉微信瀏覽器！
// 5 介面操作介面
// 5.1 隱藏右上角選單
hideOptionMenufunction () {
wx.hideOptionMenu();
};
// 5.2 顯示右上角選單
showOptionMenufunction () {
wx.showOptionMenu();
};
// 5.3 批量隱藏選單項
hideMenuItemsfunction () {
wx.hideMenuItems({
menuList: [
'menuItem:readMode', // 閱讀模式
'menuItem:share:timeline', // 分享到朋友圈
'menuItem:copyUrl' // 複製連結
],
success: function (res) {
alert('已隱藏“閱讀模式”，“分享到朋友圈”，“複製連結”等按鈕');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
};
// 5.4 批量顯示選單項
showMenuItemsfunction () {
wx.showMenuItems({
menuList: [
'menuItem:readMode', // 閱讀模式
'menuItem:share:timeline', // 分享到朋友圈
'menuItem:copyUrl' // 複製連結
],
success: function (res) {
alert('已顯示“閱讀模式”，“分享到朋友圈”，“複製連結”等按鈕');
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
};
// 5.5 隱藏所有非基本選單項
hideAllNonBaseMenuItemfunction () {
wx.hideAllNonBaseMenuItem({
success: function () {
alert('已隱藏所有非基本選單項');
}
});
};
// 5.6 顯示所有被隱藏的非基本選單項
showAllNonBaseMenuItemfunction () {
wx.showAllNonBaseMenuItem({
success: function () {
alert('已顯示所有非基本選單項');
}
});
};
// 5.7 關閉當前視窗
closeWindowfunction () {
wx.closeWindow();
};
⑥微信掃一掃介面，這個介面可以在頁面呼叫微信的掃一掃功能，其中引數needResult可以設定掃描之後的處理方式；
1 // 6 微信原生介面
2 wx.scanQRCode({
3 needResult: 0, // 預設為0，掃描結果由微信處理，1則直接返回掃描結果，
4 scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼，預設二者都有
5 success: function (res) {
6 var result = res.resultStr; // 當needResult 為 1 時，掃碼返回的結果
7 }
8 });
那麼到這裡微信JS-SDK方法實現中的簡答實現部分基本就講述完成了！
最後我們寫一個簡單的頁面，來呼叫不同的js。簡單程式碼如下：
&n