在OpenHarmony上开发的第一个应用-WIFI(上） 原创 精华

src
└─main
    ├─js
    │  └─default
    │      ├─common  ----------------------- 公共库
    │      ├─i18n    
    │      ├─images  ----------------------- 图片资源
    │      └─pages   ----------------------- 页面及模块
    │          ├─index --------------------- 主界面
    │          ├─keyboard ------------------ 键盘模块
    │          └─wifiItem ------------------ WiFi列表项模块
    └─resources
        └─base
            ├─element
            └─media
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

 <div class="wifi-info" style="align-content: center;justify-content: space-between;">
    <!--左侧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>
        <!--右侧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="关闭" @change="wifiSwitchChanged" texton="开启" showtext="true" checked="{{ wifiInfo.isActive }}" style="font-size: 20px;text-padding:6px;height: 80px;"></switch>
        </div>
    </div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

<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="listItemToucheStart" @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>当前无可用WIFI,请下拉刷新</text>
        </refresh>
    </div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

<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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

<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="请输入密码" @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>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

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 }
};

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.