鸿蒙系统开发
小天
• 阅读
384
有用的网站
鸿蒙官网:https://www.harmonyos.com/
鸿蒙系统开发者:https://developer.harmonyos.com/
华为开发者:https://developer.huawei.com/
在线体验:https://playground.harmonyos.com/
Gitee:https://gitee.com/openharmony
JS API:<https://developer.harmonyos.com/cn/docs/documentation/doc-
references/js-apis-overview-0000001056361791>
开发环境搭建 (DevEco Studio)
- DevEco Studio 是面向全场景多设备,提供一站式的分布式应用开发平台
- 下载地址:
- 安装
安装模拟器
- 安装菜单
- 注册华为开发者
- 注册账号
- 实名认证
- 银行卡认证(3分钟)
- 身份证认证(1-2个工作日)
模拟器(Simulator)与预览器(Previewer)的区别:
- 预览器支持热更新,模拟器不支持热更新
2.预览器中不能直接返回接口数据,模拟器可以返回接口数据
汉化菜单
- 点选菜单 File -> Settings,
- 然后点选 Plugins -> Marketplate,
- 然后搜索 Chinese,
- 然后选择 Chinese(Simplified)Language Pack / 中文语言包。
- 然后点击 install 执行安装
- 安装完成后重启 IDE
JS UI 框架
详情查看:https://developer.harmonyos.com/cn/documentation
目录结构
配置文件(config.json)
生命周期
应用生命周期
- onCreate:应用启动时调用
- onDestroy:应用销毁时调用
⻚面生命周期
路由与导航
详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc-
references/js-apis-basic-features-routes-0000000000611824>
声明路由
在 config.json 中声明路由
{
// ...
"module": {
"js": [
{
"pages": [
"pages/index/index",
"pages/news/news",
"pages/profile/index",
],
"name": "default",
"window": {
"designWidth": 720,
"autoDesignWidth": true
}
}
]
}
}
在 pages 目录下声明对应的三个文件
声明导航
引入 router
import router from '@system.router';
声明导航方法
export default {
// ...
launch: function(){
router.push({
uri:'pages/details/details',
});
}
}
JS语法
详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc-
references/js-framework-syntax-js-0000000000611432>
支持 ES 6 语法(但不支持最新的 ES 语法)
鸿蒙 JS 是参考 Vue 2 封装的
JS应用
$def
- 在⻚面中,通过 this. a p p . app. app.def,获取在 app.js 中暴露的对象
数据绑定
- data | public:类型是对象或者函数
- private:数据只能由当前⻚面修改
数据修改
- this.$set(‘key’, value);
- this.$delete(‘key’);
获取 DOM 元素
// index.js
const t = this.$refs.target; // 获取 ref 属性为 target 的 DOM 元素
// index.js
const t = this.$element("target"); // 获取 id 属性为 target 的 DOM 元素
// 获取根组件对象
const t = this.$element();
JS架构
JS UI 框架
JS 应用开发框架
JS 原生模块(NAPI)
HML语法
详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc-
references/js-framework-syntax-hml-0000000000611413>
CSS语法
详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc-
references/js-framework-syntax-css-0000000000611425>
多语言支持
详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc-
references/js-framework-multiple-languages-0000000000625923>
组件
![在这里插入图片描述](https://img-
blog.csdnimg.cn/055cfde368e74102ba8239d0beafad90.png?x-oss-
process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAY2hyaXN0aWFuLWRvbmc=,size_20,color_FFFFFF,t_70,g_se,x_16)
基础组件
button
提供按钮组件,包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。
详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc-
references/js-components-basic-button-0000000000621726>
容器组件
div
详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc-
references/js-service-widget-container-div-0000001106548606>
通用组件
详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc-
references/js-service-widget-common-attributes-0000001161259599>
自定义组件
详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc-
references/js-service-widget-custom-basic-usage-0000001115938360>
基本用法
自定义组件通过element引入到宿主⻚面
<element name='comp' src='../../common/component/comp.hml'></element>
<div>
<comp prop1='xxxx'@child1="bindParentVmMethod"></comp>
</div>
插槽
匿名插槽
父组件:内容
子组件:
具名插槽
父组件:内容
子组件:
基本功能
详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc-
references/js-apis-basic-features-app-context-0000000000611801>
网络功能
详情查看:<https://developer.harmonyos.com/cn/docs/documentation/doc-
references/js-apis-network-data-request-0000000000626077>
![在这里插入图片描述](https://img-
blog.csdnimg.cn/4c99d7d7fea647b8ac8aad9df0f630e6.png?x-oss-
process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAY2hyaXN0aWFuLWRvbmc=,size_12,color_FFFFFF,t_70,g_se,x_16)
![在这里插入图片描述](https://img-
blog.csdnimg.cn/96e2f6afb7bf4d408336f0a2321c7abc.png?x-oss-
process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAY2hyaXN0aWFuLWRvbmc=,size_20,color_FFFFFF,t_70,g_se,x_16)
系统功能
通知消息
地理位置
网络状态
设备信息
屏幕亮度
数据存储
官方Demo
鸿蒙提供的一些具体应用实例。有代码,有文字介绍,有效果演示
详情查看:https://developer.harmonyos.com/cn/documentation/codelabs/
JS 购物应用
详情查看:<https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/JS-
COMPONENTS>
JS 计步器卡片
详情查看:<https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/Step-
Card>
分布式新闻分享
详情查看:<https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS-
NewsClient>
分布式亲自教育
详情查看:<https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS-
EducationSystem>