本次將分為上下兩篇講述在搭載 OpenHarmony2.0 的 3516 開發(fā)板上開發(fā)的第一個(gè) Hap-WIFI，目前 Openharmony2.0 僅支持 JSUI，所以以下內(nèi)容皆為 JSUI 開發(fā)。

源碼碼已上傳至 gitee：

https://gitee.com/panda-coder/open-harmony-apps/tree/master/Wifi

現(xiàn)有不足之處為只能獲取到 WiFi 的 ipv6，獲取不到 ipv4，已提 issue。也是因?yàn)檫@個(gè)原因文章才發(fā)出，本想去研究 cpp 源碼試著解決問題，奈何能力有限。后續(xù)會(huì)進(jìn)一步完善，并加上開啟熱點(diǎn)等功能。

配置 SDK、開發(fā)工具等步驟將不再贅述，請(qǐng)參考：《在OpenHarmony2.0 上安裝自己的系統(tǒng)應(yīng)用》

內(nèi)容

上篇：

WiFi 的界面排版

WiFi 的 JS-API

下篇：

自定義的鍵盤組件的開發(fā)講解（OpenHarmony2.0 無系統(tǒng)輸入法，input框無法輸入）。①鍵盤的排版。②鍵盤的特殊功能鍵。③鍵盤數(shù)據(jù)回傳-JS 自定義組件的事件傳遞。

代碼目錄

src

└─main

├─js

│ └─default

│ ├─common ----------------------- 公共庫

│ ├─i18n

│ ├─images ----------------------- 圖片資源

│ └─pages ----------------------- 頁面及模塊

│ ├─index --------------------- 主界面

│ ├─keyboard ------------------ 鍵盤模塊

│ └─wifiItem ------------------ WiFi列表項(xiàng)模塊

└─resources

└─base

├─element

└─media

布局排版

①index 主界面

主界面分為上下兩部分，上部分為控制顯示面板，下部分為 WiFi 列表：

wifi-info 為上部控制面板

wifi-list 為下半部 wifi 列表

dialog 分別為密碼彈出/鍵盤彈窗

②wifi-info

《div class=“wifi-info” style=“align-content： center;justify-content： space-between;”》

《！--左側(cè)wifi圖片--》

《div style=“justify-content： center;align-items： center;width： 60%;flex-direction： column;”》

《image src=“。。/。。/images/wifi.png” style=“width:100px;height:100px;”》《/image》

《text style=“color： white;font-size： 30px;margin-top： 6px;”》WLAN 2.4GHz《/text》

《text》{{console}}《/text》

《/div》

《divider vertical=“true” style=“color： white;stroke-width:2px;padding： 30px 0px;”》《/divider》

《！--右側(cè)WiFi詳情--》

《div style=“justify-content： center; align-items： center;flex-direction： row;width： 100%;”》

《text style=“color： white;padding： 10px;margin-left： 10px;width： 80%;text-align： start;”》{{state}}《/text》

《switch textoff=“關(guān)閉” @change=“wifiSwitchChanged” texton=“開啟” showtext=“true” checked=“{{ wifiInfo.isActive }}” style=“font-size： 20px;text-padding:6px;height： 80px;”》《/switch》

《/div》

《/div》

所有的 div 布局排版均為 flex 排版。左側(cè)為一張 WiFi 圖片，一段文字說明。console 字段為方便界面調(diào)試而使用的字段，默認(rèn)為空，為空時(shí)不顯示。

《divider》 為分隔線控件，將左右兩側(cè)進(jìn)行分割右側(cè)為一個(gè) 《text》 組件顯示狀態(tài)信息。

如 WiFi 連接/開啟狀態(tài)，該值為 computed 計(jì)算值，《switch》 控件進(jìn)行控制 WiFi 的開啟關(guān)閉。

③wifi-list

《div class=“wifi-list”》

《refresh refreshing=“{{isSaning}}” @pulldown=“refreshTouched”》

《list if=“{{wifiInfo.scanInfo && wifiInfo.scanInfo.length》0}}” 》

《list-item if=“{{connectItem && connectItem.ssid}}” style=“margin:0px 6px;padding： 10px 6px;width： 100%;justify-content： center;flex-direction： column;”》

《wifi-item @my-touched=“checkedWifi” style=“width： 100%;” value=“{{connectItem}}” checked=“true”》《/wifi-item》

《divider vertical=“false” style=“color： #D4D3D3;stroke-width:2px; margin-top： 6px;padding： 10px;”》《/divider》

《/list-item》

《list-item for=“{{WifiScanList}}” @touchstart=“l(fā)istItemToucheStart” @touchmove=“itemMoved” tid=“id” style=“margin:0px 6px;padding： 10px 6px;width： 100%;justify-content： center;flex-direction： column;” 》

