Java微信公众平台开发(15) 微信JSSDK的使用
作者:dapengniao 发布时间:2023-06-16 19:58:39
在前面的文章中有介绍到我们在微信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方法实现,感谢你的翻阅,如有疑问可以留言一起讨论!
来源:http://www.cuiyongzhi.com/post/63.html
猜你喜欢
- 介绍技术之前有用eureka 现在用nacos工作流和gateway接口数据流向数据表新建项目新建cloud-删除src-新建modleEu
- 异步log4j2的location信息打印问题背景:项目改造过程中将log4j2改成异步,发现行号没有打印,于是扒了下官方文档,大概陈述下:
- Mybatis的日志模块的适配器模式我们在开发中日志是必不可少的一部分,而市场中有很多日志框架供我们使用,mybatis作为一个开源框架需要
- 以下摘自胖哥分享的 2022开工福利教程。在学习Spring Security的时候你有没有下面这两个疑问:Spring Security的
- 一、为什么要控制当你在项目启动时需要提前做一个业务的初始化工作时,或者你正在开发某个中间件需要完成自动装配时。你会声明自己的Configur
- 这是一个及其常见的问题,网上已经有关于这个问题的很多讨论。但是我觉得都是不求甚解,有一些还是在误导别人。下面我来说下我对这三者的理解,如有错
- JVM的对dll文件的装载过程操作系统装入JVM是通过jdk中Java.exe来完成,通过下面4步来完成JVM环境.1.创建JVM装载环境和
- Mybatis mapper模糊查询语句LIKE最近做学校安排的课程设计作业,用到SSM框架,在自己写mapper代码是遇到了模糊查询的问题
- Map集合的概述概述:interface Map<K,V> 其中K是键的类型,键是唯一的,不重复。V是值的类型,是可以重复。且每
- struts2可以非常简单地使用FreeMarker模板作为视图技术,对于传统的jsp页面而言,FreeMarker是一个绝佳的替代方案。除
- 一、实战-内存溢出堆内存溢出栈内存溢出方法区溢出直接内存溢出二、实战-堆内存溢出演示堆内存溢出代码,并且定位问题总结堆内存溢出的场景与解决方
- 本文实例讲述了C#多线程学习之生产者和消费者用法。分享给大家供大家参考。具体实分析如下:前面的文章说过,每个线程都有自己的资源,但是代码区是
- 本项目主要实现对汽车维修厂的信息化管理功能,主要包含三个角色:管理员,维修师傅,客户。实现的主要功能包含用户管理、配置管理、汽车管理、故障管
- engine的实现结构elasticsearch对于索引中的数据操作如读写get等接口都封装在engine中,同时engine还封装了索引的
- 分享一个小技巧:在日常开发中有时候需要切换到另外的一个分支,但在某些条件下当前的分支上存在一些文件尚未提交,这时候就需要使用到idea自带的
- 在ibatis的xml文件里,我们去写sql语句,对应mapper类的方法,这些sql语句与控制台上没什么两样,但在有些功能上需要注意,如w
- 接着上一篇再为大家介绍java应用和输入输出常用方法,供大家参考,具体内容如下一、应用1、使用StringBuilder或StringBuf
- 一个基于Java Socket协议之上文件传输的完整示例,基于TCP通信完成。除了基于TCP的二进制文件传输,还演示了JAVA Swing的
- 目录一、需求二、步骤三、结果一、需求把以下txt中含“baidu”字符串的链接输出到一个文件,否则输出到另外一个文件。二、步骤1.LogMa
- 本文实例为大家分享了Java使用poi操作excel的具体代码,供大家参考,具体内容如下依赖poi的jar包,pom.xml配置如下:<