介紹

本示例選擇應用進行注冊/登錄，并設置帳號相關信息，簡要說明應用帳號管理相關功能。效果圖如下：

效果預覽

使用說明參考鴻蒙文檔：[qr23.cn/AKFP8k]

1.首頁面選擇想要進入的應用，首次進入該應用需要進行注冊，如已注冊帳號則直接登錄。

2.注冊頁面可設置帳號名、郵箱、個性簽名、密碼（帶*號為必填信息），注冊完成后返回登錄頁面使用注冊的帳號進行登錄。

3.登錄后進入帳號詳情界面，點擊修改信息按鈕可跳轉至帳號信息修改頁面重新設置帳號信息。

4.點擊切換應用按鈕則退出該帳號并返回首頁面。重新選擇想要進入的應用。

5.點擊刪除帳號按鈕則會刪除該帳號所有相關信息。

代碼解讀

Harmony與OpenHarmoy鴻蒙文檔添加
mau123789是v直接拿取

entry/src/main/ets/
|---common
|   |---AccountInfo.ets                    // 切換應用組件
|   |---BundleInfo.ets                     // 首頁列表組件
|   |---LoginInfo.ets                      // 登錄組件
|   |---ModifyInfo.ets                     // 修改信息組件
|   |---NavigationBar.ets                  // 路由跳轉組件
|   |---RegisterInfo.ets                   // 注冊組件
|---entryAbility
|   |---EntryAbility.ts             
|---model
|   |---AccountData.ts                     // 數據存儲
|   |---AccountModel.ts                    // 數據管理
|   |---Logger.ts                          // 日志工具
|---pages
|   |---Index.ets                          // 首頁
|   |---Account.ets                        // 切換應用頁面
|   |---Login.ets                          // 登錄頁面
|   |---Modify.ets                         // 修改信息頁面
|   |---Register.ets                       // 注冊信息頁面

具體實現

• 本示例分為音樂，視頻，地圖三個模塊
  • 音樂模塊
    • 使用Navigation,Button，Text,TextInput組件開發注冊，登錄，修改信息和切換應用頁面， createAppAccountManager方法創建應用帳號管理器對象
    • 源碼鏈接：[AccountData.ts]

/*

 * Copyright (c) 2022 Huawei Device Co., Ltd.

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 *

 *     http://www.apache.org/licenses/LICENSE-2.0

 *

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 */



import Logger from '../model/Logger'

import common from '@ohos.app.ability.common'

import preferences from '@ohos.data.preferences'





const TAG: string = '[AccountData]'



export class AccountData {

  static instance: AccountData = null

  private storage: preferences.Preferences = null



  public static getInstance() {

    if (this.instance === null) {

      this.instance = new AccountData()

    }

    return this.instance

  }



  async getFromStorage(context: common.Context, url: string) {

    let name = url

    Logger.info(TAG, `Name is ${name}`)

    try {

      this.storage = await preferences.getPreferences(context, `${name}`)

    } catch (err) {

      Logger.error(`getStorage failed, code is ${err.code}, message is ${err.message}`)

    }

    if (this.storage === null) {

      Logger.info(TAG, `Create stroage is fail.`)

    }

  }



  async getStorage(context: common.Context, url: string) {

    this.storage = null

    await this.getFromStorage(context, url)

    return this.storage

  }



  async putStorageValue(context: common.Context, key: string, value: string, url: string) {

    this.storage = await this.getStorage(context, url)

    try {

      await this.storage.put(key, value)

      await this.storage.flush()

      Logger.info(TAG, `put key && value success`)

    } catch (err) {

      Logger.info(TAG, `aaaaaa put failed`)

    }

    return

  }



  async hasStorageValue(context: common.Context, key: string, url: string) {

    this.storage = await this.getStorage(context, url)

    let result

    try {

      result = await this.storage.has(key)

    } catch (err) {

      Logger.error(`hasStorageValue failed, code is ${err.code}, message is ${err.message}`)

    }

    Logger.info(TAG, `hasStorageValue success result is ${result}`)

    return result

  }



  async getStorageValue(context: common.Context, key: string, url: string) {

    this.storage = await this.getStorage(context, url)

    let getValue

    try {

      getValue = await this.storage.get(key, 'null')

    } catch (err) {

      Logger.error(`getStorageValue failed, code is ${err.code}, message is ${err.message}`)

    }

    Logger.info(TAG, `getStorageValue success`)

    return getValue

  }



  async deleteStorageValue(context: common.Context, key: string, url: string) {

    this.storage = await this.getStorage(context, url)

    try {

      await this.storage.delete(key)

      await this.storage.flush()

    } catch (err) {

      Logger.error(`deleteStorageValue failed, code is ${err.code}, message is ${err.message}`)

    }

    Logger.info(TAG, `delete success`)

    return

  }

}

[AccountModel.ts]

/*

 * Copyright (c) 2022 Huawei Device Co., Ltd.

 * Licensed under the Apache License, Version 2.0 (the "License");

 * you may not use this file except in compliance with the License.

 * You may obtain a copy of the License at

 *

 *     http://www.apache.org/licenses/LICENSE-2.0

 *

 * Unless required by applicable law or agreed to in writing, software

 * distributed under the License is distributed on an "AS IS" BASIS,

 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

 * See the License for the specific language governing permissions and

 * limitations under the License.

 */



import Logger from '../model/Logger'

import appAccount from '@ohos.account.appAccount'



const TAG: string = '[AccountModel]'

const app: appAccount.AppAccountManager = appAccount.createAppAccountManager()



export class AccountModel {

  async addAccount(username: string) {

    await app.addAccount(username)

    Logger.info(TAG, `addAccount success`)

    return

  }



  async deleteAccount(username: string) {

    await app.deleteAccount(username)

    Logger.info(TAG, `deleteAccount success`)

    return

  }



  async setAccountCredential(username: string, credentialType: string, credential: string) {

    await app.setAccountCredential(username, credentialType, credential)

    Logger.info(TAG, `setAccountCredential success`)

    return

  }



  async setAccountExtraInfo(name: string, extraInfo: string) {

    await app.setAccountExtraInfo(name, extraInfo)

    Logger.info(TAG, `setAccountExtraInfo success`)

    return

  }



  async setAssociatedData(name: string, key: string, value: string) {

    await app.setAssociatedData(name, key, value)

    Logger.info(TAG, `setAssociatedData success`)

    return

  }



  async getAccountCredential(name: string, credentialType: string) {

    let result = await app.getAccountCredential(name, credentialType)

    Logger.info(TAG, `getAccountCredential success`)

    return result

  }



  async getAccountExtraInfo(name: string) {

    let result = await app.getAccountExtraInfo(name)

    Logger.info(TAG, `getAccountExtraInfo success`)

    return result

  }



  async getAssociatedData(name: string, key: string) {

    let result = await app.getAssociatedData(name, key)

    Logger.info(TAG, `getAssociatedData success`)

    return result

  }

}

• 接口參考：[@ohos.account.appAccount]，[@ohos.data.preferences]，[@ohos.router]
  • 視頻模塊
    • 使用Navigation,Button，Text,TextInput組件開發注冊，登錄，修改信息和切換應用頁面，createAppAccountManager方法創建應用帳號管理器對象
    • 源碼鏈接：[AccountData.ts]，[AccountModel.ts]
    • 接口參考：[@ohos.account.appAccount]，[@ohos.data.preferences]，[@ohos.router]
  • 地圖模塊
    • 使用Navigation,Button，Text,TextInput組件開發注冊，登錄，修改信息和切換應用頁面，createAppAccountManager方法創建應用帳號管理器對象
    • 源碼鏈接：[AccountData.ts]，[AccountModel.ts]
    • 接口參考：[@ohos.account.appAccount]，[@ohos.data.preferences]，[@ohos.router]

審核編輯 黃宇