【HarmonyOS4.0】第三篇-类web开发模式

news2024/11/15 7:29:42

【HarmonyOS4.0】第三篇-类web开发模式

一、鸿蒙介绍

课程核心

为什么我们需要学习鸿蒙？
哪些人适合直接转鸿蒙？
鸿蒙系统优势是什么？

课程内容

(1)为什么要学习鸿蒙

从行情出发：

美国商务部长访问中国，2023年8月28日。焦点自然是芯片限制。

2023年8月29号，华为悄然发布了mete60（搭载了自研的麒麟9000s芯片），没有发布会，没有提前暴露任何信息，连销售门店都不知道有新产品发布。当华为Mate60突袭上市时，人们不禁想问，这一系列的巧合和时机，是偶然的吗？华为在芯片限制下究竟承受了多大的压力。

华为Mate60系列上市第八周，国内销量就达到240万台。

2023年11月28日。鸿蒙智行首款轿车智界S7发布，首款搭载Harmony OS4的智能座驾。问界新M7后驱智驾版

华为MatePad Pro 11英寸 2024款、华为MateBook D 16 2024等多款全场景新品

华为全屋智能5.0，新推出智能开关蒙德里安、智能MINI Pro、天空之声音乐灯、万能智点等重磅产品及创新升级。

华为生态不是说着玩儿。在产品如此丰富、数量如此多的前提下，互联网那家公司不拥抱华为。

从趋势出发：

Harmony OS Next蓄势待发

完全去掉兼容安卓的aosp代码，开起了全新的鸿蒙生态应用。

这一步一旦跨出就没有回头路。华为只有构建自己的鸿蒙生态才是唯一的出路。

image-20231130195853832

目前华为官方开放了Harmony OS Next 企业开发者权限。

2024年Q1将面对所有开发者。

你觉得鸿蒙还是套壳的android吗？

据统计，全球搭建Harmony OS系统的设备高达7亿多台。

互联网的发展还没有增量，这个我不好评估。但是软件开发的存量那是无限大。

新的风口、时代产物。看谁先入局。

(2)哪些人适合直接转鸿蒙？

如果你是前端工程师，转鸿蒙非常的平滑。

鸿蒙提供了两种开发模式。

  1. 基于stage模型的ArkTS开发模式。
  2. 基于前端三件套的类web应用

换句话说，如果你擅长ts做项目开发，你可以无缝对接鸿蒙开发

如果你不会ts，你会html、css、js开发你也可以实现web模式来开发鸿蒙。

当然如果你有其他变成语言的基础，你依然可以入局，比如java、python、c、c++等等

区别：

FA模型，自鸿蒙系统早期版本就有的模型，适合简单应用。

Stage模型是为了解决FA模型无法解决的开发场景问题，方便开发者更加方便地开发出分布式环境下的复杂应用。自 API9 新增的模型。是日后长期演进的模型

提供类Web的API，UI开发与Stage模型一致。提供面向对象的开发方式，UI开发与FA模型一致。Stage模型
引擎实例每个进程内的每个Ability实例独享一个JS VM引擎实例。每个进程内的多个Ability实例共享一个JS VM引擎实例。
进程内对象共享不支持。支持。
包描述文件使用config.json描述HAP包和组件信息，组件必须使用固定的文件名。使用module.json5描述HAP包和组件信息，可以指定入口文件名。
组件提供PageAbility(页面展示)，ServiceAbility(服务)，DataAbility(数据分享)以及FormAbility(卡片)。提供Ability(页面展示)、Extension(基于场景的服务扩展)。
(3)鸿蒙系统优势是什么？

从性能出发：

系统的难题：传统手机系统摒弃不了一个问题，系统运行的时间越长，数据越多，代码越复杂，大量的性能会被用来处理非正常工作，于是系统就会变卡顿，在代码的世界里即“混沌”状态。

华为团队从系统底层切入动刀，解决了碎片化文件影响的系统卡顿问题，保障系统流畅度。

华为方舟引擎，在原本的优秀架构上，持续进行全栈优化，通过软硬芯云整合架构创新，致力于解决性能功耗等基础体验问题，为用户带来流畅顺滑的体验。

颠覆了手机操作逻辑

以前的手机就是一个手机，在鸿蒙的世界中，任何一个设备都可以做为一个超级智能终端。

