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

7
回复
465
查看
[复制链接]

68

主题

81

帖子

387

安币

攻城狮

Rank: 3Rank: 3

发表于 2019-5-13 13:28:16 | 显示全部楼层 |阅读模式
本帖最后由 兰州拉面 于 2019-5-13 13:29 编辑

感谢APICloud论坛版主 Mr.ZhouHeng 的分享
第一步我们需要在开发控制台创建一个Native App应用以及添模块的准备工作:


按照下图步骤


输入完点创建完成之后


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


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





通过svn拉取本地 使用开发工具直接打开拉取到本地的代码进行开发;
如果你们使用的是官网工具apicloud-studio-2.exe
那么请看下面的链接教程把代码拉取到本地:
https://docs.apicloud.com/Dev-Tools/studio-dev-guide
拉取代码成功之后在工具的结构:


然后我们再打开Wi-Fi文档
https://docs.apicloud.com/Client-API/Device-Access/wifi
这个路径其实直接在模块对应点击模块名字就能进入到模块文档的 ,每个模块都有这个;
ios需要特别注意文档里面提示需要添加的文件:








<!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>复制代码

325

主题

976

帖子

712

安币

手工艺人

发表于 2019-5-14 09:56:31 | 显示全部楼层
感觉楼主很用心,辛苦啦~

11

主题

9429

帖子

981

安币

代码手工艺人

Rank: 4

发表于 2019-5-14 10:19:32 | 显示全部楼层
帮帮顶顶!!

446

主题

1101

帖子

1988

安币

手工艺人

发表于 2019-5-14 10:20:53 | 显示全部楼层
感觉楼主很用心,辛苦啦~

9

主题

9575

帖子

1779

安币

Android大神

Rank: 6Rank: 6

发表于 2019-5-14 10:31:27 | 显示全部楼层
安卓巴士是个不错的网站,我来顶个贴~

440

主题

1144

帖子

1900

安币

手工艺人

发表于 2019-5-14 10:34:44 | 显示全部楼层
感觉楼主很用心,辛苦啦~

7

主题

9588

帖子

1969

安币

Android大神

Rank: 6Rank: 6

发表于 2019-5-14 10:34:54 | 显示全部楼层
感谢分享,楼主V5~

0

主题

108

帖子

235

安币

攻城狮

Rank: 3Rank: 3

发表于 2019-5-16 17:59:30 | 显示全部楼层
涨姿势了,我要记录在安卓苹果手机、电脑以及iPad通用的敬业签云便签上,需要的时候随时查看。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )