記事ディレクトリ
I.はじめに
- 説明: 正確な位置プロンプトを備えた、Hongmeng システムで完全に機能するログイン モジュールを開発する方法。
- 難易度: 初級
- 知識ポイント:
- 1. ルーターのページルーティング
- 2. CustomDialog カスタム ポップアップ ウィンドウ
- 3. ポップアップバブルプロンプト
- 4.setTimeoutタイマー
- 効果：
2. デザイン
1.UIデザイン
(1) メインレイアウト
レイアウト構築については同コラムの記事を参照していただくとして、以下は大まかなレイアウトですが、今後改良していきます。
@Entry
@Component
struct Index {
@State name: string = ""
@State pass: string = ""
@State btnLogin: string = "登录"
build() {
Row() {
Column() {
// person
Image($r('app.media.person')).width(100).height(100).margin({
top:80, bottom:50})
// data
TextArea({
placeholder : "账号/电话号码"})
.margin(15)
.onChange((value: string) => {
// TOD 数据绑定
this.name = value
})
TextInput({
placeholder : "密码", text : this.pass})
.margin(15)
.type(InputType.Password)
.onChange((value: string) => {
// TOD 数据绑定
this.pass = value
})
// btn
Button(this.btnLogin, {
type: ButtonType.Normal, stateEffect: true })
.borderRadius(18)
.backgroundColor(0x317aff)
.width(90)
.height(40)
.margin({
top:50})
.onClick(() => {
// TODO 登录逻辑
...
})
}
}
}
}
（2）カスタムダイアログ
CustomDialog (ポップアップ ウィンドウ): 広告、賞金獲得、警告、ソフトウェア アップデートなど、ユーザーとの対話型応答操作に使用できます。
- ステップ 1: @CustomDialog デコレータを使用してカスタム ポップアップ フレームを装飾し、このデコレータのコンテンツをカスタマイズします。
// 弹出登录成功的信息
@CustomDialog
struct CustomDialogExample {
controller: CustomDialogController
build() {
Column() {
Text('登录成功')
.fontSize(20)
.margin({
top: 10, bottom: 10 })
.borderRadius(5)
}
}
}
- ステップ 2: @CustomDialog デコレータを使用してカスタム ポップアップ フレームを装飾し、このデコレータのコンテンツをカスタマイズします。
@Entry
@Component
struct Index {
// 创建构造器
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({
}),
})
...
}
- ステップ 3: onClick イベントにバインドされているコンポーネントをクリックして、ポップアップ ウィンドウを表示します。
@Entry
@Component
struct Index {
...
build() {
Row() {
Column() {
Flex({
justifyContent:FlexAlign.Center}) {
Button(this.btnLogin, {
type: ButtonType.Normal, stateEffect: true })
.borderRadius(18)
.backgroundColor(0x317aff)
.width(90)
.height(40)
.margin({
top: 50 })
.onClick(() => {
// 打开自定义弹窗
this.dialogController.open()
// 定时关闭弹窗（1s）
setTimeout(() => {
// 关闭自定义弹窗
this.dialogController.close()
}, 1000)
})
}
}
}
}
}
（3）ポップアップ
ポップアップ (バブル プロンプト): コンポーネントにバインドしてバブル ポップアップ ウィンドウ プロンプトを表示し、ポップアップ ウィンドウのコンテンツ、対話ロジック、および表示ステータスを設定できます。
- 入力ボックスを例に挙げます
@Entry
@Component
struct Index {
@State name: string = ""
@State pass: string = ""
@State btnLogin: string = "登录"
@State handlePopup_name: boolean = false
@State handlePopup_pass: boolean = false
@State handlePopup_btn: boolean = false
// TODO 创建构造器
build() {
Row() {
Column() {
// person
...
// data
...
TextInput({
placeholder : "密码", text : this.pass})
.margin(15)
.type(InputType.Password)
.onChange((value: string) => {
...
})
.bindPopup(this.handlePopup_pass, {
message: '密码为空',
})
// btn
Flex({
justifyContent:FlexAlign.Center}) {
Button(this.btnLogin, {
type: ButtonType.Normal, stateEffect: true })
.borderRadius(18)
.backgroundColor(0x317aff)
.width(90)
.height(40)
.margin({
top: 50 })
.onClick(() => {
...
// 密码为空，气泡提示
if (this.pass == "") {
this.handlePopup_pass = !this.handlePopup_pass
}
...
})
...
}
}
}
}
}
2. 論理設計
ここでのRouterとsetTimeoutについては、フロントエンドを中心に勉強している友達ならよく知っているでしょうし、専攻で勉強している友達も印象に残っていると思いますので、ここで簡単にお話します。
（1）ルーター
ルーター: アプリケーション内の異なるページ間のジャンプとデータ転送を実装します。
-
ステップ 1: URL を宣言する
-
ステップ 2: ジャンプして値を渡す
import router from '@ohos.router';
// 弹出登录成功的信息
...
@Entry
@Component
struct Index {
...
// 创建构造器
...
build() {
Row() {
Column() {
...
// btn
Flex({
justifyContent:FlexAlign.Center}) {
Button(this.btnLogin, {
type: ButtonType.Normal, stateEffect: true })
.borderRadius(18)
.backgroundColor(0x317aff)
.width(90)
.height(40)
.margin({
top: 50 })
.onClick(() => {
...
router.push({
url: 'pages/UserInfo',
// 传递数值
params: {
name: this.name,
pass: this.pass
}
})
})
}
}
}
}
}
- ステップ 3: 選択したインターフェイスが値を受け取ります。
import router from '@ohos.router';
@Entry
@Component
struct UserInfo {
// 接收数据
@State name: string = router.getParams()?.['name'];
@State pass: string = router.getParams()?.['pass'];
build() {
Row() {
Column(){
Text("账号：" + this.name).fontSize(50)
Text("密码：" + this.pass).fontSize(50)
Button('返回')
.onClick(() => {
router.back()
})
}
}
}
}
（2）setTimeout
setTimeout (タイマー): メソッド (関数) を完了するまでの時間 (ミリ秒) を指定します。
setTimeout(() => {
// 关闭自定义弹窗
this.dialogController.close()
// 路由跳转
router.push({
url: 'pages/UserInfo',
params: {
name: this.name,
pass: this.pass
}
})
}, 1000)
3. 付属品
1. 完全なコード
- インデックス.ets
import router from '@ohos.router';
// 弹出登录成功的信息
@CustomDialog
struct CustomDialogExample {
controller: CustomDialogController
build() {
Column() {
Text('登录成功')
.fontSize(20)
.margin({
top: 10, bottom: 10 })
.borderRadius(5)
}
}
}
@Entry
@Component
struct Index {
@State name: string = ""
@State pass: string = ""
@State btnLogin: string = "登录"
@State handlePopup_name: boolean = false
@State handlePopup_pass: boolean = false
@State handlePopup_btn: boolean = false
// 创建构造器
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample({
}),
})
build() {
Row() {
Column() {
// person
Image($r('app.media.person')).width(100).height(100).margin({
top:80, bottom:50})
// data
TextArea({
placeholder : "账号/电话号码"})
.margin(15)
.onChange((value: string) => {
this.name = value
this.handlePopup_name = false
this.handlePopup_btn = false
})
.bindPopup(this.handlePopup_name, {
message: '账号为空',
})
TextInput({
placeholder : "密码", text : this.pass})
.margin(15)
.type(InputType.Password)
.onChange((value: string) => {
this.pass = value
this.handlePopup_pass = false
this.handlePopup_btn = false
})
.bindPopup(this.handlePopup_pass, {
message: '密码为空',
})
// btn
Flex({
justifyContent:FlexAlign.Center}) {
Button(this.btnLogin, {
type: ButtonType.Normal, stateEffect: true })
.borderRadius(18)
.backgroundColor(0x317aff)
.width(90)
.height(40)
.margin({
top: 50 })
.onClick(() => {
if (this.name == "") {
this.handlePopup_name = !this.handlePopup_name
} else if (this.pass == "") {
this.handlePopup_pass = !this.handlePopup_pass
} else if (this.name == "123456" && this.pass == "666") {
console.log("登录成功!")
this.dialogController.open()
// 定时任务,跳转到第二个界面,两秒后
setTimeout(() => {
// 关闭自定义弹窗
this.dialogController.close()
// 路由跳转
router.push({
url: 'pages/UserInfo',
params: {
name: this.name,
pass: this.pass
}
})
}, 1000)
} else {
this.handlePopup_btn = !this.handlePopup_btn
}
})
.bindPopup(this.handlePopup_btn, {
message: '账号或密码错误',
})
}
}
}
}
}
- ユーザー情報.ets
import router from '@ohos.router';
@Entry
@Component
struct UserInfo {
@State name: string = router.getParams()?.['name'];
@State pass: string = router.getParams()?.['pass'];
build() {
Row() {
Column(){
Text("账号：" + this.name).fontSize(50)
Text("密码：" + this.pass).fontSize(50)
Button('返回')
.onClick(() => {
router.back()
})
}
}
}
}