首页 » 软件开发 » 鸿蒙HarmonyOS使用JS开发一个简单的股票DEMO(鸿蒙页面开发组件文件)

鸿蒙HarmonyOS使用JS开发一个简单的股票DEMO(鸿蒙页面开发组件文件)

南宫静远 2024-07-24 06:27:57 0

扫一扫用手机浏览

文章目录 [+]

HarmonyOS 2.0

创建Feature Ability JS工程

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

HarmonyOS JS工程目录结构

鸿蒙HarmonyOS使用JS开发一个简单的股票DEMO(鸿蒙页面开发组件文件) 软件开发
(图片来自网络侵删)

.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: ''}});运行效果

示例DEMO运行界面

示例DEMO详情界面

标签:

相关文章

语言中的借用,文化交融的桥梁

自古以来,人类社会的交流与发展离不开语言的传播。在漫长的历史长河中,各民族、各地区之间的文化相互碰撞、交融,产生了许多独特的语言现...

软件开发 2025-01-01 阅读1 评论0

机顶盒协议,守护数字生活的新卫士

随着科技的飞速发展,数字家庭逐渐走进千家万户。在这个时代,机顶盒成为了连接我们与丰富多彩的数字世界的重要桥梁。而机顶盒协议,作为保...

软件开发 2025-01-01 阅读1 评论0

语言基础在现代社会的重要性及方法步骤

语言是人类沟通的桥梁,是社会发展的基础。语言基础作为语言学习的基石,对于个人、社会乃至国家的发展具有重要意义。本文将从语言基础在现...

软件开发 2025-01-01 阅读2 评论0

粤语电影,传承文化,点亮时代之光

粤语电影,作为中国电影产业的一朵奇葩,以其独特的地域特色、丰富的文化内涵和鲜明的艺术风格,赢得了广大观众的喜爱。本文将从粤语电影的...

软件开发 2025-01-01 阅读3 评论0

苹果游戏语言,塑造未来娱乐体验的基石

随着科技的飞速发展,游戏产业逐渐成为全球娱乐市场的重要支柱。在我国,游戏产业更是蓬勃发展,吸引了无数玩家和投资者的目光。而在这其中...

软件开发 2025-01-01 阅读1 评论0