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

我会带着你远行 2024-03-02 03:15 35阅读 0赞

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