本文出自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（新手教程）图文详解模块使用教程的更多相关文章

  1. GitHub 使用教程图文详解(转)

    大纲: 一.前言 二.GitHub简介 三.注册GitHub账号 四.配置GitHub 五.使用GitHub 六.参与GitHub中其它开源项目 七.总结 注,GitHub官网:https://git ...

  2. GitHub 使用教程图文详解

    大纲: 一.前言 二.GitHub简介 三.注册GitHub账号 四.配置GitHub 五.使用GitHub 六.参与GitHub中其它开源项目 七.总结 注,GitHub官网:https://git ...

  3. Windows Server 2008 架设 Web 服务器教程(图文详解)

    Windows Server 2008 架设 Web 服务器教程(图文详解) 一.安装 IIS 7.0 : 虽然 Windows Server 2008 内置了I IS 7.0,但是默认情况下并没有安 ...

  4. MySQL 8.0.20 安装教程图文详解(windows 64位)

    MySQL 8.0.20 安装教程图文详解(windows 64位)  更新时间:2020年05月09日 15:09:04   转载 作者:瘦肉粥不加糖     这篇文章主要介绍了MySQL 8.0. ...

  5. MySQL8.0.20安装教程图文详解,MySQL8.0.20安装教程winodws10

    MySQL8.0.20安装教程图文详解,非常详细 一:mysql官网下载 https://dev.mysql.com/downloads/file/?id=494993 不用注册,直接下载就好 二:解 ...

  6. Python OS模块常用功能 中文图文详解

    一.Python OS模块介绍 OS模块简单的来说它是一个Python的系统编程的操作模块,可以处理文件和目录这些我们日常手动需要做的操作. 可以查看OS模块的帮助文档: >>> i ...

  7. MyEclipse 新手使用教程---图文详解

    引言 某天在群里看到有小伙伴问MyEclipse/Eclipse的一些使用问题,虽然在我看来,问的问题很简单,但是如果对于刚刚学习的人来说,可能使用就不那么友好了.毕竟我在开始使用MyEclipse/ ...

  8. ansys19.0安装破解教程(图文详解)

    ansys19.0是一款非常著名的大型通用有限元分析(FEA)软件.该软件能够与多数计算机辅助设计软件接口,比如Creo, NASTRAN.Algor.I-DEAS.AutoCAD等,并能实现数据的共 ...

  9. creo5.0安装教程(图文详解)

    PTC公司最近发布了Creo 5.0正式版 ,作为最具其革命性的新一代产品设计软件,其所提供专业的二维和三维设计设计,能帮助企业和公司进行产品生命周期管理(PLM)和制定服务管理解决方案.Creo5. ...

随机推荐

  1. Python--day26--类方法和静态方法

    类方法: 静态方法:

  2. codeforces 615A

    题意:给你m个编号为1到m的灯泡:然后n行中每一行的第一个数给出打开灯泡的个数xi 然后是yij是每个灯泡的编号: 题目中有一句话. 我愣是没看,因为我英语真的是一窍不通,看了也白看,直接看数据做的, ...

  3. JavaScript：4个常见的内存泄露

    什么是内存泄漏 内存泄漏基本上就是不再被应用需要的内存,由于某种原因,没有被归还给操作系统或者进入可用内存池. 编程语言喜欢不同的管理内存方式.然而,一段确定的内存是否被使用是一个不可判断的问题.换句 ...

  4. 2018-2-13-wpf-使用-Dispatcher.Invoke-冻结窗口

    title author date CreateTime categories wpf 使用 Dispatcher.Invoke 冻结窗口 lindexi 2018-2-13 17:23:3 +080 ...

  5. CodeForces - 1186 C. Vus the Cossack and Strings (异或)

    Vus the Cossack has two binary strings, that is, strings that consist only of "0" and &quo ...

  6. koa2入门--02.koa2路由

    首先输入在项目文件下使用cmd,输入 npm install koa-router --save const koa = require('koa');//引入koa const Router = r ...

  7. linux安装python3.*，更换Python2.*

    下载并解压:Python-3.5.7.tgz [root@AH-aQYWTYSJZX01 python3]# ll total 20268 -rw-r----- 1 temp01 temp01 207 ...

  8. sql临时表与变量表

    1)临时表存储在 tempdb 中,当不再使用时会自动删除 一般使用如下: --创建临时表 select * into #temp from TABLE --使用临时表 select * from # ...

  9. boostrap-非常好用但是容易让人忽略的地方【4】：Font Awesome

    font-awesome基本用法 官方代码传送门 font-awesome在bootstrap中的特殊用法(这个才是重点) 要点归纳1(官方) 官方代码传送门 要点归纳2(我的) <a href ...

  10. springcloud玩转单点登录【oauth】

    随着公司项目的庞大,单点登录变得尤为重要,那么怎么实现单点登录,下面已oauth为标准实现单点登录. [特别鸣谢:魔乐科技,附上官网:www.mldn.cn] 1:项目组织结构 本项目为oAuth修改 ...