鸿蒙系统的本质使然，它跨越了不同形态和不同场景的设备，大家能在同一种操作语言下进行交互和沟通。这便让鸿蒙有了天然的优势：无障碍流转。

设备有壁垒，鸿蒙无边界。手机、平板、笔记本、车机，以及智能家居设备，均可透过 HarmonyOS 4 组成生态系统

系统安全

HarmonyOS 4 将隐私安全放在了第一位。伪链接、软件乱弹窗、诱导下载、仿冒应用、窃取个人隐私等等行为层出不穷，HarmonyOS 4通过应用风险行为管控、应用防跟踪，保障用户的安全使用。

如何提高鸿蒙学习效率

二、鸿蒙环境搭建

课程核心

(1)初学者从那里获取学习资料？
(2)开发者文档如何查看？
(3)鸿蒙开发环境到底需要了解哪些内容？
(4)如何搭建自己开发环境？

课程内容

(1)初学者从那里获取学习资料？

任何一门新的技术、平台。如果要学习第一手资料都是官方文档

开发者官网：https://developer.harmonyos.com

image-20231130201822763

(2)开发者文档如何查看？

设计：针对设计师的文档，涵盖设计理念、设计指南、设计规范

开发：针对开发者的文档

image-20231130202230840

金字塔应用概述了鸿蒙开发的完整流程。

设计套件

Harmony Design：HarmonyOSDesign是面向万物互联的设计系统，件涵盖全面的全场景设计规范、丰富的
设计资源，以及设计工具，帮助开发者提升设计和开发效率

ArkTS：ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用

ArkUI:ArkUI是一套构建分布式应用界面的声明式UI开发框架。它使用极简的UI信息语法、丰富的UI组件、以及实时界面预览工具，帮助您提升HarmonyOS应用界面开发效率30%。您只需使用一套ArkTS API，就能在多个HarmonyOS设备上提供生动而流畅的用户界面体验

ArkCompiler：ArkCompiler是华为自研的统一编程平台，包含编译器、工具链、运行时等关键部件，支持高级语言在多种芯片平台的编译与运行，并支撑应用和服务运行在手机、个人电脑、平板、电视、汽车和智能穿戴等多种设备上的需求。

开发者套件

开发者在应用开发过程中使用到的产品集合，包含DevEcoStudio以及DevEcoStudio
集成的性能调优、设备模拟、命令行工具和SDK。

SDK：集成在DevEcoStudio中，包含开发者可以使用的API定义以及调试编译等基础
的工具链

image-20231201095331382

AppGallery Connect（简称AGC）致力于为应用的创意、开发、分发、运营、经营各环节提供一站式服务。

可以实现对项目部署上线运营等一些列操作。

(3)搭建环境

安装成功后一旦要检查一下自己的环境是否全部成功

image-20231201102532278

三、创建JS项目(了解)

课程核心

如何创建项目？

创建项目有几种模式？

课程内容

项目真实开发过程中，我们会选中用stage模型下面的arkts来进行开发。

但是fa模型的js项目大家还是需要了解一下。你可以不用，但是不能没有这个技能

创建项目

create project来创建一个项目。每一类项目都有说明支持哪些终端设备。

image-20231201102056192

Application：代表创建一个应用

Atomic service:原子化服务

项目区分

创建项目有两个选项：

Stage模型：在API9版本里面推出的一种开发模型，核心采用ArkTS来进行项目开发。

FA模型：有两种开发模式，基于ArkTS来开发项目，还有一种基于JS来开发项目

目前官方推荐我们使用Stage来创建项目。

基于JS构建应用

创建项目

image-20240104161519522

其中我们默认选择FA模型来创建项目。采用JS来构建我们项目

项目结构

image-20231201120109093

每一个页面都包含三个文件：

  1. hml：代表页面布局代码
  2. js：页面脚本交互代码
  3. css：页面样式代码

基础代码如下:

HTML代码

<div class="container">
    <text class="title">
        {{ $t('strings.hello') }} {{ title }}
    </text>
    <text>{{myIndex}}</text>
    <button onclick="changeIndex">点击切换</button>
</div>

CSS 代码如下：

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 60px;
    text-align: center;
    width: 100%;
    height: 40%;
    margin: 10px;
}

