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