鸿蒙HarmonyOS使用JS开发一个简单的股票DEMO
前段时间体验了下鸿蒙(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: ''
}
});
运行效果
兄弟我们想一快去了哈哈,看我这个 https://harmonyos.51cto.com/answer/1404
66666666
大佬,能看一下股票走势图是如何实现的吗?
创意不错,会方便很多投资者