Wi Fi module Demo (novice tutorial) graphic explanation module tutorial

The first step is to create a Native App application in the development console and prepare for adding modules:

Follow the steps below

After entering points and creating points

It is better to click the Add button to return to see if you have added the required module. After adding the module, click the custom

Then the cloud operation is completed. Next, we pull the cloud code to local

Pull the local code through svn and use the development tool to directly open the pull to local code for development;

If you are using apicloud-studio-2.exe
Please see the following link tutorial to pull the code locally:

https://docs.apicloud.com/Dev...

After the code is pulled successfully, the structure of the tool is as follows:

Then we open the Wi Fi document

https://docs.apicloud.com/Cli...

In fact, this path can enter the module document directly by clicking the module name corresponding to the module. Each module has this path;

ios needs to pay special attention to the files in the document that need to be added:

<!DOCTYPE HTML>
<html>
<head>

<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>wifi_frm</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/box.css" />
<style media="screen">
    <style>html,
    body {
        background-color: #ededed;
    }
    .list-item {
        margin-top: 1px;
        padding: 15px 10px;
        font-size: 14px;
        line-height: 180%;
        position: relative;
        background-color: #fff;
    }
    .list-item:after {
        content: "  ";
        position: absolute;
        z-index: 77;
        left: 0;
        top: 0;
        width: 200%;
        height: 200%;
        border-bottom: 1px solid #d4d4d4;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scale(.5, .5);
        transform: scale(.5, .5);
    }
    .left {
        padding: 0px 10px;
        line-height: 220%;
        color: #333;
    }
    .list-item .title {
        padding: 0px 10px;
        line-height: 220%;
        color: #333;
        position: relative;
        z-index: 88;
    }
    .list-item .right {
        position: relative;
        z-index: 99;
    }
    .list-item .right .state {
        display: inline-block;
        vertical-align: middle;
        border-radius: 20px;
        width: 38px;
        height: 21px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        color: #fff;
    }
    .list-item .right .open {
        background-color: #00acff;
    }
    .list-item .right .open::after {
        content: " ";
        float: right;
        margin-top: 1px;
        margin-right: 1px;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0px 0px 1px 1px #d4d4d4;
        -webkit-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }
    .list-item .right .close {
        background-color: #ededed;
    }
    .list-item .right .close::after {
        content: " ";
        float: left;
        margin-top: 1px;
        margin-left: 1px;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0px 0px 1px 1px #d4d4d4;
        -webkit-transition: all 0.2s linear;
        transition: all 0.2s linear;
    }
    .center {
        text-align: center;
    }
    .list-item .active {
        color: #00acff
    }

</style>
</head>
<body>

<!-- v-cloak -->
<div class="list" v-cloak>
    <div class="list-item flex-wrap">
        <div class="title flex-con ellipsis-1">{{state == true ? 'Already opened WLAN' : 'Closed WLAN'}}</div>
        <div class="right" v-if="show===true" @click="fnSwitch(state)">
            <div class="state" :class="state == true ? 'open' : 'close'"></div>
        </div>
    </div>
    <div class="list-item flex-wrap">
        <div class="left">Device currently connected wifi:</div>
        <div class="title flex-con ellipsis-1">{{current}}</div>
    </div>
    <div class="list-item flex-wrap center" v-if="show===true">
        <div class="title flex-con " :class="tab == false ? 'active' : ''" @click="fnScanWifi()">Get nearby wifi</div>
        <div class="title flex-con" :class="tab == true ? 'active' : ''" @click="fnGetWifi()">Get the configured wifi</div>
    </div>
    <div class="list-item flex-wrap" v-if="show===true&&state===true" v-for="(list,index) in items">
        <div class="left">{{tab == false ? 'nearby' : 'Already configured'}}wifi:</div>
        <div class="title flex-con ellipsis-1">{{list.ssid}}</div>
    </div>
</div>

</body>
<script src="../script/api.js"></script>
<script src="../script/fastclick.js"></script>
<script src="../script/vue.min.js"></script>
<script>

var eWifi;
apiready = function() {
    fnInVue();
}
function fnInVue() {
    window.ListVue = new Vue({
        el: ".list",
        data: {
            current: '',
            items: [],
            show: false,
            state: false,
            tab: false
        },
        mounted: function() {
            this.$nextTick(function() {
                fnInit();
            });
        },
        methods: {
            fnSwitch: function(states) {
                console.warn(states);
                if (states) {
                    fnCloseWifi();
                } else {
                    fnOpenWifi();
                }
            },
            fnScanWifi: function() {
                if (this.tab === false) {
                    return;
                }
                this.tab = false;
                fnScanWifiList();
            },
            fnGetWifi: function() {
                if (this.tab === true) {
                    return;
                }
                this.tab = true;
                fnGetConfiguredNetworks();
            },
        }
    });
}
function fnInit() {
    eWifi = api.require('wifi');
    // Determine whether it is ios or Android and display the corresponding permissions
    window.ListVue.show = api.systemType == 'ios' ? false : true;
    // Get current wifi
    fnObtainCurrent();
    // Get wifi of nearby links
    fnScanWifiList();
};
// Get current wifi
function fnObtainCurrent() {
//Please download the source code for your own research

</script>
</html>
Copy code

For technical information, please click [read original]

Posted by davestevens_uk on Mon, 11 Nov 2019 13:30:30 -0800

Programmer Group

Wi Fi module Demo (novice tutorial) graphic explanation module tutorial

Hot Keywords