# Project_COVID_19

**Repository Path**: chinasoft6_ohos/project_-covid_19

## Basic Information

- **Project Name**: Project_COVID_19
- **Description**: 简单出行防疫查询
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-26
- **Last Updated**: 2021-09-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#	简单的出行防疫查询



## 前言
	从2019年底到现在2021年，新冠疫情还未被终结，而且国外现在都还未完全控制住。庆幸的是当时咱们国家不惜一切代价进行防控治理，广大群众都积极响应，由多地高风险将至低风险，再到现在人人打疫苗。
	虽然现在控制的很好，但是我们仍然不能松懈。最近看聚合数据可以查询各个城市的防疫政策，由此做个简单的防疫查询。本项目是由鸿蒙js实现，页面样式渣，有需要的可以自己美观下样式，下面开讲



## 项目介绍


前提说明：基于鸿蒙API 6及以上，创建项目是默认API是5，注意一下
先上项目图

![1](gif/1.png)
     
java包下存放java文件
js包下存放js文件
创建js项目都会生成js需要依存到AceAbility上，以便展示到模拟器以及真机

js包下有：
app.js文件用于全局JavaScript逻辑和应用生命周期管理。
pages目录用于存放所有组件页面。
common目录用于存放公共资源文件，比如：媒体资源，自定义组件和JS文件。
resources目录用于存放资源配置文件，比如：多分辨率加载等配置文件。
i18n目录用于配置不同语言场景资源内容，比如应用文本词条，图片路径等资源。
官网这里有详细介绍：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-framework-file-0000000000611396


config.json是配置文件
主要看下这块：pages内第一个用来展示首页


```
"js": [
  {
    "pages": [
      "pages/index/index"
    ],
    "name": "default",
    "window": {
      "designWidth": 720,
      "autoDesignWidth": true
    }
  }
]
```
下面看下pages：
首页index包含3个文件hml、js、css，分别是页面、数据处理以及样式

hml文件中包含两部分：标题和内容，内容中使用了tab切换
index.hml
```js
<element name="travel" src="../../common/travel/travel.hml"></element>
~~~
<div class="container" >

​```js
<div class="title" >
    <text class="title-style" >{{title}}</text>
</div>

<div class="content" >
    <div>
        <marquee class="marquee">{{tips}}</marquee>
    </div>

    <tabs class="tabs" index="0" vertical="false" onchange="change" >
        <tab-bar class="tab-bar" mode="fixed">
            <text class="tab-text">出行防疫查询</text>
            <text class="tab-text">核酸检测机构查询</text>
        </tab-bar>
        <tab-content class="tab-content" scrollable="true" >
            <div class="item-travel" >
                <travel city-bean="{{cityBean}}" ></travel>
            <!--                    <text>出行防疫查询</text>-->
            </div>
            <div class="item-check" >
                <text>核酸检测机构查询</text>
            </div>

        </tab-content>
    </tabs>

</div>
```

</div>
    


```

js中是对所有数据的初始化以及后续的处理，事件的处理，添加不同功能的方法，暂不贴代码，最后有下载地址
css中是对各个组件的样式进行调节。

travel也是与index目录结构一致，里面用到了picker组件,其中oncancel是返回处理，show是显示隐藏，
type是类型，columns是展示的列数，range是数据展示，onchange是选择的监听，oncolumnchange是列数选择的监听
travel.hml
```js
<picker class="dialog" id="selectDialog" oncancel="cancelDialog" show是显示隐藏，
="false"  type="multi-text" columns="2" range="{{cityBeans}}"
            onchange="onchange('1')" oncolumnchange="oncolumnchange('1',0)" >
    </picker>
```

travel.js
```js
import http from '@ohos.net.http';
import prompt from '@system.prompt';
import citys from '../cityId.js';

//列数选择监听
oncolumnchange(index,column,data) {
    if (index == 1) {
        this.selectProvince = data.newSelected;
        console.error('TAG---列变化'+JSON.stringify(data));
        if (data.column == 0) {
            this.setFromCity(data.newValue);
        }
    }else if (index == 2) {
        this.selectProvince2 = data.newSelected;
        if (data.column == 0) {
            this.setToCity(data.newValue);
        }
    }
},

//数据请求
queryData(fromId, toId) {
    this.url = `http://apis.juhe.cn/springTravel/query?key=${this.form.key1}&from=${fromId}&to=${toId}`;
    let httpRequest = http.createHttp();
    httpRequest.request(this.url, {
        method: 'GET',
    }, (err, data) => {
        if (err == null) {

            this.queryResult = JSON.parse(data.result);
            console.log('TAG---' + this.queryResult);
            this.fromOutDesc = this.queryResult.result.from_info.out_desc;
            this.fromHighInDesc = this.queryResult.result.from_info.high_in_desc;
            this.toOutDesc = this.queryResult.result.to_info.out_desc;
            this.toHighInDesc = this.queryResult.result.to_info.high_in_desc;
            this.contentShow = true;

        } else {
            console.error('TAG---error' + JSON.stringify(err));
            prompt.showToast({
                message: '请求失败，请稍后再试！'
            })
        }
    });
},

```


  ## 注意：
    1.引用外部文件以及系统组件时格式要注意
    2.使用监听方法时，系统返回的参数在最后，自定义参数在前面。
    3.使用数据请求时，返回结果需要JSON.parse()转换一下
    4.网络请求时，在config中添加INTERNET权限，默认支持https，需要支持http时，在deviceConfig中设置"cleartextTraffic": true

   效果如下
  ![gif](gif/gif.gif)