本文出自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>
複製代碼