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); 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。简单代码如下:
转载于:https://www.cnblogs.com/gede/p/10957701.html
Java微信公众平台开发(十二)--微信JSSDK的使用相关推荐
- 获取微信用户信息java开发_Java微信公众平台开发(十二)--微信用户信息的获取
前面的文章有讲到微信的一系列开发文章,包括token获取.菜单创建等,在这一篇将讲述在微信公众平台开发中如何获取微信用户的信息,在上一篇我们有说道微信用户和微信公众账号之间的联系可以通过Openid关 ...
- Java微信公众平台开发(十六)--微信网页授权(OAuth2.0授权)获取用户基本信息
转自:http://www.cuiyongzhi.com/post/78.html 好长时间没有写文章了,主要是最近的工作和生活上的事情比较多而且繁琐,其实到现在我依然还是感觉有些迷茫,最后还是决定静 ...
- 微信公众平台开发(二) 微信公众平台示例代码分析
http://www.cnblogs.com/mchina/archive/2013/06/07/3120592.html 微信公众平台开发(二) 微信公众平台示例代码分析 一.摘要 微信公众平台提供 ...
- 微信公众平台开发(93) 关闭微信浏览器
原文地址为: 微信公众平台开发(93) 关闭微信浏览器 在这篇微信公众平台开发教程中,我们将介绍如何使用微信JS接口关闭微信内置浏览器返回到微信聊天窗口界面. 微信的JS接口目前已公布了三种:右上角按 ...
- java获取微信用户源码_Java微信公众平台开发(十)--微信用户信息的获取
前面的文章有讲到微信的一系列开发文章,包括token获取.菜单创建等,在这一篇将讲述在微信公众平台开发中如何获取微信用户的信息,在上一篇我们有说道微信用户和微信公众账号之间的联系可以通过Openid关 ...
- Java微信公众平台开发(一)--接入微信公众平台
转载自崔用志博客:http://www.cuiyongzhi.com/ 前面几篇文章一直都在说微信公众平台的开发准备工作,那么从这篇开始我们就将正式的进入JAVA微信公众平台开发的整个流程,那么这篇我 ...
- Java微信公众平台开发(一)——接入微信公众平台
前面几篇文章一直都在说微信公众平台的开发准备工作,那么从这篇开始我们就将正式的进入JAVA微信公众平台开发的整个流程,那么这篇我们开始聊聊如何将我们的服务端和微信公众平台对接! (一)接入流程解析 在 ...
- 结合百度云平台和微信公众平台开发(二)
距离第一章的入门讲解已经有一段时间了,最近的确没有空,今天我们在上一次的基础上来进行一个扩展,实现天气查询功能,大概就是,我们在手机上想我们的公众账号发送一个消息,比如"weather&qu ...
- php微信公众平台开发类,php微信公众平台开发类实例
本文实例讲述了php微信公众平台开发类.分享给大家供大家参考.具体分析如下: ThinkWechat.php类文件如下: class Wechat { /** * 微信推送过来的数据或响应数据 * @ ...
最新文章
- leetcode 752. Open the Lock | 752. 打开转盘锁(BFS)
- css flex布局 padding,CSS3 flex布局之快速实现BorderLayout布局
- Codeforces 924D Contact ATC (看题解)
- Apollo技能图谱2.0焕新发布 更新7大能力91个知识点
- linux git diff patch,拿到git patch要怎麼用一般patch指令merge?
- oracle9i怎样管理数据,Oracle9i数据库管理员使用大全
- C# 如何修改Form不能修改窗体大小
- LARGE_INTEGER类型和QueryPerformanceFrequency()
- 建立 arm-linux 交叉编译环境
- TIA protal与SCL从入门到精通(1)——SCL编程入门
- 【Python爬虫实战】Python实现动态网页爬虫(requests模块)
- python 网络小说爬取2
- how-I-hacked-Facebook-again-unauthenticated-RCE-on-MobileIron-MDM笔记
- jumpserver版本升级(1.3.1升级到最新版)
- 计算机新教师汇报课报道,提升专业促成长—开元路小学开展新教师汇报课记实...
- 学大伟业:如何利用课余时间学习物理竞赛,搞定自主招生?
- 三星note5 android9,史上最快!三星公布新版安卓9.0升级名单:Note FE在内
- 6.1 手机时钟系统简介
- 【内置人脸识别】APP破解分析
- HOOK 几种实现方式区别