HarmonyOS鸿蒙应用开发——ArkTS代码

这里我将按照个人有过前端基础的角度阐述，建议没有前端的基础的先暂时了解一下HTML、CSS、JS这些，转化明白起来会更方便。


一、基础语言：TypeScript

首先我们先来了解作为ArkTS代码语法的基础——TypeScript，这个语法其实跟JavaScript还是很像的，这里就讲一下它们之间的 “ 类似 ” 和 “ 不同 ” ，之间在JavaScript的基础上来学。
1、变量声明不同

JavaScript是弱语言，一个const、一个let、一个var走天下，包罗了所有范例（字符串、整型、浮点数、数组、对象......）
但是TypeScript不是，他是要求要跟上一个数据范例的，然后它区别于别的编程语言的是，数据范例写在 变量 后面

然后数据范例一共有这么几种

范例名	代表什么范例	怎么用
string	字符串	let a: string = 'xxx'
number	数字（包括整型、浮点数）	let a: number = 1.23
boolean	布尔值	let a: boolean = true
any	任何数据范例	let a: any a = 12 （可以是任何范例）
union	连合范例 自定义会合范例，可以是其中一种	let a: string|number|number = 'rose' a = 12 (定义了后还可以改设置的范例的其中一种)
Object	对象	let a = { name: 'CZM' , age: 18 } （跟JavaScript的对象写法一样）
Array(第1种)	这种跟下面那种都是数组， 只是表达情势不一样	let a : Array<string> = [ 'czm' , 'wdf' ] (跟Java的集合差不多，)
Array(第2种)	这种跟上面那种都是数组， 只是表达情势不一样	let a: number[] = [ 12 , 18 ] (跟Java的数组差不多)

2、条件判断类似

不管是if-else、还是switch，都是千篇一律，为了照顾一下没学过的，我就提一下“ === ”，就是“等于”，但是“ == ”是值类似、数据范例不同，“ === ”是即使值类似，数据范例不同也不行（数字1跟字符串"1"）

还有

3、循环一样

自己看吧，一样的

4、函数不一样

函数有这个不一样：
1、形参要带数据范例
2、要带上函数返回值范例，哪怕没有return，也得是void范例
3、支持箭头函数，箭头函数语法跟JS一样，只是别忘了形参要带数据范例
4、形参可以传值、也可以不传值，第一种是形参名后加?，函数内里用条件判断设置“传参的赋值”和“不传参的默认值”；第二种是直接在形参处设置默认值，有传参就用实参值，没实参就用默认值

6、类、接口跟JavaScript不一样，跟Java有点类似

跟JavaScript不一样是由于JavaScript里没有这么多范例的类，就只有一个简单类：

但是跟Java有点类似是由于，Java有这些各种各样的类：
罗列类

接口类

实现子类

调用实现子类的方法，然后使用罗列类的常量时

TypeScript各类之间的接洽

Java各类之间的接洽

父类跟继续子类

7、模块化开发跟JavaScript差不多

当我们在前端开发时，有时间有大量的数据或者逻辑运算，这些内容在很多地方都要用到，复用性很高，那么我们就会单独新建一个JS文件，把数据、方法都写进这个JS文件，然后通过【export default】来导出，然后在表面要用的时间则是【import { 方法1 , 方法2 , 数组1 , 数组2...... } from '刚刚那个JS文件的路径'】来导入。
那么TypeScript也差不多，唯一不同就是少了个【default】，导出是【export】，导入则跟JavaScript一样

末了有兴趣的可以去TypeScript的官方文档查察更多详情：TypeScript: JavaScript With Syntax For Types.

二、创建项目，开始写代码

1、首先创建项目

前三项自定义，后面的就默认不管就行

创建后就可以看到这么一个界面，根本就跟老版本的idea一毛一样了，然后右边侧边有一个【Preview】，点击之后把上面“叉掉”，就可以看到一个手机模拟器了，有点范例微信开发者工具或者安卓开发的那个虚拟机了

2、鸿蒙的页面的代码布局

