前段时间体验了下鸿蒙(HarmonyOS) 2.0开发，感觉跟android开发流程很相似，在项目新建界面可以选择JAVA或者JS，今天我们尝试使用JS来开发一个简单的网络信息查询DEMO。

创建Feature Ability JS工程

我们打开下载好的DevEco Studio，点击Create HarmonyOS
Project新建项目，在打开的新建项目界面我们可以看到设备项 支持TV、穿戴设备。项目模板可选项有：Empty Feature
Ability(JS)、Empty Feature Ability(Java)、List Feature
Ability(JS)，我们选择随便选择JS一个模板，点击完成后我们可以看到工程目录如下所示：

.hml结尾的HML模板文件，用来描述当前页面的文件布局结构.css结尾的CSS样式文件，用于描述页面样式.js结尾的JS文件，用于处理页面和用户的交互app.js文件用于全局JavaScript逻辑和应用生命周期管理。pages目录用于存放所有组件页面。common目录用于存放公共资源文件，比如：媒体资源和JS文件。i18n目录用于配置不同语言场景资源内容，比如应用文本词条，图片路径等资源。

Feature Ability JS页面布局

布局页面由组件描述（.hml）、css样式(.css)和JavaScript脚本(.js)三部分组成。组件分为2大类：容器组件、基础组件。容器组件包括div、list、list-item、stack、swiper；基础组件image、image-animator、progress、text、marquee、chart、input、slider、switch、picker-view。另外JavaScript脚本语法支持ES6，对前端的小伙伴来说应该很容易上手。我们股票查询示例demo最终运行效果如下：

Feature Ability JS页面交互

网络请求

我们知道在js中可以用fetc请求网络数据，在鸿蒙HarmonyOS JS开发中进行网络请求需要进行以下设置
1. 导入模块import fetch from '@system.fetch';
2.申请网络访问权限，在config.json中定义

"reqPermissions": [{"name": "ohos.permission.INTERNET",
"reason": "request network"
}]

3.启用http支持，接口访问默认是https，如果需要支持http则需要在config.json里增加network标签属性cleartextTraffic

"deviceConfig": {
"default": {
"network": {"cleartextTraffic": true}
}

4.网络请求fetch

fetch.fetch({
    url: url,
    //responseType: '',
    success: function(response) {
        console.info('response code:' + response.code);
        console.info('response data:' + response.data);
    },
    fail: function(data, code) {
        that.currentPrice = data
        console.info('fail callback');
    },
});

页面跳转：

使用路由system.router实现页面跳转

import router from '@system.router';
router.replace({
    uri: 'pages/index/detail',
    params: {
       //在详情页可以通过this.storeCode 得到传递过去的股票代码
      storeCode: ''  
 }
});

运行效果