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。简单代码以下：