Wi-Fi模組Demo圖文詳解模組方法

2023-07-14 21:03:41

本文出自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需要特別注意文件裡面提示需要新增的檔案：

wifi_frmhtml, 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 }{{state == true ? '已經開啟WLAN' : '已經關閉WLAN'}}裝置當前連線的wifi:{{current}}獲取附近的wifi獲取已經配置過的wifi{{tab == false ? '附近' : '已經配置'}}wifi:{{list.ssid}}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() { 後面程式碼請下載原始碼自行研究複製程式碼