Java微信公众平台开发(15) 微信JSSDK的使用

 更新时间:2017年04月26日 11:54:03   作者:dapengniao  
这篇文章主要为大家详细介绍了Java微信公众平台开发第十五步,微信JSSDK的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

在前面的文章中有介绍到我们在微信web开发过程中常常用到的 【微信JSSDK中Config配置】 ,但是我们在真正的使用中我们不仅仅只是为了配置Config而已,而是要在我们的项目中真正去使用微信JS-SDK给我们带来便捷,那么这里我们就简述如何在微信web开发中使用必要的方法!微信的JS-SDk中为我们提供的方法很多,这里我有一个简单截图如下:

在上图的提供的所有口中我们可以按照接口实现的难易程度分成两个部分:

较易实现:基础接口、分享接口、设备信息接口、地理位置接口、界面操作接口、微信扫一扫接口;
较难实现:图像接口、音频接口、智能接口、微信小店接口、微信卡券接口、微信支付接口;(注:这里说较难是因为需要后端和本地文件配合接口,这些接口后面会一篇篇文章具体详解)
在这里我们将讲述所有较易实现的接口的具体实现方法,在文章中讲述过了如何配置和引入需要的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空间(但是这里要提醒要注意不要有诱导分享等违规行为,对于诱导分享行为将永久回收公众号接口权限)

 // 2. 分享接口
 // 2.1 监听“分享给朋友”,按钮点击、自定义分享内容及分享结果接口
 onMenuShareAppMessagefunction () {
 wx.onMenuShareAppMessage({
  title: '菜鸟程序员成长之路!',
  desc: '关注java平台开发,前后端框架技术,分享前后端开发资源,服务端教程技术,菜鸟程序员!',
  link: 'http://www.cuiyongzhi.com/',
  imgUrl: 'http://res.cuiyongzhi.com/2016/03/201603201591_339.png',
  trigger: function (res) {
  // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回
  alert('用户点击发送给朋友');
  },
  success: function (res) {
  alert('已分享');
  },
  cancel: function (res) {
  alert('已取消');
  },
  fail: function (res) {
  alert(JSON.stringify(res));
  }
 });
 alert('已注册获取“发送给朋友”状态事件');
 };
 
 // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
 onMenuShareTimelinefunction () {
 wx.onMenuShareTimeline({
  title: '菜鸟程序员成长之路!',
  link: 'http://www.cuiyongzhi.com/',
  imgUrl: 'http://res.cuiyongzhi.com/2016/03/201603201591_339.png',
  trigger: function (res) {
  // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回
  alert('用户点击分享到朋友圈');
  },
  success: function (res) {
  alert('已分享');
  },
  cancel: function (res) {
  alert('已取消');
  },
  fail: function (res) {
  alert(JSON.stringify(res));
  }
 });
 alert('已注册获取“分享到朋友圈”状态事件');
 };
 
 // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
 onMenuShareQQfunction () {
 wx.onMenuShareQQ({
  title: '菜鸟程序员成长之路!',
  desc: '关注java平台开发,前后端框架技术,分享前后端开发资源,服务端教程技术,菜鸟程序员!',
  link: 'http://www.cuiyongzhi.com/',
  imgUrl: 'http://res.cuiyongzhi.com/2016/03/201603201591_339.png',
  trigger: function (res) {
  alert('用户点击分享到QQ');
  },
  complete: function (res) {
  alert(JSON.stringify(res));
  },
  success: function (res) {
  alert('已分享');
  },
  cancel: function (res) {
  alert('已取消');
  },
  fail: function (res) {
  alert(JSON.stringify(res));
  }
 });
 alert('已注册获取“分享到 QQ”状态事件');
 };
 
 // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
 onMenuShareWeibofunction () {
 wx.onMenuShareWeibo({
  title: '菜鸟程序员成长之路!',
  desc: '关注java平台开发,前后端框架技术,分享前后端开发资源,服务端教程技术,菜鸟程序员!',
  link: 'http://www.cuiyongzhi.com/',
  imgUrl: 'http://res.cuiyongzhi.com/2016/03/201603201591_339.png',
  trigger: function (res) {
  alert('用户点击分享到微博');
  },
  complete: function (res) {
  alert(JSON.stringify(res));
  },
  success: function (res) {
  alert('已分享');
  },
  cancel: function (res) {
  alert('已取消');
  },
  fail: function (res) {
  alert(JSON.stringify(res));
  }
 });
 alert('已注册获取“分享到微博”状态事件');
 };
 
 // 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口
 onMenuShareQZonefunction () {
 wx.onMenuShareQZone({
  title: '菜鸟程序员成长之路!',
  desc: '关注java平台开发,前后端框架技术,分享前后端开发资源,服务端教程技术,菜鸟程序员!',
  link: 'http://www.cuiyongzhi.com/',
  imgUrl: 'http://res.cuiyongzhi.com/2016/03/201603201591_339.png',
  trigger: function (res) {
  alert('用户点击分享到QZone');
  },
  complete: function (res) {
  alert(JSON.stringify(res));
  },
  success: function (res) {
  alert('已分享');
  },
  cancel: function (res) {
  alert('已取消');
  },
  fail: function (res) {
  alert(JSON.stringify(res));
  }
 });
 alert('已注册获取“分享到QZone”状态事件');
 };

