鸿蒙系统开发 8个月前

有用的网站

鸿蒙官网：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 是面向全场景多设备，提供一站式的分布式应用开发平台
• 下载地址：
  • https://developer.harmonyos.com/cn/develop/deveco-studio#download
• 安装
  • 确保有网络环境

安装模拟器

• 安装菜单
  • Tools -> Device Manager
• 注册华为开发者
  • 注册账号
    • 注册地址：https://developer.huawei.com/
  • 实名认证
    • 银行卡认证（3分钟）
    • 身份证认证（1-2个工作日）

汉化菜单

• 点选菜单 File -> Settings，
• 然后点选 Plugins -> Marketplate，
• 然后搜索 Chinese，
• 然后选择 Chinese（Simplified）Language Pack / 中文语言包。
• 然后点击 install 执行安装
• 安装完成后重启 IDE

JS UI 框架

目录结构

• 文件组织
  • https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-framework-file-0000000000611396
• 资源文件的分类
  • https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-resource-file-categories-0000001052066099
• 资源文件的使用
  • https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-resource-file-example-0000001051733014

配置文件（config.json）

• 简介
  • https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-config-file-overview-0000000000011951
• 常用配置
  • https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-config-file-elements-0000000000034463
• 配置文件示例
  • https://developer.harmonyos.com/cn/docs/documentation/doc-guides/basic-config-file-example-0000000000034466

生命周期

应用生命周期

• onCreate：应用启动时调用
• onDestroy：应用销毁时调用

⻚面生命周期

• https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-framework-lifecycle-0000001113708038

路由与导航

声明路由

在 config.json 中声明路由

copy
{
  // ...
  "module": {
    "js": [
      {
        "pages": [
          "pages/index/index",
          "pages/news/news",
          "pages/profile/index",
        ],
        "name": "default",
        "window": {
          "designWidth": 720,
          "autoDesignWidth": true
        }
      }
    ]
  }
}

在 pages 目录下声明对应的三个文件

声明导航

引入 router

copy
import router from '@system.router';

声明导航方法

copy
export default {
    // ...

    launch: function(){
        router.push({
            uri:'pages/details/details',
        });
    }
}

JS语法

JS应用

$def

• 在⻚面中，通过 this. a p p . app. app.def，获取在 app.js 中暴露的对象

数据绑定

• data | public：类型是对象或者函数
• private：数据只能由当前⻚面修改

数据修改

• this.$set(‘key’, value);
• this.$delete(‘key’);

获取 DOM 元素

• $refs

  
  copy
  // index.hml
  
  

  内容