JAVA开发微信 AIRKISS 一键WIFI功能(测试账户)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/maizang52/article/details/79851960

最近使用JAVA开发微信的AIRKISS功能,因为没有经验参考了比较多的网站,其中受益比较多的除了微信官方网站外,特别感谢以下几位大神的经验分享。

https://blog.csdn.net/jrainbow/article/details/50509162

http://www.shaoguoji.cn/2017/01/28/ESP8266-wechat-onekey-config-2/


接下来进行步骤讲解:


目前发现微信的两种一键WIFI方式,一种是二维码扫码,扫码开发不需要平台代码,只需要在公众号进行设备注册即可,具体步骤参考下面(第三步);第二种就是使用js-sdk的方式进行认证以及配置界面调用的方式。


一、java 关于 js-sdk开发需要的工具:eclipse、tomcat/jetty(我用的maven插件jetty)、ngrok(内网映射工具非常好用,微信公众号开发需要外网网址,下载地址:https://ngrok.com/download)、微信web开发者工具(用于测试传入参数等是否正常,手机测试日志查看不方便,下载地址,微信公众号登陆后,参考下面图片进行下载)

     


二、账户申请:

1、在微信账户申请一个公众号,主要用于公众测试平台下载,如果只是用于测试  公众号不需要认证。

2、申请微信测试账户,点击 微信测试账户申请网址  使用手机微信扫一扫即可获得测试账户。



三、 二维码扫码开发:

 1、首先需要有一个测试账户,打开测试账户页面,在下面的 体验接口权限表  中找到  “设备功能接口” 点击 “开启”,开启后如下图:



2、点击“设置”按钮进入 设备功能 页面,添加产品:

 



3、设备添加完成后,点击产品详情。




4、产品授权,设备授权官网参考地址为:设备授权官方网址    ,具体代码可以参考 博客 最后上传的代码中mas.tool.Tools 中的main方法,填写参数即可授权。



四、JS-SDK  开发流程(JAVA相关代码) ,开发之前也需要进行第三部,添加设备部分,如果之前已经存在测试设备,则不需要。 

1、使用eclipse开发JAVA相关代码,使用maven自带插件  jetty  启动,具体代码看第五步。

2、使用ngrok 进行外网映射,打开cmd窗口,输入ngrok http 8088  然后回车。 (注意:我的项目映射端口为8088)




映射地址:http://3cb397cd.ngrok.io/

4、在 微信测试账号 首页配置JS接口安全域名


5、添加测试微信公众号按钮,点击添加地址:  微信官方地址 ,首先需要获得token值,获取方法如下图1,然后通过token值,添加按钮方法如图2。

(一)获得token值:


(二)创建菜单:

{ "button": [ { "type": "view", "name": "测试", "url": "http://3cb397cd.ngrok.io/airkiss" } ] }



6、扫描关注 微信测试账号  首页的测试号二维码,即可看到按钮效果,点击按钮,即可跳转微信自带的一键WIFI页面。




属性配置调用成功后,进入AIRKISS页面。WiFi密码并确定,微信会把周围的硬件设备配置到同一网络。

五、功能代码:

首先需要多看  JS-SDK说明文档  ,JSAPI说明

1、在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js

2、通过config接口注入权限验证配置,签名算法等参考 JS-SDK说明文档 附录部分  。

wx.config({
    beta : true, // 开启内测接口调用,注入wx.invoke方法
    debug: false, // 开启调试模式,关闭
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名
    jsApiList:  [ 'configWXDeviceWiFi' ] // 需要使用的jsapi列表
});


3、检查浏览器是否支持configWXDeviceWiFi接口,并使用此接口。

wx.ready(function() {
     wx.checkJsApi({
	jsApiList : [ 'configWXDeviceWiFi' ],
	    success : function(res) {
		wx.invoke('configWXDeviceWiFi',{},
			function(res) {
				var err_msg = res.err_msg;
				if (err_msg == 'configWXDeviceWiFi:ok') {
				    $('#message').html("配置 WIFI成功 OK啦");
					return;
				    } else {
					 $('#message').html("配置 WIFI失败");
				    }
				});
			}
		});
});

4、config  需要的参数具体实现,需要后台进行传值,具体实现可查阅上传demo.



5、开发完毕后可以使用  微信web开发这工具进行测试,测试成功后即可在手机公众号进行测试,如下:





我的CSDN代码下载:https://download.csdn.net/download/maizang52/10334002


展开阅读全文

没有更多推荐了,返回首页