微信小程序扫码连接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文章来源地址https://www.toymoban.com/news/detail-814175.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;
	  }
	})
}

到了这里,关于微信小程序扫码连接wifi功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序实现自定义扫码功能

    微信小程序提供了调取相机直接扫码的功能,但是扫描界面只是一个全屏的相机,且无法添加其他功能。通过微信小程序的camera组件,即系统相机,可以帮助我们实现自定义扫码功能。(注:扫码二维码功能,需升级微信客户端至6.7.3。) 实现流程 使用camera组件,使用扫码模

    2024年02月06日
    浏览(51)
  • 微信小程序嵌套H5页面,调用微信小程序扫码功能,并将结果传回H5页面

    实现方式: 小程序嵌套h5页面,点击h5页面的扫码按钮跳转到小程序的扫码页面,进入之后会立即扫码,拿到扫码结果后,跳转到小程序定义好的webview页面,再由webview页面进入h5页面。 缺点:为了唤起扫码,会进入一个空白的扫码页面 1、小程序嵌套h5页面方法 在小程序中,创

    2024年02月12日
    浏览(52)
  • 微信小程序 camera组件实现自定义界面的扫码功能

    目录 使用到的功能点: 代码实现: 效果图: 想要实现自定义界面的扫码,这里用到了微信小程序的媒体组件 ⚠️:同一页面只能插入一个  camera  组件 使用到的功能点: 1. camera mode=scanCode // 扫码模式 binderror  //用户不允许使用摄像头时触发 bindscancode // 在扫码识别成功时

    2024年02月09日
    浏览(47)
  • 【h5+微信小程序】vue2实现h5扫码登录功能

    需要实现在同域名的h5页面上增加一个微信扫码登录的功能,如果用户已经有小程序的账号,可以直接登录。 使用 :vue2+微信小程序原生开发 可以实现上述功能的 前提 是:同一用户,对同一个微信开放平台下的不同应用,UnionID是相同的。域名已经配置。 可以用什么来区分

    2024年02月14日
    浏览(71)
  • 如何为微信小程序添加扫码支付和二维码收款功能

    微信小程序是一种轻量级的应用程序,它可以在微信客户端内运行。微信小程序支持扫码支付和二维码收款功能,以方便用户进行支付和收款。 本文将针对微信小程序的扫码支付和二维码收款功能进行详细的讲解,并提供相应的代码案例,帮助开发者了解如何为微信小程序添

    2024年02月04日
    浏览(59)
  • 微信小程序连接wifi

    最近在做微信小程序连接wifi的功能,记录一下 1、为了连接WiFi,我们需要获取地理位置权限。 2、在获取地理位置权限之后,我们可以开始写连接WIFI代码了 BSSID参数,也可以使用BSSID,这是为了防止在相同名称下连接WIFI错误,加入了一个设备ID连接  这样一个简单的连接wif

    2024年01月24日
    浏览(80)
  • Java后台实现网站微信扫码登录功能,获取用户openid,及微信用户信息(小程序码方案),关联微信小程序(个人主体小程序也可以)

    目录 前言 下面展示操作流程 注册微信小程序 通过后台获取小程序码 前端处理 时序图理解 方案实现步骤 前言 很多业务场景之下我们需要实现  微信扫码登录  的需求,如: 同步网站与小程序的用户数据 。 需要获取用户微信相关基本信息,如头像、id等 实例:小程序上的

    2024年02月02日
    浏览(58)
  • 最新影视视频微信小程序源码-带支付和采集功能/微信小程序影视源码PHP(更新)

    源码简介: 这个影视视频微信小程序源码,新更新的,它还带支付和采集功能,作为微信小程序影视源码,它可以为用户 提供丰富的影视资源,包括电影、电视剧、综艺节目等。 这个小程序影视源码,还带有变现模式,它的盈利方式挺直接了当的,就是卖会员的,只要无脑

    2024年02月08日
    浏览(57)
  • 基于天问51-Core自制开发WIFI模块连接MQTT&巴法云平台-微信小程序显示温度数据

    目 录 一、摘要 二、项目准备材料 三、硬件总体设计 四、软件代码设计 五、整体测试联调 六、效果展示 一、摘要 本项目基于天问51-Core最小系统开发,自行设计PCB电路,主要包括DHT11、ESP8266、OLED三个主要外设模块。此项目实现的三大功能:1、基本功能:单片机将DHT11获取

    2024年02月06日
    浏览(53)
  • 微信小程序——实现蓝牙设备搜索及连接功能

    ✅作者简介:2022年 博客新星 第八 。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏:微信小程序学习分享 ✨特色专栏:国学周更-心性养成之路 🥭本文内容:微信小程序——实

    2024年02月08日
    浏览(63)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包