WiFi模块Demo（新手教程）图文详解模块使用教程
本文出自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: %;
position: relative;
background-color: #fff;
}
.list-item:after {
content: " ";
position: absolute;
z-index: ;
left: ;
top: ;
width: %;
height: %;
border-bottom: 1px solid #d4d4d4;
-webkit-transform-origin: ;
transform-origin: ;
-webkit-transform: scale(., .);
transform: scale(., .);
}
.left {
padding: 0px 10px;
line-height: %;
color: #;
}
.list-item .title {
padding: 0px 10px;
line-height: %;
color: #;
position: relative;
z-index: ;
}
.list-item .right {
position: relative;
z-index: ;
}
.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: %;
background-color: #fff;
box-shadow: 0px 0px 1px 1px #d4d4d4;
-webkit-transition: all .2s linear;
transition: all .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: %;
background-color: #fff;
box-shadow: 0px 0px 1px 1px #d4d4d4;
-webkit-transition: all .2s linear;
transition: all .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>
复制代码
WiFi模块Demo（新手教程）图文详解模块使用教程的更多相关文章
- GitHub 使用教程图文详解(转)
大纲: 一.前言 二.GitHub简介 三.注册GitHub账号 四.配置GitHub 五.使用GitHub 六.参与GitHub中其它开源项目 七.总结 注,GitHub官网:https://git ...
- GitHub 使用教程图文详解
大纲: 一.前言 二.GitHub简介 三.注册GitHub账号 四.配置GitHub 五.使用GitHub 六.参与GitHub中其它开源项目 七.总结 注,GitHub官网:https://git ...
- Windows Server 2008 架设 Web 服务器教程(图文详解)
Windows Server 2008 架设 Web 服务器教程(图文详解) 一.安装 IIS 7.0 : 虽然 Windows Server 2008 内置了I IS 7.0,但是默认情况下并没有安 ...
- MySQL 8.0.20 安装教程图文详解(windows 64位)
MySQL 8.0.20 安装教程图文详解(windows 64位) 更新时间:2020年05月09日 15:09:04 转载 作者:瘦肉粥不加糖 这篇文章主要介绍了MySQL 8.0. ...
- MySQL8.0.20安装教程图文详解,MySQL8.0.20安装教程winodws10
MySQL8.0.20安装教程图文详解,非常详细 一:mysql官网下载 https://dev.mysql.com/downloads/file/?id=494993 不用注册,直接下载就好 二:解 ...
- Python OS模块常用功能 中文图文详解
一.Python OS模块介绍 OS模块简单的来说它是一个Python的系统编程的操作模块,可以处理文件和目录这些我们日常手动需要做的操作. 可以查看OS模块的帮助文档: >>> i ...
- MyEclipse 新手使用教程---图文详解
引言 某天在群里看到有小伙伴问MyEclipse/Eclipse的一些使用问题,虽然在我看来,问的问题很简单,但是如果对于刚刚学习的人来说,可能使用就不那么友好了.毕竟我在开始使用MyEclipse/ ...
- ansys19.0安装破解教程(图文详解)
ansys19.0是一款非常著名的大型通用有限元分析(FEA)软件.该软件能够与多数计算机辅助设计软件接口,比如Creo, NASTRAN.Algor.I-DEAS.AutoCAD等,并能实现数据的共 ...
- creo5.0安装教程(图文详解)
PTC公司最近发布了Creo 5.0正式版 ,作为最具其革命性的新一代产品设计软件,其所提供专业的二维和三维设计设计,能帮助企业和公司进行产品生命周期管理(PLM)和制定服务管理解决方案.Creo5. ...
随机推荐
- POJ 2488 深搜dfs、
题意:模拟国际象棋中马的走棋方式,其实和中国象棋的马走的方式其实是一样的,马可以从给定的方格棋盘中任意点开始,问是否能遍历全部格子,能的话输出字典序最小的走棋方式,否则输出impossible 思路: ...
- 高级教程: 作出动态决策和 Bi-LSTM CRF 重点
动态 VS 静态深度学习工具集 Pytorch 是一个 动态 神经网络工具包. 另一个动态工具包的例子是 Dynet (我之所以提这个是因为使用 Pytorch 和 Dynet 是十分类似的. 如果你 ...
- vscode编辑如何保存时自动校准eslint规范
在日常开发中,一个大点的项目会有多人参与,那么可能就会出现大家的代码风格不一,各显神通,这个时候就要祭出我们的eslint. 在这之前磨刀不误砍柴工,我们先来配置一下我们的代码编辑工具,如何在vsco ...
- Vue 设置style属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于Android studio Haxm加速器安装
首先,在SDK manager中要安装如下选项 安装后,在启动虚拟机时如果提示你没有Install Haxm,在目录sdk\extras\intel\Hardware_Accelerated_Exec ...
- 2018-3-31-C＃-谁改了我的代码
title author date CreateTime categories C# 谁改了我的代码 lindexi 2018-3-31 21:15:3 +0800 2018-2-13 17:23:3 ...
- P1026 翻硬币
题目描述 小明正在玩一个"翻硬币"的游戏.桌上放着排成一排的若干硬币.我们用 * 表示正面,用 o 表示反面(是小写字母,不是零). 比如,可能情形是:**oo***oooo 如果 ...
- H3C查看、删除已经保存配置文件--用户图示（console）以上
<H3C>display saved-configuration //显示已经保存的内容 <H3C>reset saved-configuration //删除 ...
- 2018-2-13-win10-uwp-模拟网页输入
title author date CreateTime categories win10 uwp 模拟网页输入 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 1 ...
- 前端——CSS选择器
目录 前端CSS CSS三种引入方式 CSS标签选择器 基本选择器 1.元素选择器 2.类选择器 3.id选择器 4.通用选择器 组合选择器 1.后代选择器 空格 2.儿子选择器 > 3.毗邻选 ...