企业官网建设流程全解析

一、两段示例代码

1、一段文字多种颜色 / 点击（Text + Span）

ets

Text('欢迎使用') { Span('鸿蒙应用') .fontColor(Color.Blue) .fontSize(22) .onClick(() => console.log('点击跳转')) Span('开发平台').fontColor(Color.Grey) }

2、三种输入框 + 双向绑定

ets

// 单行输入账号 TextInput({ text: $$this.account, placeholder: "请输入账号" }) // 多行写评论 TextArea({ text: $$this.comment, placeholder: "写下你的评论..." }) // 搜索框 Search({ value: $$this.keyword, placeholder: "搜索内容" }) .onSubmit((val) => this.searchData(val))

二、知识点 1：Text + Span 彩色文字

1. Text是大文字框，里面可以放多个Span
2. 每个Span能单独改颜色、字号，还能单独点击
3. 用处：一行文字里部分字标蓝、做成可点击文字链接

三、知识点 2：$$ 双向绑定

以前写输入框要手动监听输入、赋值，代码很长：

ets

TextInput({text:this.msg}) .onChange(v=>this.msg=v)

现在加个`

直接搞定：

this.account`

• 你打字，变量自动更新
• 代码改变量，输入框文字自动变不用额外写监听代码，简化开发。

四、知识点 3、三种输入框区别

1. TextInput：只能输一行，账号、手机号用它
2. TextArea：可以换行，写评论、长留言用它
3. Search：专门做搜索，回车就能触发搜索函数onSubmit

简短总结

1. 一行文字要多颜色、可点击 → Text 套 Span
2. 输入框统一用$$，少写代码
3. 短单行 TextInput、长多行 TextArea、搜索用 Search