微信小程序扫码连接wifi功能
- 一、需求
- 二、准备工作
- 三、开发
- 保存wifi信息
- 生成微信小程序二维码
- 前端调用
一、需求
店铺出示二维码，用户扫码之后自动连接店铺wifi而后跳转至我们小程序首页
二、准备工作
1、小程序appid：
微信小程序的appid获取地址：https://mp.weixin.qq.com/wxamp/basicprofile/index，设置页面拉到最下面。
2、小程序appKey：
密钥获取地址：打开微信公众平台官网, 扫码登录，左侧菜单【开发 -> 开发管理】，点击tab【开发设置】。
三、开发
保存wifi信息
首先需要存储wifi的信息至数据库（信息包含：wifi账号、wifi密码）。
生成微信小程序二维码
注：为什么使用微信生成的二维码呢？由于我们需要连接二维码后跳转至我们的微信小程序中，普通的二维码写入路径后，也只能跳转到网页，不能跳转到小程序
1、主体方法
public void getWeiXinQR() throws Exception {
Map<String, Object> params = getParaJsonMap(1);
try {
//存储wifi的信息表
Record byId = Db.findById("of_shop_members_new_wifi_record", "member_id", params.get("member_id").toString());
if(byId == null){
rendFailedJson("用户未上传wifi信息");
}
//小程序id
String appId = ToolUtils.getParam(100);
//小程序密钥
String appKey = ToolUtils.getParam(101);
//接口调用凭证
String accessToken = ToolUtils.postToken(appId, appKey);
//本地生成二维码路径
String filePath = ToolUtils.getParam(102)+params.get("member_id").toString()+".jpg";
//当前小程序相对页面 必须是已经发布的小程序存在的页面（否则报错），例如 pages/index/index, 根路径前不要填加 /,不能携带参数（参数请放在scene字段里），如果不填写这个字段，默认跳主页面
String page = ToolUtils.getParam(103);
//最大32个可见字符，只支持数字，大小写英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~，其它字符请自行编码为合法字符（因不支持%，中文无法使用 urlencode 处理，请使用其他编码方式）
//二维码中存储wifi信息表的id，以供前端扫码获取信息
String scene = byId.get("id").toString();
//打开小程序版本：正式版为 "release"，体验版为 "trial"，开发版为 "develop"。默认是正式版。
String env_version = ToolUtils.getParam(123);
//wifi二维码
String s = ToolUtils.generateQrCode(filePath, page, scene, accessToken, env_version);
//将wifi的二维码路径存储到信息表中
byId.set("wifi_url",s);
Db.update("of_shop_members_new_wifi_record",byId);
}catch (Exception e){
e.printStackTrace();
}
}2、接口调用凭证
/**
* 接口调用凭证 access_token
*/
public static String postToken(String appId, String appKey) throws Exception {
String requestUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + appId + "&secret=" + appKey;
URL url = new URL(requestUrl);
// 打开和URL之间的连接
HttpURLConnection connection = (HttpURLConnection) url.openConnection();
connection.setRequestMethod("POST");
// 设置通用的请求属性
connection.setRequestProperty("Content-Type", "application/json");
connection.setRequestProperty("Connection", "Keep-Alive");
connection.setUseCaches(false);
connection.setDoOutput(true);
connection.setDoInput(true);
// 得到请求的输出流对象
DataOutputStream out = new DataOutputStream(connection.getOutputStream());
out.writeBytes("");
out.flush();
out.close();
// 建立实际的连接
connection.connect();
// 定义 BufferedReader输入流来读取URL的响应
BufferedReader in;
if (requestUrl.contains("nlp"))
in = new BufferedReader(new InputStreamReader(connection.getInputStream(), "GBK"));
else
in = new BufferedReader(new InputStreamReader(connection.getInputStream(), "UTF-8"));
StringBuilder result = new StringBuilder();
String getLine;
while ((getLine = in.readLine()) != null) {
result.append(getLine);
}
in.close();
JSONObject jsonObject = JSONObject.parseObject(result.toString());
return jsonObject.getString("access_token");
}3、生成微信小程序二维码
/**
* 生成微信小程序二维码
*
* @param filePath
* 本地生成二维码路径
* @param page
* 当前小程序相对页面 必须是已经发布的小程序存在的页面（否则报错），例如 pages/index/index, 根路径前不要填加 /,不能携带参数（参数请放在scene字段里），如果不填写这个字段，默认跳主页面
* @param scene
* 最大32个可见字符，只支持数字，大小写英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~，其它字符请自行编码为合法字符（因不支持%，中文无法使用 urlencode 处理，请使用其他编码方式）
* @param accessToken
* 接口调用凭证
*/
public static String generateQrCode(String filePath, String page, String scene, String accessToken,String env_version) throws Exception {
try {
//调用微信接口生成二维码
URL url = new URL("https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=" + accessToken);
HttpURLConnection httpURLConnection = (HttpURLConnection) url.openConnection();
httpURLConnection.setRequestMethod("POST");// 提交模式
// conn.setConnectTimeout(10000);//连接超时 单位毫秒
// conn.setReadTimeout(2000);//读取超时 单位毫秒
// 发送POST请求必须设置如下两行
httpURLConnection.setDoOutput(true);
httpURLConnection.setDoInput(true);
// 获取URLConnection对象对应的输出流
PrintWriter printWriter = new PrintWriter(httpURLConnection.getOutputStream());
// 发送请求参数
JSONObject paramJson = new JSONObject();
//这就是你二维码里携带的参数 String型 名称不可变
paramJson.put("scene", scene);
//注意该接口传入的是page而不是path
paramJson.put("page", page);
//这是设置扫描二维码后跳转的页面
paramJson.put("width", 200);
paramJson.put("is_hyaline", true);
paramJson.put("auto_color", true);
paramJson.put("env_version", env_version);
printWriter.write(paramJson.toString());
// flush输出流的缓冲
printWriter.flush();
//开始获取数据
BufferedInputStream bis = new BufferedInputStream(httpURLConnection.getInputStream());
OutputStream os = new FileOutputStream(new File(filePath));
int len;
byte[] arr = new byte[1024];
while ((len = bis.read(arr)) != -1) {
os.write(arr, 0, len);
os.flush();
}
os.close();
} catch (Exception e) {
e.printStackTrace();
}
String s = saveQrcode(filePath);
System.out.println("打开地址查看生成的二维码：" + filePath);
return saveQrcode(filePath);
}4、存储oss
//保存oss
public static String saveQrcode(String filePath) throws Exception {
// Endpoint填写为https://oss-cn-chengdu.aliyuncs.com。
String endpoint = "https://oss-cn-beijing.aliyuncs.com";
// 阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户。
String accessKeyId = "****";
String accessKeySecret = "**********";
// 创建OSSClient实例。
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
//路径地址
String objectname = "file/" + System.currentTimeMillis() + "/demo/";
// 填写本地文件的完整路径。如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件流。
InputStream inputStream = new FileInputStream(filePath);
//调用oss实现上传第一个参数bucket名称 第二个参数文件名称 第三个参数输入流
String url = objectname + "backiee-230432.jpg";
//oss库名称
ossClient.putObject("angel-shop", url, inputStream);
// 关闭OSSClient。
ossClient.shutdown();
//返回组成的文件url
String photoUrl = "https://" + "*******." + "oss-cn-beijing.aliyuncs.com" + "/" + url;
System.out.println(photoUrl);
return photoUrl;
}前端调用
1、根据扫码的结果，获取wifi的信息
2、初始化wifi模块
官方文档：
https://developers.weixin.qq.com/miniprogram/dev/api/device/wifi/wx.startWifi.html
startWifi(_this) {
wx.startWifi({
success: function (res) {
console.log("初始化成功，这里要写连接模块")
},
fail: function (res) {
console.log("wifi启动失败")
_this.startError=res.errMsg;
}
})
}3、连接wifi的代码实现
官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/device/wifi/wx.connectWifi.html
connectWifi(_this){
wx.connectWifi({
SSID: _this.SSID,
password: _this.password,
success (res) {
console.log("wifi连接成功")
},
fail: function (res) {
console.log("wifi连接失败")
_this.startError=res.errMsg;
}
})
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