这里有前端基础的，看起来会非常方便，我将以前端.vue文件的代码来解释鸿蒙的代码布局
1、鸿蒙的【.stc文件】 可以看成等于 Vue的【.vue文件】

鸿蒙的【.stc文件】

Vue的【.vue文件】

uniapp的页面也是【.vue文件】

2、然后【.stc】代码跟【.vue】一样都可以写 HTML 、CSS、  JavaScript 

为了验证我的想法，我还特意去问了AI：

【.stc文件】跟【.vue文件】一样，同样可以写 HTML 、CSS、  JavaScript 

但是【.vue文件】可以很明显的区分开这三块代码的部分

而【.stc文件】却是把这些全混在一起写了

然后看到上面这么一堆代码莫慌，我以前后端的角度全面带各位明白【.stc】代码
1、首先最上面的【@Entry】【@Component】
   我们可以暂时以后端角度，明白为【@SpringBootApplication】【@Component】注解，由于【@SpringBootApplication】在后端不就是“启动类注解”嘛，然后【@Entry】是标记“当前组件是入口组件”；然后【@Component】在后端是声明这是一个Bean类，也就是可以放入容器里被别的类注入使用，然后【@Component】在这里是声明这是一个“自定义组件”，也可以被别的地方拿去用。
  
  作为前端角度，我们就把【@Entry】明白为是前端 “把入口页面写为【index.vue】、或者是在pages.json设置入口页面” 的行为；然后【@Component】明白为前端把 “在component目次里新建一个component组件” 的行为。
  2、然后到【struct 自定义组件名 { ... }】
   就是创建一个自定义组件，就是前端vue框架里的component组件，可以多个地方复用
  3、然后是【struct 自定义组件名 { ... }】内里的内容
   【build】你就当Vue里的HTML那里的<template>,然后开始在这内里写整个页面元素
  【Row()】、【Column()】、【Text()】......这些你就明白为前端的那些<div>、<view>、<text>、<span>......这些原本框架里就有的根本的内置组件，所有的自定义组件都是由这些内置组件拼凑而成。
  4、然后是【.fontSize()】、【.width()】......这些
   这些更不用说，就是<style>里的CSS样式，只不外鸿蒙是用【 元素.样式(值) 】的语法来写
  5、末了是【 .onClick(() => { ... }) 】......这些
   这就够奇葩，鸿蒙语言里采用【逻辑】跟【样式】都同级的用【 元素.逻辑( 函数内容 ) 】，这真是费解，有人说这样方便，我看简直就是一团乱，到时找代码错误都不知道怎么找，又是样式、又是逻辑堆一块的......
  6、另外那个【@State xxx: 数据范例 = xxx】
   可以明白为Vue里的【v-model】，【@State xxx: 数据范例 = xxx】这个数据可以动态的改变，逻辑变了页面渲染部分也变，页面处改变了逻辑部分也改变，双向流畅吧
  
3、那么怎么创建页面

（1）创建页面就是在【pages】目次下新建【ArkTS文件】

（2）然后先写一个标记【@Component】和【struct 页面布局】，声明它是一个组件，哪怕是你复制别的网页或者别人的代码过去，你也要先写一个【@Component】和【struct 页面布局】先
“comp”快捷生成【@Component】和【struct 页面布局】

（3）然后在【struct】后面写上你的页面文件的名字

（4）然后假如你只是想运行一个页面就显示一个页面，那么就加一个【@Preview】

（5）假如不是，你是想在index入口文件，通过一些点击变乱啥的，跳转到这个页面的话
就把【@Preview】删掉，换成【@Entry】

（6）然后你必要再到【resources目次下】——>【base目次下】——>【profile目次下】——>【main_pages.json】，然后在“src”里设置你的页面路径
就跟uniapp要在pages.json里设置页面的操纵一样

（7）末了在要跳转的页面的地方运用逻辑跳转就行了，至于跳转页面的逻辑我后面再讲，现在仅讲怎么【注册一个页面】

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。