cordova wifi插件（cordova plugin add cordova-plugin-hotspot）

最新推荐文章于 2024-05-15 14:27:42 发布

申小远

最新推荐文章于 2024-05-15 14:27:42 发布

阅读量2.9k

点赞数

分类专栏： Cordova 文章标签： cordova wifi

本文链接：https://blog.csdn.net/u013749068/article/details/78137675

版权

Cordova 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文实现的功能：

1.一键切换wifi状态，打开或关闭

2.输入SSID和密码，连接wifi

3.wifi打开时显示当前可用的wifi，但是还未实现点击SSID名连接wifi的功能

4.桌面实现当前wifi状态

具体的功能界面如图所示(wifi列表中SSID后面显示的是MAC)

功能实现过程（除去新建cordova项目的过程）:

1.安装wifi插件

在http://cordova.apache.org/plugins/?q=wifi&platforms=cordova-android网页中查找wifi插件，找到一个符合自己要求的

安装此插件命令：cordova plugin add cordova-plugin-hotspot

2.开始编写程序

2.1 在HTML中添加如下代码：(这是<body>中的全部代码，其中蓝色部分是自己添加的代码)

<body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
                SSID：<input type='text' id='accountText'><br>
                PAWD：<input type='password' id='passwordText'><br>
                <input type='button' id='openWIFI' value='打开wifi'></button>
                <button id='testbutton'>测试按钮</button>
                <button id='connectWIFI'>连接wifi</button>
                <p id='dispWifiStatus'></p>
                <p id='dispWifiSSID'></p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>

添加一个<TEXT>用于输入SSID，添加一个<PASSWORD>用于输入密码

添加一个打开/关闭按钮，一个连接wifi按钮

注：其中的测试按钮用于测试工程和执行，对最后的结果无影响，只是在调试过程中比较方便

2.2编写JavaScript脚本程序，此程序中注释写的比较详细，在此就不一一阐述，蓝色的是自己添加的代码：

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent('deviceready');

        document.getElementById('testbutton').addEventListener('click',testFunc)
        //注册连接wifi按钮的事件监听
        document.getElementById('connectWIFI').addEventListener('click',connectWifi)
        //打开wifi
        document.getElementById('openWIFI').addEventListener('click',openWifi); 
        checkWifiStatus();  //启动APP时自动检测wifi状态，若为打开状态，则全部操作为关闭做准备，反之
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();

function testFunc(){
    alert('测试信息\n输出则表示新建工程正常');
}

function checkWifiStatus(){//开启APP时检测wifi状态函数
    cordova.plugins.hotspot.isWifiOn(successCB, errorCB);
    function successCB(info){//此信息中包含wifi状态信息，若为true，则表示当前wifi为开启状态，则系统为关闭wifi做准备，反之
        if(info==true)
        {
            document.getElementById('openWIFI').value='关闭wifi';
            document.getElementById('dispWifiStatus').innerHTML='wifi已开启';
        }    
        else
        {
            document.getElementById('openWIFI').value='打开wifi';
            document.getElementById('dispWifiStatus').innerHTML='wifi已关闭';
        } 
        showWifiSSID(info);
    }
    function errorCB(){

    }
}

function connectWifi(){
    var account=document.getElementById('accountText');//读wifi名text句柄（自己暂且叫句柄）
    var pass=document.getElementById('passwordText');//读密码句柄
    cordova.plugins.hotspot.connectToWifi(account.value,pass.value,successCB,errorCB)//将帐号密码写入函数中，函数自动进行连接
    function successCB(fs){//此回调函数（产生的信息），显示是否连接成功
        //alert('contect success');
    }

    function errorCB(fs){//若连接失败，此函数会发出信息
        //alert('contect fail:'+fs.code);
    }
}

function openWifi(){//改变wifi状态，每按一次按钮取反一次
    cordova.plugins.hotspot.toggleWifi(wifiStatus, errorCB);//取反函数，第一个参数可返回状态信息，若打开了wifi则返回true，反之false
    function wifiStatus(info){//判断返回的信息，若为true说明此次动作是打开wifi，则相应的把按钮值变成‘关闭’字样，以便提示用户关闭wifi
        //alert(info);//反之则相反
        if(info==true)
        {
            document.getElementById('openWIFI').value='关闭wifi';
            document.getElementById('dispWifiStatus').innerHTML='wifi已开启';
        }    
        else
        {
            document.getElementById('openWIFI').value='打开wifi';
            document.getElementById('dispWifiStatus').innerHTML='wifi已关闭';
        } 
        showWifiSSID(info);
    }

    function errorCB(fs){//若出现意外无法正常打开/关闭wifi，则提示出错，并返回错误信息
        alert('打开wifi失败\n'+fs.code);
    }
}

function showWifiSSID(wifiStatus){//若当前wifi为打开状态，则显示可用的SSID
    cordova.plugins.hotspot.scanWifi(SSIDlist, errorCB);//扫描当前可用WIFI，此函数第一个参数返回的信息是一个包含 [SSID, BSSID, frequency, level, timestamp, capabilities]
                                                        //这六个属性的对象数组，使用时需解析出来每个属性，解析方法如下
    function SSIDlist(info){//解析读出来的SSID并显示出来，解析过程如下
        var str=new String;//新建一个字符串，用来存放格式后的SSID（每个SSID换行后显示下一个）
        for(var i=0;i<info.length;i++)//做一个循环，循环次数为扫描出来的对象个数，
        {
            str=str+info[i].SSID+''+info[i].BSSID+'<br>';//格式化字符串，info[i].SSID，先从对象数组中提取元素，然后点操作提取对象中的属性SSID
        }                               //之后添加一个<br>，因为是要显示在<p>中，属于直接往HTML中放一个字符串，所以要用<br>，不能用‘/n’
        if(wifiStatus==true)//此参数为总函数的输入参数，用来判断当前的wifi状态，如果当前wifi为打开状态，则显示SSID列表，
        {                   //如果为关闭状态，则不显示
            document.getElementById('dispWifiSSID').innerHTML=str;//用格式化后的字符串替换<p>中的内容
            //alert(str);
        } 
        else
        {
            document.getElementById('dispWifiSSID').innerHTML='';//如果wifi状态为为关，则显示为空
        }
        
    } 
    function errorCB(){

    } 
}

本文学习时应该注意结合上述网站中给出的插件手册学习，插件中只有函数，并没有给出实际的使用例子，本人也是新手，结合手册中的运行还有本文中的例子，尤其注意其中的回调函数和函数参数的使用方法，根据这几个例子扩展到其他的例子才是学习的好方法。

希望这篇文章可以帮助到其他的人，也便于自己以后复习，特作此文章，若有问题，或者有需要改正的地方，请联系我