鸿蒙先容、鸿蒙编程环境、根本组件、页面跳转学习 - ToB企服应用市场:ToB评测及商务社交产业平台

@Entry
// 运行程序的入口
@Component
// 组件的标识，组件可以重用
struct B {}

复制代码

str: string = "在下为B";
@State username: string = "";

复制代码

TextInput({ placeholder: '请输入用户名', text: this.username }) // placeholder提示词，什么都没输入时的占位字，text代表本输入框内输入的字符会与username属性时刻保持同步
.type(InputType.Password) // 此行代码说明这个文本框用于输入密码，字符会以·的方式显示，会在最右侧有一个眼睛，可以显示输入的字符
.placeholderFont({ size: 30 }) // 提示词的尺寸大小
.placeholderColor(Color.Blue) // 提示词的颜色
.maxLength(6) // 能输入的最长长度
.margin({ top: 100, left: 40 }) // 相对上方组件距离100单位，相对左方40单位
.onChange((val) => { // onChange如果文本框内的文本发生了变化
// ()=>{}匿名函数，()内是参数，{}内是方法体
// val是用户实时输入的信息
this.username = val; // 文本框内容变化时，将其赋值给username变量
});

复制代码

Button() {
Text('登录') // 按钮内的字符
.fontSize(30) // 字体大小
.fontColor(Color.White); // 字体颜色，因为按钮是蓝色所以白色更清晰
}.type(ButtonType.Capsule) // 按钮为胶囊型,Circle为圆形，Normal为长方形
.height(50) // 按钮高度为50
.width(150) // 按钮宽度为150
.onClick(() => { // 按钮的点击事件，使用了匿名函数()=>{}
if (this.username == 'asd' && this.password == '123456') { // 如果用户名密码匹配，则登录成功
console.log('登录成功'); // 会在Log界面输出登录成功语句
router.pushUrl({ url: 'pages/A' }); // 会跳转到A页面
} else { //未匹配
promptAction.showToast({ // 在界面弹窗进行提示，类似alert()
message: '这是个弹框错误信息', // 提示的信息
duration: 1000, // 持续时间，单位为毫秒
bottom: 200 // 距离底部距离
});
console.log('登录失败' + this.username + ';' + this.password); // 登录失败的信息提示
}
});

复制代码

import { router } from '@kit.ArkUI' // 导入路由管理器对象
import promptAction from '@ohos.promptAction';
@Entry
// 运行程序的入口
@Component
// 组件的标识，组件可以重用
struct A {
// 成员变量、函数
str: string = "在下为A";
// 加@State就是状态变量，可以设置事件，不加只是成员变量
message: string = "2024/09/11\n代办列表";
private todolist: Array<string> = ['吃早饭', '吃午饭', '吃晚饭', '睡觉'];
private num: number = 100;
build() { // 类似<body>标签
// this.newLocalBuilder()
// 前端做页面布局：流编译：相对定位、绝对定位、固定定位
// 电脑显示数据是第一象限，顶点为左上角
RelativeContainer() { // 相对定位布局方式
Text(this.message)
.fontSize(50)
.margin({ left: 20, top: 10 });
ForEach(this.todolist, (item: string) => { // 循环，类似java中的增强for循环
ArrItem({ str: item, index: this.num += 100}); // 使用方法，传参数
});
}.height('100%')
.width('100%')
}
@Builder
// 第一阶段代码，被提取成一个函数
// 第二阶段代码实现了此功能，可进行对比学习
newLocalBuilder() {
Row() {
Column() {
Text(this.str)
.fontSize(20)
.fontColor(Color.Blue);
Button() {
Text('next qmsz')
.fontSize(30)
.fontColor(Color.White);
}.type(ButtonType.Capsule)
.height(80)
.width('60%')
.onClick(() => {
console.log('点击了next按钮');
router.pushUrl({ url: 'pages/B' });
});
}.width('80%');
}.height('90%')
}
}
@Component
struct ArrItem {
@State boo: boolean = false; // 状态变量
private str: string = ""; // 文本内容
private index: number = 90; // 距离顶部的距离
build() {
Row() {
if (this.boo) {
Image($r('app.media.ok')) // 图片地址
.height(70) // 图片长度
.width(70) // 图片宽度
.margin({ left: 20 }); // 距离左侧组件20像素
} else {
Image($r('app.media.buok'))
.height(70)
.width(70)
.margin({ left: 20 });
}
Text(this.str)
.fontSize(50) // 文字大小
.opacity(this.boo ? 0.4 : 1) // 文字透明度
.decoration({ type: this.boo ? TextDecorationType.LineThrough : TextDecorationType.None }) // 有无删除线
}.borderRadius(24) // 设置元素的边框圆角半径
.margin({ top: this.index }) // 跟上方组件的距离
.onClick(() => {
this.boo = !this.boo; // 将状态反转
});
}
}

