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開發中使用必要的方法！

在微信公衆號提供的全部接口中咱們能夠按照接口實現的難易程度分紅兩個部分：

• 較易實現：基礎接口、分享接口、設備信息接口、地理位置接口、界面操做接口、微信掃一掃接口；

• 較難實現：圖像接口、音頻接口、智能接口、微信小店接口、微信卡券接口、微信支付接口；（注：這裏說較難是由於須要後端和本地文件配合接口）

在這裏咱們將講述全部較易實現的接口的具體實現方法，在文在文章 http://www.javashuo.com/article/p-rdtainis-by.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。簡單代碼以下：