# 轻量系统应用开发之JSI

## 样例简介 

本文档讲述的是轻量系统应用开发之燃气告警器UI开发的快速上手。主要是针对前端界面的开发，使用的轻量系统应用开发框架是基于JS扩展的类Web开发范式。


### 运行效果

对于该燃气告警器的操作，如图：

![gas_detection](resource/gas_detection.gif)


## 快速上手

### 准备软件环境

首先需要下载开发IDE选择DevEcoStudio 3.0 Beta2 版本，最新的DevEcoStudio 3.0 Beta3暂不支持轻量系统开发模板

创建一个HelloWorld工程

### 燃气告警首页UI开发

页面布局分析

![gas_structure](resource/gas_structure.jpg)

#### 顶部标题栏开发

hml代码（页面布局，需要用到哪些组件和容器）

```
 <div class="header">
        <text class="title">燃气报警器</text>
        <image class="wifi-btn" src="{{ isWifi ? '/common/icon_wifi_on.png' : '/common/icon_wifi_off.png' }}"></image>
        <image class="change-page" onclick="changePage" src="common/icon_liuzhuan.png"></image>
    </div>
```

css代码（存放每个组件和容器所用到的样式，样式主要是设置组件或容器宽、高，字体颜色，字体大小等属性）


```
.header {
    width: 100%;
    height: 84px;
    align-items: center;
    background-color: #3a3d46;
}

.title {
    width: 200px;
    font-size: 28px;
    text-align: center;
    color: #ffffff;
}

.wifi-btn {
    width: 38px;
    height: 38px;
    margin-left: 150px;

}

.change-page {
    width: 38px;
    height: 38px;
    margin-left: 20px;
}
```
js代码（用于实现逻辑，比如点击事件逻辑的实现，数据刷新等等）

```
changePage(operation) {
        router.replace({
            uri:"pages/dm/dm"
        });
    }
```

#### 中间进度条部分开发


```
    <stack class="body">
        <div class="disc-wrapper">
            <text class="text-concentration">{{ currentValue }}ppm</text>
            <text class="test-dis">燃气浓度</text>
        </div>
        <progress class="progress" type="arc"  percent="{{ progressPercent }}"></progress>
    </stack>
```

#### 底部设置报警阀值部分

```
   <div class="bottom-card">
        <div class="text-body">
            <text class="test-dis">报警阀值</text>
            <text class="test-progress">{{ PresetValue }}ppm</text>
        </div>
        <image class="progress-btn" on:click="reduceProgress" src="common/icon_jian_sel.png"></image>
        <progress class="bottom-progress" type="horizontal" class="min-progress" percent="{{ setProgress }}"></progress>
        <image class="progress-btn" on:click="addProgress" src="common/icon_jia_sel.png"></image>
    </div>

```

## 参考资料
- [燃气告警器应用源代码](../../FA/SmartSafeKitchenSmartGasDetection/README.md)
- [基于JS扩展的类Web开发范式](https://gitee.com/openharmony/docs/blob/OpenHarmony-3.1-Release/zh-cn/application-dev/reference/arkui-js/Readme-CN.md#/)
- [知识体系](https://gitee.com/openharmony-sig/knowledge)