复制代码

import { router } from '@kit.ArkUI' // 导入路由管理器对象
import promptAction from '@ohos.promptAction'; // 提示动作
@Entry
// 运行程序的入口
@Component
// 组件的标识，组件可以重用
struct B {
// 成员变量、函数
str: string = "在下为B";
// 状态变量，可触发事件
@State username: string = "";
@State password: string = "";
// 加@State就是状态变量，可以设置事件，不加只是成员变量
build() { // 类似<body>标签
Row() { // 说明这是一行，可以设置多个Row多行
Column() { // 说明这是本行中的一列，可以设置多列
// 小括号里是核心属性，大括号里是子组件
// this.newLocalBuilder();
// 此组件负责输入用户名
TextInput({ placeholder: '请输入用户名', text: this.username }) // placeholder提示词，什么都没输入时的占位字，text代表本输入框内输入的字符会与username属性时刻保持同步
.placeholderFont({ size: 30 }) // 提示词的尺寸大小
.placeholderColor(Color.Blue) // 提示词的颜色
.maxLength(6) // 能输入的最长长度
.margin({ top: 100, left: 40 }) // 相对上方组件距离100单位，相对左方40单位
.onChange((val) => { // onChange如果文本框内的文本发生了变化
// ()=>{}匿名函数，()内是参数，{}内是方法体
// val是用户实时输入的信息
this.username = val; // 文本框内容变化时，将其赋值给username变量
});
// 此组件负责输入密码，大部分属性与用户名一致
TextInput({ placeholder: '请输入密码', text: this.password })
.type(InputType.Password) // 此行代码说明这个文本框用于输入密码，字符会以·的方式显示，会在最右侧有一个眼睛，可以显示输入的字符
.placeholderFont({ size: 30 })
.placeholderColor(Color.Blue)
.maxLength(6)
.margin({ top: 20, left: 40 })
.onChange((val) => { // val是用户实时输入的信息
this.password = val;
});
// 此组件负责提交数据，做判断，输出数据
Button() {
Text('登录') // 按钮内的字符
.fontSize(30) // 字体大小
.fontColor(Color.White); // 字体颜色，因为按钮是蓝色所以白色更清晰
}.type(ButtonType.Capsule) // 按钮为胶囊型,Circle为圆形，Normal为长方形
.height(50) // 按钮高度为50
.width(150) // 按钮宽度为150
.onClick(() => { // 按钮的点击事件，使用了匿名函数()=>{}
if (this.username == 'asd' && this.password == '123456') { // 如果用户名密码匹配，则登录成功
console.log('登录成功'); // 会在Log界面输出登录成功语句
router.pushUrl({ url: 'pages/A' }); // 会跳转到A页面
} else { //未匹配
promptAction.showToast({ // 在界面弹窗进行提示，类似alert()
message: '这是个弹框错误信息', // 提示的信息
duration: 1000, // 持续时间，单位为毫秒
bottom: 200 // 距离底部距离
});
console.log('登录失败' + this.username + ';' + this.password); // 登录失败的信息提示
}
});
}.width('80%'); // 只使用整个页面宽度的80%
}.height('90%'); // 只是用整个页面长度的90%
}
@Builder
// 第一阶段代码，被提取成一个函数
// 第二阶段代码实现了此功能，可进行对比学习
newLocalBuilder() {
Text(this.str)
.fontSize(20)
.fontColor(Color.Blue)
Button() {
Text('back z')
.fontSize(30)
.fontColor(Color.White);
}.type(ButtonType.Capsule)
.height(80)
.width('60%')
.onClick(() => {
console.log('点击了back按钮');
router.pushUrl({ url: 'pages/A' });
})
}
}

复制代码

{
"src": [
"pages/Index",
"pages/A",
"pages/B"
]
}

复制代码