一.文件结构:
如我们看到的文件结构，其中主要的就是两个AppScope这个文件夹下面存放着的是一些资源文件，比如app图标等静态资源，然后entry文件夹下面的pages文件夹下面我们一般存放图形界面开发的代码，这就是目前学习阶段最主要的两个目录结构
其中module.json是一些配置信息，这里也很重要
其中oh-package里面配置的是版本号的一些信息，当app更新时会检测这个文件夹里面的内容
其中在entryabality里面存放的是一些生命周期有关的方法
其中中间的两个函数是回调函数，不包含在生命周期内
其中这里的这个方法的这个参数代表着当app打开时首先出现的时哪个页面
二.一些操作事项
当你想要试试界面效果时点击右侧的预览，即可预览界面效果，并且点击上面的正方形可以调整分辨率
三.正式学习：界面编写：组件学习
在开发中，华为的界面布局的编写采用的是Flex布局，也称之为：弹性布局
其将页面分为了主轴和交叉轴
（1）垂直布局时：其主轴从上至下，其交叉轴从左至右 使用column组件
（2）左右布局时：与垂直布局反之 使用Row编写
我们学习华为的界面布局时可以找到华为的开发者官网，里面的开发文档有界面的布局，在ArkUI框架下进行ui的编写
在其ArkTS组件里面按照功能分好了类别，根据功能来进行界面的编写和开发，当自己需要什么功能的时候阅读开发者文档就可以了
注释编写样式:
1.@Style
注意，通过这种方式编写Style只能够往里面添加公共属性
通过在代码中编写这样的注解然后在代码中这样调用就可以实现一些公共部分的代码的调用，避免了重复书写
2.@Builder
对于特定的组件，我们可以通过这种方式进行编写一些共同的代码，通过注解编写
首先我们在定义了一个函数名字，并且里面可以定义自己想要传入的参数，通过参数传递可以实现一些重复性操作的可变性，这样编写样式代码大大提高了可读性和复用性
3.@State:
该注解方式能够定义一些全局变量以供使用，举个例子，你可以定义一个number类型的变量，点一下就会+1，此时就可以通过一个变量来进行实现，并且能够让变量实时的进行渲染
然后再通过this进行调用
Column&&Row组件学习：
row：组件横向排列
column：组件纵向排列
在学习ui布局时，我们要知道一个重要的编译工具，点击预览的右上角有一个TT的标志，点击它就能够进行调试模式，查看各个组件的层级关系
alignItems属性：
这个属性的作用是设置子控件在交叉轴方向上的的布局，其参数需要传进去一个HorizontalAlign这个枚举量的某个值，比如center或者是left这些子控件的位置编写，接下来上代码演示
我们可以发现尽管添加了这个居中属性值，我们依旧不能够使得组件居中，这是为什么呢？
我们可以看到Column本身也是个组件，当你没有进行任何的宽度高度设置的时候它默认的宽高就是0，
此时我们往里面添加了一个图片组件
这个时候column这个组件就被填充了，整个组件的大小就是图片的大小。
所以我们可以发现，在设置子组件水平居中的时候应该要设置好父组件的宽高信息
代码演示
在这里我们将Column组件铺满了整个屏幕然后此时我们就会发现蓝色的框框变大了，然后图片组件在水平方向上也居中了
justifyContent属性:
这一组件主要用于设置主轴的子组件的位置
其中传入的变量为FlexAlign
这个传入的参数有如下的枚举量，其作用如下图所示
space：
这也可以设置其子组件纵向方向上的垂直间距
Text组件：
其链接如下，可查阅它的api
Text-文本与输入-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)
其常用的api有上面几种，一个是描述了字体的大小，
一个设置了字体的颜色，通过16进制的代码我们就可以在左侧通过调色盘进行调整
fontWeight这个参数是设置了字体的粗细
TextInput组件：
接下来介绍几个属性的作用
placeholderColor:
用于设置文本输入框中提示文本的颜色
placeholder：
用于设置文本未输入时的提示文本
.placeholderFont：
用于设置文本提示框的字体
router路由守卫：
url：用于页面跳转
params：用于跳转页面的数据传递
但是鸿蒙提供了另一种更好的方式进行这种操作
Navigation组件(可用于编写一些动画效果):
能够实现页面跳转的同时还能够实现一些动画效果，并且能够进行多端适配
Divider()组件：
这一组件的作用是设置了一个组件之间的分割框，通过这样一个组件能够实现输入文本框下方的横线效果
Tabs组件:
tabs组件，页签组件能够实现如下图所示的效果
其属性值如下
其中BarPostion各个枚举量的意义如下图所示
像上图属性设置为了start并且将属性vertical设置为了false
使得页签横向布局并且在顶部
我们再来看看其他几个比较常用的属性
BarMode
这个属性的意义在于设置底下的导航能不能够显示在屏幕外面
此时我们设置为scollable可滚动的页签条，我们能够发现页签出现在了屏幕外边
当设置为Filex的时候页签就会在当前页面进行平均分配
AnimationDuration:
这个属性目的是控制切换动画的时间，里面传入一个number值，用于控制切换页签的动画效果
TableContent子组件：
有一个tableContetn那么我们可一看到右边的下面的导航栏就会出现这样两个可供切换的界面
在TabContent后面的TableBar用于渲染每一个TabContent的样式
那么我们如何知道当前处在哪个页面并进行对应的操作呢？
在tabs的一个属性中有一个onchange（）事件，该事件在页面发生变化时调用该事件
其中的index参数是必须填写的参数，我们可以实现定义好一个currentIndex变量
然后方便再页面样式书写对应的逻辑
select组件：
其文档如下
Select-按钮与选择-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)
其主要作用是搞出一个选择框
效果如图所示
其代码如上图所示
接下来讲述一些核心的属性
比如
Selected属性：用于设定初始的索引，即一开始选择哪个选项作为初始选项
value属性：用于修改选择栏上面的文字，如上图所示就是tttt，可以通过绑定事件来动态修改
SelectOption对象:其中存放的成员变量如下所示
select组件传入的参数如下所示
传入了一个option类型变量，而option类型的变量又是由SelectOption类型的数组组成
其代码用法如下
所以其代码由一个数组里面包含和多个selectoption类型的值构成
Marquee组件：
该组件用于播放滚动的文字跑马灯其各个参数作用如下
动画效果详细学习：
如上图所示，显示动画的各种参数
下面解释重要参数的作用
duration:即动画的播放时间
curve:动画曲线，意思是动画变化的时间速率，比如一个图像的放大是由快到慢还是由慢到快还是均匀变化，他是一个枚举类型，接下来展示它的枚举量
其中EaseIn和EaseOUT分别表示缓入缓出的动画效果剩下的按照这两个的意思去理解就行
接下来再解释playmode这个枚举量
playmode:
组件转场动画：
使用transition()和animateTo()方法
下面介绍transition()的各类参数
其中scale属性的x和y方法用于控制是放大还是缩小，比如你的transition（）设置的是出现，那么当你的x和y是0的时候那就代表着图标从0的大小逐步放大到原本大小
centerX和Y的数值是标志着缩放的中心点在哪，比如你设置为0，0那么整个图标就会向左上角进行缩小或者是放大，想要让它围绕着中心进行缩放你可以将这两个的数值设置为"50%"
其中angle为正值代表着相对于正常位置顺时针旋转，为负值代表着逆时针旋转
组件生命周期：
其执行顺序如下
通用组件属性：
2.onchange方法的使用：
value就是变化后传进来的值，通过这种方式能够获取到变化的值并进行一些操作
ArkTs基础语法
1.基本构成
-
装饰器： 用于装饰类、结构、方法以及变量，并赋予其特殊的含义。如上述示例中@Entry、@Component和@State都是装饰器，@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。
-
UI描述：以声明式的方式来描述UI的结构，例如build()方法中的代码块。
-
自定义组件：可复用的UI单元，可组合其他组件，如上述被@Component装饰的struct Hello。
-
系统组件：ArkUI框架中默认内置的基础和容器组件，可直接被开发者调用，比如示例中的Column、Text、Divider、Button。
-
属性方法：组件可以通过链式调用配置多项属性，如fontSize()、width()、height()、backgroundColor()等。
-
事件方法：组件可以通过链式调用设置多个事件的响应逻辑，如跟随在Button后面的onClick()。
-
系统组件、属性方法、事件方法具体使用可参考基于ArkTS的声明式开发范式。
2.类和对象
通过这样的方式来定义对象
在ArkTs中，变量类型的声明放在后面
UserName:string这样
其中，假设变量可以为undefined或者是别的值你可以这样书写
变量名?:类型
通过这种方式来对类进行实例化，并且我们可以看到带？的变量在构造函数中你可以选择不传入进去
我们还可以在别的文件进行类的声明，然后通过一个export让这样的类能够在别的地方被使用
继承
通过这种方法能够实现类的继承但是注意，父类的继承你需要在子类调用父类的构造方法
接口的书写也是同理，同java一样
3.变量的声明
ArkTs采用let关键字告诉编译器这是一个变量
然后采用：变量类型 的方式定义变量的类型
此外ArkTs还有个特色就是联合变量类型
如上图所示，通过这种方式可以使得变量拥有多个类型，将不同类型的变量传入给a时一样可以成功
同样的ArkTs也支持类型自动推断
4.for of循环
5.数组遍历
首先我们通过一个私有变量的设定来设置一个常量，类比java中的static
然后我们在代码中通过这样一行代码对数组进行调用
在这个代码中，通过一个ForEach()循环对图片进行了遍历，通过箭头函数的方式来调用方法，ForEach(数组名字 , （迭代器名字:数组数据类型,索引值名字:number）=>{函数逻辑})
这样就可以实现图片的一次性创建简化了代码结构和复用性
6.函数声明
普通函数的形式是这样的，括号后面的返回值类型可以省略
箭头函数
通过这种方式可以简便的声明一个函数，适用于一些只使用少数的函数声明
华为云与mqttx接口接入笔记：
接下来讲解向设备发送信息的全流程
首先我们打开华为的云服务平台找到如图所示的地方
点进去点开设备的详情，没有设备的点击注册设备
点开设备详情进入如下界面
找到MQTT链接参数，然后我们打开mqttx这个软件点击新建一个链接，右边就是你要新建链接的设备的各种信息
接着我们打开华为云服务，点击MQTT连接参数，然后根据箭头的颜色将对应的信息填入
注意！host那里的第一个选项选择的应该是mqtts：//而不是我图中的这个样子
填入好信息建立好连接之后，我们就可以发现设备的左上角变成了一个已在线
接着我们找到对应的topci格式
你想进行怎么样的操作就往mqttx的这一个地方填写好对应的topic，我们这里拿设备上报参数到云服务平台举例
接着我们找到产品文档
在文档中找到设备上传参数，参照上传参数的格式
找到对应的格式之后，将串格式中的services_id一栏的服务id搞成自己的服务id，然后将properties里面的参数名字写上去
示例如下
接着我们在右下角的那个飞机按钮发送消息
，接着我们就能够在云平台看到这样的东西了
获取云平台数据到代码中
首先我们需要登录以下华为的iam云平台账号，找到对应的账号名字和密码
然后我们通过代码获取iam账号的token(用户登录后的授权)，其中token获取的结构如下,以JSON串的格式发送，JSON串格式以"类名"：{"变量名":变量值}
export class HuaWei_user
{
auth:Auth
constructor(name:string,password:string,domain:string) {
this.auth={
"identity": {
"methods": [
"password"
],
"password": {
"user": {
"domain": {
"name": domain //IAM用户所属账号名
},
"name": name, //IAM用户名
"password": password //IAM用户密码
}
}
},
"scope": {
"domain": {
"name": domain //项目名称
}
}
}}
}
interface Auth
{
identity:Identity
scope:Scope
}
interface Identity{
methods:string[]
password:Password
}
interface Password{
user:User
}
interface User{
name:string
password:string
domain:Domain
}
interface Domain{
name:string
}
interface Scope{
domain:Domain
}
接着我们在代码中通过这样的方式获取到华为云平台的权限,我们可一看到，通过已经编写好的华为账户类，将对应的用于信息填入，其中
chenyu0605这个名字是账户名字，是你的华为云用户名名字
login_iot()
{
let url:string='https://iam.myhuaweicloud.com/v3/auth/tokens?nocatalog=true'
// 通过华为账户的用户名等东西获取华为云权限，token就是身份令牌
// 通过身份令牌就能够访问华为云的各种数据
let HW_user=new HuaWei_user(this.user.username,this.user.password,'chenyu0605')
HttpTool.post(url,HW_user,(data: http.HttpResponse)=>{
// data.result为HTTP响应内容，可根据业务需要进行解析,响应头返回信息，主要观察result
console.info('Result:' + JSON.stringify(data.result));
console.info('Header:',JSON.stringify(data.header))//打印头信息
// 当该请求使用完毕时，开发者务必调用destroy方法主动销毁该JavaScript Object。
console.info('x-subject-token',JSON.stringify(data.header['x-subject-token']).substring(0,50))
globalThis.token=data.header['x-subject-token']
// 在login_iot中的x-subject-token
// 在您提供的 login_iot 函数中，x-subject-token 是从华为云身份认证服务（IAM）的响应头中获取的：
//
// 定义：x-subject-token 是华为云IAM服务在用户成功进行身份验证后返回的一个特殊的令牌值。
// 作用：
// 访问资源：一旦用户通过身份验证，x-subject-token 便作为访问其他华为云服务的凭证，用户可以使用这个令牌来请求华为云提供的各种资源和服务。
// 安全：该令牌通常具有时效性，并在一段时间后失效，这增加了系统的安全性。
// 服务间通信：在微服务架构中，x-subject-token 可用于服务之间的安全通信
})
}我们通过响应报文中发回来的身份验证令牌，即"x-subject-token"将他设置为一个全局变量，以便于各处使用，这个身份令牌用于验证华为云的各种权限，以便于获取数据，那么我们如何获取华为云的各种权限呢
static get(url:string,fn:Function)
{
// 每一个httpRequest对应一个HTTP请求任务，不可复用
let httpRequest = http.createHttp();//每次发送请求都会创建一个二request对象
let option:http.HttpRequestOptions= {
method: http.RequestMethod.GET, // 可选，默认为http.RequestMethod.GET
// 当使用POST请求时此字段用于传递请求体内容，具体格式与服务端协商确定
expectDataType: http.HttpDataType.OBJECT, // 可选，指定返回数据的类型,在这里我们返回一个对象
// usingCache: true, // 可选，默认为true,是否使用缓存
// priority: 1, // 可选，默认为1，设置优先级
// 开发者根据自身业务需要添加header字段
header: {
'Content-Type' : 'application/json',
// 将在LoginT里面获取到的token账户信息
'X-Auth-Token':globalThis.token
},
}我们在请求响应头中的X-Auth-Token中将对华为的身份令牌传入，获取到华为的权限
接着我们看下一段代码
export struct customRoom{
@State temperature:string=''
//
@State endpoint:string='2641015eec.st1.iotda-app.cn-north-4.myhuaweicloud.com'
@State project_id:string='a4b83c0f90494874b0c2a0250583cfe5'
@State device_id:string='FuckIGN_0605'
@State url:string='https://'+this.endpoint+'/v5/iot/'+this.project_id+'/devices/'+this.device_id+'/shadow'
//该方法为自定义组件的生命周期函数，在build之前执行
aboutToAppear(): void {
// 在httpTool的代码中，我们发送了一个请求报文，并在响应头中通过获取到的华为token登录到华为云平台
// 这样就能够获取到云平台的数据了
HttpTool.get(this.url,(data:http.HttpResponse)=>{
console.log('Shadow-Data:',JSON.stringify(data.result));
let properties:Properties=data.result['shadow'][0].reported.properties as Properties
this.temperature=properties.temp
})
}
在这里面，我们通过一个url请求对应的云平台数据
其中，endpoint，project_id,device_id这些东西，我将用截图记录在哪里寻找
首先是endpoint：
在这个地方寻找到endpoint
接着是 project_id:
先点击右上角的我的凭证，然后到这个页面之后随便复制一个项目列表里面的项目id
再接着是Deivce_id:
在这个页面查找就可以了
扫一扫
572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