《wifi-item @my-touched=“checkedWifi” style=“width： 100%;” value=“{{$item}}”》《/wifi-item》

《divider vertical=“false” style=“color： #D4D3D3;stroke-width:2px; margin-top： 6px;padding： 10px;”》《/divider》

《/list-item》

《/list》

《text style=“justify-content： center;width： 100%;color： #959494;text-align： center;” else》當(dāng)前無可用WIFI，請(qǐng)下拉刷新《/text》

《/refresh》

《/div》

WiFi 列表稍微復(fù)雜一點(diǎn)，首先通過 《refresh》 組件做了一個(gè)下拉功能，下拉時(shí)更新 wifi 掃描列表。

其次通過 list 和 list-item 組件配合將通過接口獲取到的 WiFi 對(duì)象數(shù)組進(jìn)行顯示。

在顯示的時(shí)候優(yōu)先顯示已連接數(shù)據(jù)，同時(shí)在下面的列表中排除已連接的，list-item 中使用自定義組件 wifi-item，并添加分割線組件進(jìn)行分隔。

④wifiItem

布局代碼：

《div class=“container” @touchend=“boxTouchend”》

《div class=“box”》

《div class=“box-left”》

《text class=“{{checked？‘isChecked’：‘’}}”》{{ssid}}《/text》

《text》{{desc}}《/text》

《/div》

《div class=“box-right”》

《image style=“width： 80px;height:80px;” src=“。。/。。/images/wifi-2.png”》《/image》

《/div》

《/div》《/div》

ischecked 判斷當(dāng)前是否為選中狀態(tài)，加載選中的樣式。

⑤dialog

第一個(gè) dialog 為彈出輸入密碼框，第二個(gè) dialog 為加載自定義的鍵盤組件，將在下一節(jié)進(jìn)行講解。

第一個(gè) dialog：

《dialog id=“wifi_dialog” cancel=“hideInputPassword” style=“height： 280px;width:90%;margin-bottom： 50%;border-radius： 3px;”》

《div style=“flex-direction： column;padding： 12px;”》

《text style=“font-size： 36px;font-weight： bolder;padding： 15px 3px;”》{{checkedWifiName}}《/text》

《div》

《input placeholder=“請(qǐng)輸入密碼” @touchend=“showKeyBoard” value=“{{wifiPassword}}” style=“border-radius： 3px;”》《/input》

《/div》

《div style=“justify-content： center;”》

《button class=“btn btn-default” @touchend=“connect” 》連 接《/button》

《button class=“btn btn-primary” @touchend=“hideInputPassword”》取 消《/button》

《/div》

《/div》

《/dialog》

需要注意的是，dialog 下只能有一個(gè)根節(jié)點(diǎn)。input 類型為了方便，未采用密碼形式，弱需要設(shè)為密碼方式，在 input 組件上增加 type=“password” 特性即可，更多類型可參考官方文檔。

JS API

WIFI 的官方倉庫地址：

https://gitee.com/openharmony/communication_wifi

找到該倉庫目錄下的 interfaces/kits/jskits/@ohos.wifi.d.ts 文件可以看到對(duì) JS 已提供的 api 接口信息（文件注釋非常詳細(xì)，就不再贅述）。

但需要注意的是，開發(fā)中引用 wifi api 并非 @ohos.wifi，而是 @ohos.wifi_native_js。

cpp 位置為 interfaces/innerkits/native_cpp/js_napi/wifi_js.cpp：

static napi_value Init（napi_env env， napi_value exports）

{

napi_property_descriptor desc［］ = {

DECLARE_NAPI_FUNCTION（“enableWifi”， EnableWifi），

DECLARE_NAPI_FUNCTION（“disableWifi”， DisableWifi），

DECLARE_NAPI_FUNCTION（“isWifiActive”， IsWifiActive），

DECLARE_NAPI_FUNCTION（“scan”， Scan），

DECLARE_NAPI_FUNCTION（“getScanInfos”， GetScanInfos），

DECLARE_NAPI_FUNCTION（“addDeviceConfig”， AddDeviceConfig），

DECLARE_NAPI_FUNCTION（“connectToNetwork”， ConnectToNetwork），

DECLARE_NAPI_FUNCTION（“connectToDevice”， ConnectToDevice），

DECLARE_NAPI_FUNCTION（“disConnect”， DisConnect），

DECLARE_NAPI_FUNCTION（“getSignalLevel”， GetSignalLevel）

};

NAPI_CALL（env， napi_define_properties（env， exports， sizeof（desc） / sizeof（napi_property_descriptor）， desc））;

return exports;

}

static napi_module wifiJsModule = {

.nm_version = 1，

.nm_flags = 0，

.nm_filename = NULL，

.nm_register_func = Init，

.nm_modname = “wifi_native_js”，

.nm_priv = （（void *）0），

.reserved = { 0 }

};

編輯：jq