前端（HarmonyOS）第2周学习笔记总结

（1）JS UI框架概述

1. JS UI 框架基础能力

• 声明式编程

  JS UI 框架采用类 HTML 和 CSS 声明式编程语言作为页面布局和页面样式的开发语言，页面业务逻辑则支持ECMAScript 规范的 JavaScript 语言。JS UI 框架提供的声明式编程，可以让开发者避免编写 UI 状态切换的代码，视图配置信息更加直观。

• 跨设备

  开发框架架构上支持UI跨设备显示能力，运行时自动映射到不同设备类型，开发者无感知，降低开发者多设备适配成本。

• 高性能

  开发框架包含了许多核心的控件，如列表、图片和各类容器组件等，针对声明式语法进行了渲染流程的优化。

1. JS UI 框架整体架构

• 应用层 Application

  应用层表示开发者使用JS UI框架开发的FA应用，这里的FA应用特指JS FA应用。

• 前端框架层 Framework

  前端框架层主要完成前端页面解析，以及提供MVVM（Model-View-ViewModel）开发模式、页面路由机制和自定义组件等能力。

• 引擎层 Engine

  引擎层主要提供动画解析、DOM（Document Object Model）树构建、布局计算、渲染命令构建与绘制、事件管理等能力。

• 平台适配层 Porting Layer

  适配层主要完成对平台层进行抽象，提供抽象接口，可以对接到系统平台。比如：事件对接、渲染管线对接和系统生命周期对接等。

（2）前端框架层 Framework API 服务概述

1. 基本功能

   应用上下文、日志打印、页面路由、弹窗、应用配置、定时器

2. 网络访问

   上传下载、数据请求

3. 文件数据

   数据存储、文件存储

4. 分布式能力

   分布式拉起、分布式迁移、分布式API在FA生命周期中的位置

5. 系统能力

   通知消息、振动、传感器、地理位置、网络状态、设备信息、屏幕亮度、电量信息、应用管理、媒体查询、国际化

（3）使用 API 数据存储能力实现应用刷新后状态保存