③设备信息接口--这里是获取设备网络状态,以防在页面中存在视频或者大流量文件播放的时候对用户给出友好提示!

 // 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方法实现,感谢你的翻阅,如有疑问可以留言一起讨论!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • elasticsearch索引的创建过程index create逻辑分析

    elasticsearch索引的创建过程index create逻辑分析

    这篇文章主要介绍了elasticsearch索引核心index create,索引的创建过程解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04
  • javafx 如何将项目打包为 Windows 的可执行文件exe

    javafx 如何将项目打包为 Windows 的可执行文件exe

    文章介绍了三种将JavaFX项目打包为.exe文件的方法:方法1使用jpackage(适用于JDK14及以上版本),方法2使用Launch4j(适用于所有JDK版本),方法3使用InnoSetup(用于创建安装包),每种方法都有其特点和适用范围,可以根据项目需求选择合适的方法,感兴趣的朋友一起看看吧
    2025-01-01
  • 简单了解JAVA内存泄漏和溢出区别及联系

    简单了解JAVA内存泄漏和溢出区别及联系

    这篇文章主要介绍了简单了解JAVA内存泄漏和溢出区别及联系,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • Spring mvc整合mybatis(crud+分页插件)操作mysql

    Spring mvc整合mybatis(crud+分页插件)操作mysql

    这篇文章主要介绍了Spring mvc整合mybatis(crud+分页插件)操作mysql的步骤详解,需要的朋友可以参考下
    2017-04-04
  • 解决springboot读取application.properties中文乱码问题

    解决springboot读取application.properties中文乱码问题

    初用properties,读取java properties文件的时候如果value是中文,会出现乱码的问题,所以本文小编将给大家介绍如何解决springboot读取application.properties中文乱码问题,需要的朋友可以参考下
    2023-11-11
  • Java时间轮算法的实现代码示例

    Java时间轮算法的实现代码示例

    本篇文章主要介绍了Java时间轮算法的实现代码示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • IDEA之配置JDK、Git、Maven详解

    IDEA之配置JDK、Git、Maven详解

    文章总结:本文介绍了如何在IDEA中配置JDK、Git和Maven,包括设置Java编译器路径、配置Git版本控制、修改Maven根目录以加快jar包下载速度,并提供了一个解决方案以确保配置在新项目中生效
    2025-01-01
  • mybatis if标签判断不生效的解决方法

    mybatis if标签判断不生效的解决方法

    这篇文章主要介绍了mybatis if标签判断不生效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • Rxjava功能操作符的使用方法详解

    Rxjava功能操作符的使用方法详解

    这篇文章主要介绍了Rxjava功能操作符的使用方法详解,还是比较不错的,这里分享给大家,供需要的朋友参考。
    2017-11-11
  • java使用Jco连接SAP过程

    java使用Jco连接SAP过程

    这篇文章主要介绍了java使用Jco连接SAP过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03

最新评论