Java微信公眾平台開發(十二)--微信JSSDK的使用

在前面的文章中有介紹到我們在微信web開發過程中常常用到的 【微信JSSDK中Config配置】 ，但是我們在真正的使用中我們不僅僅只是為了配置Config而已，而是要在我們的項目中真正去使用微信JS-SDK給我們帶來便捷，那么這里我們就簡述如何在微信web開發中使用必要的方法！在開始之前，上一篇有朋友有疑問，如何在手機端顯示，這里我們來補充一下：

這里的前提是你要跟着做到，瀏覽器顯示返回200 狀態碼。

(一)修改我們的menue。

打開我們的menueMain，將Button修改，修改后的代碼如下：

@Component
public class MenuMain {
    public void createMenu(){
         ViewButton cbt=new ViewButton();
            cbt.setUrl("http://zqfbk.iok.la/mychat/jssdkconfig.jsp");
            cbt.setName("測試");
            cbt.setType("view");
             
             
            ViewButton vbt=new ViewButton();
            vbt.setUrl("https://www.cnblogs.com/gede");
            vbt.setName("博客");
            vbt.setType("view");
             
            JSONArray sub_button=new JSONArray();
            sub_button.add(cbt);
            sub_button.add(vbt);
             
             
            JSONObject buttonOne=new JSONObject();
            buttonOne.put("name", "菜單");
            buttonOne.put("sub_button", sub_button);
             
            JSONArray button=new JSONArray();
            button.add(vbt);
            button.add(buttonOne);
            button.add(cbt);
             
            JSONObject menujson=new JSONObject();
            menujson.put("button", button);
            System.out.println(menujson);
            
            //這里為請求接口的url   +號后面的是token，這里就不做過多對token獲取的方法解釋
            String url="https://api.weixin.qq.com/cgi-bin/menu/create?access_token="+GlobalConstants.getInterfaceUrl("access_token");
             
            try{
                String rs=HttpUtils.sendPostBuffer(url, menujson.toJSONString());
                System.out.println(rs);
            }catch(Exception e){
                System.out.println("請求錯誤！");
            }
    }
}

修改完成后，運行項目，調用我們的生成菜單方法：在瀏覽器中輸入：http://zqfbk.iok.la/mychat/menue/。調用成功，后台會返回如下信息：

（二）測試

進入我們的公眾號，點擊測試，如下圖，則配置成功：

接下來這里我們就簡述如何在微信web開發中使用必要的方法！

在微信公眾號提供的所有接口中我們可以按照接口實現的難易程度分成兩個部分：

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

• 較難實現：圖像接口、音頻接口、智能接口、微信小店接口、微信卡券接口、微信支付接口；（注：這里說較難是因為需要后端和本地文件配合接口）

在這里我們將講述所有較易實現的接口的具體實現方法，在文在文章 https://www.cnblogs.com/gede/p/10949458.html中講述過了如何配置和引入需要的js，通過這些配置之后我們就可以開始使用js的方法了！

①基礎接口-判斷當前瀏覽器是否支持某些js接口

/*
 * 注意：
 *  所有的JS接口只能在公眾號綁定的域名下調用，公眾號開發者需要先登錄微信公眾平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。
 */
wx.ready(function () {
  //1. 判斷當前版本是否支持指定 JS 接口，支持批量判斷，只需要將需要判斷的接口放入到jsApiList中即可
 checkJsApifunction () {
    wx.checkJsApi({
      jsApiList: [
        'getNetworkType',
        'previewImage'
      ],
      success: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };

②分享接口，這里包含：分享給朋友、分享到朋友圈、分享到qq、分享到微博、分享到qq空間(但是這里要提醒要注意不要有誘導分享等違規行為，對於誘導分享行為將永久回收公眾號接口權限  

 

③設備信息接口--這里是獲取設備網絡狀態，以防在頁面中存在視頻或者大流量文件播放的時候對用戶給出友好提示！

// 3 設備信息接口
  // 3.1 獲取當前網絡狀態
  getNetworkTypefunction () {
    wx.getNetworkType({
      success: function (res) {
        alert(res.networkType);
        var networkType = res.networkType; // 返回網絡類型2g，3g，4g，wifi
        if(networkType=='3g'){
            alert("您好，您的網絡狀態是3g網絡，這里將播放視頻文件會產生大流程!");
        }
      },
      fail: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };

④地理位置接口，這里包含查看經緯度對應的地圖位置和獲取當前位置的經緯度，可用做地圖位置展示的第一步！

// 4 地理位置接口
  // 4.1 查看地理位置
  openLocationfunction () {
    wx.openLocation({
      latitude: 23.099994,
      longitude: 113.324520,
      name: 'TIT 創意園',
      address: '廣州市海珠區新港中路 397 號',
      scale: 14,
      infoUrl: 'http://weixin.qq.com'
    });
  };
 
  // 4.2 獲取當前地理位置
  getLocationfunction () {
    wx.getLocation({
      success: function (res) {
        alert(JSON.stringify(res));
      },
      cancel: function (res) {
        alert('用戶拒絕授權獲取地理位置');
      }
    });
  };

⑤界面操作接口，這里說的界面操作其實就是在微信瀏覽器中操作和改名的那右上角的【三個點】，對這里隱藏的菜單進行操作和關閉微信瀏覽器！

 // 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可以設置掃描之后的處理方式；

 // 6 微信原生接口
 wx.scanQRCode({
    needResult: 0, // 默認為0，掃描結果由微信處理，1則直接返回掃描結果，
    scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼，默認二者都有
    success: function (res) {
    var result = res.resultStr; // 當needResult 為 1 時，掃碼返回的結果
}
});

那么到這里微信JS-SDK方法實現中的簡答實現部分基本就講述完成了！

最后我們寫一個簡單的頁面，來調用不同的js。簡單代碼如下：