import storage from '@system.storage';export default {    data: {    // 待办事件列表 todoList    },    onInit() { storage.get({     key: 'todo',     success: data => {  console.log('获取Storage成功' + data);  //this.todoList = JSON.parse(data)     } });    },    setStorage() { storage.set({     key: 'todoList',     value: JSON.stringify(this.todoList) });    },    remove(index) { this.todoList.splice(index, 1); this.setStorage();    },    addTodo() { this.todoList.push({     info: '键盘输入',     status: false }) this.setStorage();    },    checkStatus(index) { this.todoList[index].status = !this.todoList[index].status; this.setStorage();    }}

 

（1）fetch API 接口使用简介

1. 导入鸿蒙系统 API 接口模块

import fetch from '@system.fetch';

1. 配置网络访问允许的权限列表

   ohos.permission.INTERNET

2. 使用 fetch.fetch(OBJECT)获取网络数据

参数名	类型	必填	说明
url	string	是	资源地址。
data	string | Object	否	请求的参数，可选类型是字符串或者json对象。
header	Object	否	设置请求的header。
method	string	否	请求方法默认为GET，可选值为：OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE。
responseType	string	否	默认会根据服务器返回header中的Content-Type确定返回类型，支持文本和json格式。详见success返回值。
success	Function	否	接口调用成功的回调函数。
fail	Function	否	接口调用失败的回调函数。
complete	Function	否	接口调用结束的回调函数。

（2）config.json 文件详解

1. 应用的每个 HAP 的根目录下都存在一个「config.json」配置文件，config.json 由app、deviceConfig和module三个部分组成，缺一不可。文件内容主要涵盖以下三个方面：

属性名称	含义	数据类型	是否可缺省
app	表示应用的全局配置信息。同一个应用的不同HAP包的“app”配置必须保持一致。	对象	否
deviceConfig	表示应用在具体设备上的配置信息。	对象	否
module	表示HAP包的配置信息。该标签下的配置只对当前HAP包生效。	对象	否

1. 配置文件「config.json」采用 JSON 文件格式，其中包含了一系列配置项，每个配置项由属性和值两部分构成：

• 属性，属性出现顺序不分先后，且每个属性最多只允许出现一次。

• 值，每个属性的值为JSON的基本数据类型（数值、字符串、布尔值、数组、对象或者null类型）。

1. DevEco Studio 提供了两种编辑 config.json 文件的方式，在 config.json 的编辑窗口中，可在右上角切换代码编辑视图或可视化编辑视图。

（3）使用 fetch API 请求天气数据

1. 准备天气查询地址：

   https://api.seniverse.com/v3/weather/now.json?key=WNEUXAAE2G&location=南京&language=zh-Hans&unit=c

2. 配置网络访问允许的权限列表

1. 配置设备允许网络配置

 "deviceConfig": {    "default": { "process": "com.huawei.hiworld.example",  "supportBackup": false, "network": {     "cleartextTraffic": true,      "securityConfig": {  "domainSettings": {      "cleartextPermitted": true,"domains": [   {"subDomains": true, "name": "api.seniverse.com"   }      ]  }     } }    }}

1. 在 oninit 生命周期中发出请求

//导入鸿蒙的网络请求模块fetchimport  fetch from  '@system.fetch';export default {    data: { winfo:""    },    onInit() { //发起对心知天气服务器的网络请求 fetch.fetch({     url:`https://api.seniverse.com/v3/weather/now.json?  key=WNEUXAAE2G&location=南京&language=zh-Hans&unit=c`,     responseType:"json",     success:(resp)=>     {  //JSON.parse(字符串)转换成json数据格式  this.winfo=JSON.parse(resp.data);    console.log(this.winfo)     } });    }}

1. 在页面中渲染数据请求结果。

JS UI框架支持自定义组件，用户可根据业务需求将已有的组件进行扩展，增加自定义的私有属性和事件，封装成新的组件，方便在工程中多次调用，提高页面布局代码的可读性。

1. 定义一个专门存放自定义组件的文件夹 components.tabbar 并设置3个基础文件 tabbar.hml、tabbar.js、tabbar.css，需要注意的是：3个文件的文件名必须保持一致，不然会存在找不到文件的情况。该自定义组件的目的是给页面底部配置一个 tabbar 选项卡体验。
2. 设置底部选项卡对应的 json 数据源，用来保存 icon 图片、标题，以及点击选中后的 icon 图片。

// common.datas.tabbarItem.jsexport default [    { img:'common/images/home.png', simg:'common/images/home_s.png', name:'首页'    },    { img:'common/images/hot.png', simg:'common/images/hot_s.png', name:'热点'    },    { img:'common/images/us.png', simg:'common/images/us_s.png', name:'社区'    },    { img:'common/images/me.png', simg:'common/images/me_s.png', name:'我'    }]

1. 使用 toolbar + toolbar-item 内置组件构建底部 tabbar 选项卡服务「tabbar.hml」

1. 导入 tabbarItem 数据，并设置对应 data ，同时设置点击事件 动态设置点击对应 icon 选中。

import tabbarItems from '../../common/datas/tabbarItem.js';export default {    data:{ tabbarItems    },    jump(index){ this.tabbarItems.forEach((item,index) => {     item.img = tabbarItems[index].img; }); this.tabbarItems[index].img = this.tabbarItems[index].simg;    }}

1. 设置 CSS 样式 将 tabbar 选项卡置底「tabbar.css」

.tabbar {    position: fixed;    left: 0;    bottom: 0;}

（2）自定义组件调用

自定义组件是用户根据业务需求，将已有的组件组合，封装成的新组件，可以在工程中多次调用，提高代码的可读性。

自定义组件通过element引入到宿主页面，使用方法：

     首页        

1. name 属性指自定义组件名称(非必填)，组件名称对大小写不敏感，默认使用小写，src 属性指自定义组件hml 文件路径(必填)，若没有设置 name 属性，则默认使用 hml 文件名作为组件名。

2. 事件绑定：自定义组件中绑定子组件事件使用 (on|@)child1 语法，子组件中通过 this.$emit('child1', { params: '传递参数' }) 触发事件并进行传值，父组件执行 bindParentVmMethod 方法并接收子组件传递的参数。

1. 在 Pages 文件夹下面新建一个文件夹代表需要的路由，当然，我们也可以新建一个 Ablity 体验，这里演示 Pages.Name。

2. 在 新建的文件夹下面务必需要注意新建三个文件 index.hml、index.js、index.css 三个文件，该文件名必须使用 index 来进行命名，使用其他命名会造成文件依赖无法找到。

   快捷方式，可以选择到对应的 Ability Pages 文件夹下面，然后 new page 直接添加页面，并会自动注册好路由，这是比较方便的

3. 在 config.json 文件中

"js": [      { "pages": [   "pages/index/index" ], "name": "default", "window": {   "designWidth": 720,   "autoDesignWidth": true }      }]

（2）路由的使用

1. 导入路由模块

import router from '@system.router';

1. router.push(OBJECT)，跳转到应用内的指定页面。
2. router.replace(OBJECT)，用应用内的某个页面替换当前页面，并销毁被替换的页面。
3. router.back(OBJECT)，返回上一页面或指定的页面。

// index页面，uri字段是页面路由，由配置文件中的pages列表指定。router.push({  uri: 'pages/detail/detail',});// detail页面router.push({  uri: 'pages/mall/mall',});// mall页面通过back，将返回detail页面router.back();// detail页面通过back，将返回index页面router.back();// 通过back，返回到detail页面router.back({uri:'pages/detail/detail'});

1. router.clear()，清空页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。
2. router.getLength()，获取当前在页面栈内的页面数量。
3. router.getState()，获取当前页面的状态信息。

PS：页面路由需要在页面渲染完成之后才能调用，在onInit和onReady生命周期中页面还处于渲染阶段，禁止调用页面路由方法。

51mike麦克疯