微信小程序扫码连接wifi功能

2024-07-16 22:22| 来源: 网络整理| 查看: 265

微信小程序扫码连接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 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; } }) }

【本文地址】

公司简介

联系我们