鸿蒙系统开发
有用的网站
鸿蒙官网：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 是面向全场景多设备，提供一站式的分布式应用开发平台
- 下载地址：
- 安装
- 确保有网络环境
安装模拟器
- 安装菜单
- Tools -> Device Manager
- 注册华为开发者
- 注册账号
- 实名认证
- 银行卡认证（3分钟）
- 身份证认证（1-2个工作日）
模拟器（Simulator）与预览器（Previewer）的区别：
- 预览器支持热更新，模拟器不支持热更新
2.预览器中不能直接返回接口数据，模拟器可以返回接口数据
汉化菜单
- 点选菜单 File -> Settings，
- 然后点选 Plugins -> Marketplate，
- 然后搜索 Chinese，
- 然后选择 Chinese（Simplified）Language Pack / 中文语言包。
- 然后点击 install 执行安装
- 安装完成后重启 IDE
JS UI 框架
目录结构
- 文件组织
- 资源文件的分类
- 资源文件的使用
配置文件（config.json）
- 简介
- 常用配置
- 配置文件示例
生命周期
应用生命周期
- onCreate：应用启动时调用
- onDestroy：应用销毁时调用
⻚面生命周期
路由与导航
声明路由
在 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 元素
-
$refs
// index.hml <text ref="target">内容</div> // index.js const t = this.$refs.target; // 获取 ref 属性为 target 的 DOM 元素 -
$element
// index.hml <text id="target">内容</div> // index.js const t = this.$element("target"); // 获取 id 属性为 target 的 DOM 元素 // 获取根组件对象 const t = this.$element();
JS架构
JS UI 框架
- 类 Web 范式编程的 UI 界面展示
- https://gitee.com/openharmony/ace_ace_engine
JS 应用开发框架
- 轻量级的 MVVM 实现（仿 Vue 2）
- https://gitee.com/openharmony/ace_engine_lite
JS 原生模块（NAPI）
- 实现 JS 与 C/C++ 代码互相访问
- https://gitee.com/openharmony/ace_napi
HML语法
CSS语法
多语言支持
- i18n 目录下存放语言包
语言-地区.json（zh-CN.json） - $t() 获取对应的内容
- 切换系统语言时（模拟器或真机中），可以看到效果
组件
基础组件
button
提供按钮组件，包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。
容器组件
div
通用组件
自定义组件
基本用法
自定义组件通过element引入到宿主⻚面
<element name='comp' src='../../common/component/comp.hml'></element>
<div>
<comp prop1='xxxx'@child1="bindParentVmMethod"></comp>
</div>
插槽
匿名插槽
父组件：<tag><text>内容</text></tag>
子组件：<slot></slot>
具名插槽
父组件：<tag><text slot=“slotname”>内容</text></tag>
子组件：<slot name=“slotname”></slot>
基本功能
网络功能
系统功能
通知消息
地理位置
网络状态
设备信息
屏幕亮度
数据存储
官方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
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：licqi@yunshuaiweb.com
![[Linux打怪升级之路]-进程的状态](https://licqi.oss-cn-shanghai.aliyuncs.com/uploads/allimg/20221128/-22112Q35I03c.jpg)