JS代码如下：

export default {
    data: {
        title: "",
        myIndex:1
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    changeIndex(){
        this.myIndex = 100
    }
}

如果你会vue开发，或者你用过原生小程序，那上手就会比较快。

核心的流程如下：使用兼容JS的类Web开发范式的方舟开发框架，包括应用层（Application）、前端框架层（Framework）、引擎层（Engine）和平台适配层（Porting Layer）。

0000000000011111111.20231121183927.34421608668035385351787817357386

  • Application

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

  • Framework

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

  • Engine

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

  • Porting Layer

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

组件内部数据

基于mvvm的思想来设计的框架，所以数据的动态交互和vue或者小程序是差不多的

hml代码：

<div class="container">
    <text class="title">
        {{ $t('strings.hello') }} {{ title }}
    </text>
    <text>{{myIndex}}</text>
    <button οnclick="changeIndex">{{$t('strings.changeword')}}</button>
</div>

js代码：

import router from '@ohos.router';
import hilog from '@ohos.hilog';

export default {
    data: {
        title: "",
        myIndex:1
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    changeIndex(){
        this.myIndex = 100
    }
}

其中用到了国际化的配置MainAbility/i18n下面

zh_CN.json

{
  "strings": {
    "hello": "您好",
    "world": "世界",
    "changeword": "点击切换"
  },
  "Files": {
  }
}

strings里面写的字段，可以通过$t()在页面上获取到，根据系统的语言来实现页面的切换

路由跳转

hml代码

 <button onclick="goto">点击跳转</button>

绑定事件有两种语法onclick或者@click的方式来设计

js代码

import router from '@ohos.router';
goto(){
  console.log(this.title)
  router.push({
    url:"pages/todolist/todolist"
  })
}

需要引入router这个模块。调用对应push来进行路由跳转

也可以调用router.back()实现返回功能

路由参数传递

页面一

goto(){
  console.log(this.title)
  router.push({
    url:"pages/todolist/todolist",
    params:{id:1}
  })
},

页面二

import router from '@ohos.router';
onInit() {
  this.title = "Hello World";
  console.log("router",JSON.stringify(router.getParams()))
},

在页面二里面我们可以用router.getParams()来获取路由传递过来的params

自定义组件

在MainAbility/common/components创建组件

header.hml

<div>
    <text>自定义组件 {{title}}</text>
    <button @click="changeParentData">修改父组件数据</button>
</div>

header.js

export default {
    props:{
        title:{
            default:""
        }
    },
    data: {
        msg:"测试"
    },
    changeParentData(){
        console.log("点击！")
        this.$emit('eventType1', {text: '收到子组件参数'});
    }
}

子组件接受父亲组件的数据还是用props来表示。

子组件传递参数给父组件，通过$emit来触发自定义事件

父组件中

<element name="header" src="../../common/components/header.hml"></element>
<div class="container">
    <button οnclick="goto">点击跳转</button>
    <header title="{{title}}" @event-type1="changeTitle"></header>
</div>

要引入组件我们采用element标签来引入。name属性就是引入组件的名字。

在指定的位置中进行使用<header>

其中自定义事件名字如果是多单词，需要采用连字符来表示 比如event-type1

子组件使用的时候，要采用驼峰命名来接受。比如$emit(“eventType1”)

四、ArkTS入门实战

参考鸿蒙实战（一）
下一节文档，详细讲解ArkTS实战

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1369496.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

众和策略：沪指跌0.91%险守2900点，半导体、金融等板块走低

众和策略：沪指跌0.91%险守2900点，半导体、金融等板块走低

8日早盘&#xff0c;两市股指低开低走&#xff0c;沪指一度失守2900点&#xff0c;深成指、创业板指跌约1%&#xff0c;科创50指数创前史新低。 到午间收盘&#xff0c;沪指跌0.91%报2902.4点&#xff0c;深成指跌1.17%&#xff0c;创业板指跌0.99%&#xff0c;科创50指数跌超…
阅读更多...
视频剪辑技巧：快速批量修改视频分辨率，高效剪辑修改尺寸的方法

视频剪辑技巧：快速批量修改视频分辨率，高效剪辑修改尺寸的方法

随着视频内容的普及&#xff0c;经常要处理大量的视频文件。在这个过程中&#xff0c;视频分辨率的修改是一个常见的需求。无论是适应不同的播放平台&#xff0c;还是满足特定的视觉要求&#xff0c;调整视频分辨率是必不可少的步骤。但逐个手动调整不仅效率低下&#xff0c;而…
阅读更多...
Python处理字符串-正则提取遇到的第一个完整括号内容处理后替换

Python处理字符串-正则提取遇到的第一个完整括号内容处理后替换

1.场景分析 该场景介绍如何用python语言&#xff0c;使用正则表达式处理字符串内第一个完整的括号内容&#xff0c;一个括号内可能会含有一个括号&#xff0c;多个括号自行扩展正则即可&#xff0c;处理完成后再替换到括号的内容 2.重难点 第一个括号内可能会还有另一个括号 …
阅读更多...
jmeter循环控制器

jmeter循环控制器

1.循环控制器 简单粗暴 写几次 循环几次 经常结合自定义变量使用 2.foreach控制器 搭配 变量一起使用的循环 一般变量的值是一个集合或者 是2个及2个以上的内容
阅读更多...
Python 使用input函数从键盘输入数据

Python 使用input函数从键盘输入数据

在Python中&#xff0c;input()函数可以从键盘获取用户的输入数据。当我们使用input()函数时&#xff0c;会暂停程序的执行&#xff0c;等待用户输入数据&#xff0c;并将用户输入的数据作为字符串返回。 如&#xff1a; name input("请输入你的姓名&#xff1a;"…
阅读更多...
尝试使用深度学习识别百度旋转验证码

尝试使用深度学习识别百度旋转验证码

最近研究了一下图像识别&#xff0c;一直找到很好的应用场景&#xff0c;今天我就发现可以用百度的旋转验证码来做一个实验。没想到效果还挺好&#xff0c;下面就是实际的识别效果。 1、效果演示 2、如何识别 2.1准备数据集 首先需要使用爬虫&#xff0c;对验证码图片进行采…
阅读更多...
数据结构（2023-2024）

数据结构（2023-2024）

一、判断题 1.队列是一种插入和删除操作分别在表的两端进行的线性表&#xff0c;是一种先进后出的结构。&#xff08;F&#xff09; 队列先进先出&#xff0c;在表的一端插入元素&#xff0c;在表的另一端删除元素。允许插入的一端称为队尾&#xff08;rear&#xff09;&#…
阅读更多...
基于 SpringBoot + vue 的医院管理系统（含源码，数据库，文档）

基于 SpringBoot + vue 的医院管理系统（含源码，数据库，文档）

基于 SpringBoot vue 的医院管理系统 †前后端分离思想&#xff0c;这个系统简直太棒了&#xff01;屯 光这个系统采用了 前后端分离思想&#xff0c;后端使用 SpringBoot和 SpringMVC框架&#xff0c;让代码更高效&#xff0c;更易于维护。前端则使用了 vue js 和ElementU…
阅读更多...
Unity 利用UGUI之Scrollbar制作进度条

Unity 利用UGUI之Scrollbar制作进度条

在Unity中除了用Slider、Image做进度条&#xff0c;其实用Scrollbar也可以做进度条。 首先&#xff0c;在场景中新建一个Scrollbar组件和一个Text组件&#xff1a; 其次&#xff0c;创建模拟进度的一个脚本&#xff0c;Scrollbar_Progressbar.cs: using System.Collections; …
阅读更多...
有些应用中不需要使用回原点指令

有些应用中不需要使用回原点指令

不是所有的轴运动控制&#xff0c;都一定要使用回原点指令来执行回原点 通过手动找到极限开关&#xff0c;然后往回走一段距离&#xff0c;也是一种方式&#xff0c;所谓的往回走的这段距离方便用于手动校准原点位置&#xff1b; 那使用原点指令回原点后&#xff0c;也可以走一…
阅读更多...
Python异步编程｜PySimpleGUI界面读取PDF转换Excel

Python异步编程｜PySimpleGUI界面读取PDF转换Excel

目录 实例要求 原始pdf文件格式 输出xls文件格式 运行界面 完整代码 代码分析 遍历表格 布局界面 控件简介 写入表格 表格排序 事件循环 异步编程 实例要求 使用PySimpleGUI做一个把单位考勤系统导出的pdf文件合并输出Excel的应用&#xff0c;故事出自&#xff1…
阅读更多...
Java web设计：在线微友圈网站

Java web设计：在线微友圈网站

项目背景 微友圈是一个基于Java Web开发的社交网络平台&#xff0c;旨在为用户提供一个轻松互动、分享生活和交流观点的在线社区。随着社交网络的普及&#xff0c;人们更加渴望与朋友、家人以及其他志同道合的人保持联系并分享彼此的生活点滴。微友圈的目标是打造一个简洁、高…
阅读更多...
nn网络层-卷积层

nn网络层-卷积层

一、1d/2d/3d Convolution 卷积运算&#xff1a;卷积核在输入信号&#xff08;图像&#xff09;上滑动&#xff0c;相应位置上进行乘加卷积核&#xff1a;又称为滤波器&#xff0c;过滤器&#xff0c;可认为是某种模式&#xff0c;某种特征。卷积过程类似于用一个模版去图像上…
阅读更多...
OpenAI ChatGPT-4开发笔记2024-01：开发环境

OpenAI ChatGPT-4开发笔记2024-01：开发环境

ChatGPT发展一日千里。工具、函数少则数日&#xff0c;多则数月就加入了Deprecated行列不再如预期般工作。元旦闲来无事&#xff0c;用最新的ChatGPT重写一下各种开发场景&#xff0c;全部实测通过。 开发环境&#xff1a; 电脑&#xff1a;两台笔记本&#xff1a;HP和MacBoo…
阅读更多...
AI-数学-高中-3.二次函数的根的分布问题的解题方法

AI-数学-高中-3.二次函数的根的分布问题的解题方法

原作者学习视频&#xff1a;二次】3二次函数根分布问题&#xff08;中档&#xff09;_哔哩哔哩_bilibili 一、伟达定理&#xff08;根与0比较的二次函数&#xff09; 示例&#xff1a; 二、画图法&#xff1a; 1.开口方向的确定&#xff0c;有的示例可能存在向上、下两种情况…
阅读更多...
顺序栈之共享栈实现——C语言

顺序栈之共享栈实现——C语言

参考书&#xff1a;数据结构教程 第5版 李葆春 P83 #include <stdio.h> #include <string.h> #include <stdlib.h>#define MaxSize 10/*共享栈*/ typedef struct {char data[MaxSize];int top1,top2,len; }DStack;/*初始化*/ void InitStack(DStack *s){s-…
阅读更多...
[蓝桥杯学习] 树状数组的二分

[蓝桥杯学习] 树状数组的二分

要解决这个问题&#xff0c;插入和删除可以用STL实现&#xff0c;2操作如果用树状数组实现的话&#xff0c;将数的值作为树状数组的下标&#xff0c;即值域。 树状数组有两种操作&#xff0c;一个是更新某点的值&#xff0c;另一个是求区间和。 mid (lr)/2 &#xff0c;求和 …
阅读更多...
CTF-PWN-栈溢出-中级ROP-【栈迁移】

CTF-PWN-栈溢出-中级ROP-【栈迁移】

文章目录 栈迁移具体流程 VNCTF 2023 traveler libc-2.27检查源码main函数![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/386c35c30f854434ae43667b9473c58a.png)全局变量地址局部变量地址 PIE保护开启PIE关闭PIE 思路exp 栈迁移参考 栈迁移参考 栈迁移 顾名思义…
阅读更多...
数模学习day10-聚类模型

数模学习day10-聚类模型

说明&#xff0c;本文部分图片和内容源于数学建模交流公众号 目录 K-means聚类算法 K-means聚类的算法流程&#xff1a; 图解 算法流程图 评价 K-means算法 基本原则 算法过程 Spss软件操作 K-means算法的疑惑 系统&#xff08;层次&#xff09;聚类 算法流程 Sp…
阅读更多...
LVGL 主题

LVGL 主题

LVGL 主题 修改样式的一点个人心得 lvgl的样式众多&#xff0c;本人是记不住的&#xff0c;用的时候可以快速查找即可 查看官方例子 查看官方例子可以快速了解组件的基础样式 使用官方的 SquareLineStudio 软件&#xff0c;配置出想要的效果&#xff0c;再生成参考代码 Squ…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023