knowledge_demo_smart_home/docs/MiniSystemApplicationDevelopment_02_GasDetectionUI

轻量系统应用开发之JSI

样例简介

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

运行效果

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

快速上手

准备软件环境

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

创建一个HelloWorld工程

燃气告警首页UI开发

页面布局分析

顶部标题栏开发

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>

参考资料

• 燃气告警器应用源代码
• 基于JS扩展的类Web开发范式
• 知识体系