Wi-Fi模块Demo(新手教程)图文详解模块使用教程

栏目: Html · 发布时间: 4年前

内容简介:第一步我们需要在开发控制台创建一个Native App应用以及添模块的准备工作:按照下图步骤

第一步我们需要在开发控制台创建一个Native App应用以及添模块的准备工作:

Wi-Fi模块Demo(新手教程)图文详解模块使用教程

按照下图步骤

Wi-Fi模块Demo(新手教程)图文详解模块使用教程

输入完点创建完成之后

Wi-Fi模块Demo(新手教程)图文详解模块使用教程

最好点击添加按钮之后返回看看你是否添加了需要的模块,添加完模块之后在点击自定义的

Wi-Fi模块Demo(新手教程)图文详解模块使用教程

然后云端操作就完成 接下来我们把云端代码拉取到本地

Wi-Fi模块Demo(新手教程)图文详解模块使用教程

Wi-Fi模块Demo(新手教程)图文详解模块使用教程

通过svn拉取本地 使用开发 工具 直接打开拉取到本地的代码进行开发;

如果你们使用的是官网工具apicloud-studio-2.exe

那么请看下面的链接教程把代码拉取到本地:

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

拉取代码成功之后在工具的结构:

Wi-Fi模块Demo(新手教程)图文详解模块使用教程

然后我们再打开Wi-Fi文档

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

这个路径其实直接在模块对应点击模块名字就能进入到模块文档的 ,每个模块都有这个;

ios需要特别注意文档里面提示需要添加的文件:

Wi-Fi模块Demo(新手教程)图文详解模块使用教程

Wi-Fi模块Demo(新手教程)图文详解模块使用教程

Wi-Fi模块Demo(新手教程)图文详解模块使用教程

<!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 ? '已经开启WLAN' : '已经关闭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">设备当前连接的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()">获取附近的wifi</div>
        <div class="title flex-con" :class="tab == true ? 'active' : ''" @click="fnGetWifi()">获取已经配置过的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 ? '附近' : '已经配置'}}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');
    // 判断是ios还是安卓  从而是否显示对应权限
    window.ListVue.show = api.systemType == 'ios' ? false : true;
    // 获取当前wifi
    fnObtainCurrent();
    // 获取附近链接的wifi
    fnScanWifiList();
};
// 获取当前wifi
function fnObtainCurrent() {
后面代码请下载源码自行研究

</script>

</html>

复制代码

相关技术资讯请点击【阅读原文】


以上所述就是小编给大家介绍的《Wi-Fi模块Demo(新手教程)图文详解模块使用教程》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web Design Index 7

Web Design Index 7

Pepin Press / PEPIN PRESS / 20070501 / TWD$1000.00

《網頁設計索引》年刊自2000年誕生起現已發展成同行業最重要的出版物之一,每年都會對網頁設計的最新趨勢給予準確概述。網站可簡單到只有一頁,也可以設計為具有最新數位性能的複雜結構。《網頁設計索引》的篩選標準是根據設計品質、創意及效率-而不管複雜程度如何。因此在本書中你可以找到所有可能的樣式和風格的實例。 每輯《網頁設計索引》都展示了1002個精采的網頁 同時提供了每個網頁的URL。網頁設計和編......一起来看看 《Web Design Index 7》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具