Java微信公众平台开发(十二)--微信JSSDK的使用

在前面的文章中有介绍到我们在微信web开发过程中常常用到的【微信JSSDK中Config配置】,但是我们在真正的使用中我们不仅仅只是为了配置Config而已,而是要在我们的项目中真正去使用微信JS-SDK给我们带来便捷,那么这里我们就简述如何在微信web开发中使用必要的方法!在开始之前,上一篇有朋友有疑问,如何在手机端显示,这里我们来补充一下:这里的前提是你要跟着做到,浏览器显示返回200状态码。...

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); 7var networkType = res.networkType; // 返回网络类型2g,3g,4g,wifi 8if(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) {21alert('用户拒绝授权获取地理位置');22 }23  });24};
源文地址:https://www.guoxiongfei.cn/cntech/18454.html