精品欧美一区二区三区在线观看 _久久久久国色av免费观看性色_国产精品久久在线观看_亚洲第一综合网站_91精品又粗又猛又爽_小泽玛利亚一区二区免费_91亚洲精品国偷拍自产在线观看 _久久精品视频在线播放_美女精品久久久_欧美日韩国产成人在线

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程

企業動態
本文我們從元服務的基本概念,到我們實用小工具的項目開發,技術剝析,完整的了解了端元一體化開發元服務,以及如何在元服務中集成華為認證服務,到最后完成油價查詢功能在卡片上及時顯示,定位在卡片上實時刷新。

今天我們就來做一個實現自己的一個小工具元服務開發

一、基本概念

  • 元服務(原名原子化服務)是一種基于HarmonyOS API的全新服務提供方式,以HarmonyOS萬能卡片等多種呈現形態,向用戶提供更輕量化的服務。具有即用即走、信息外顯、服務直達的特性。
  • 萬能卡片(簡稱卡片)是一種界面展示形式,可以將應用的重要信息或操作前置到卡片,以達到服務直達、減少體驗層級的目的。
  • ArkUI框架是一套構建分布式應用界面的聲明式UI開發框架,其使用極簡的UI信息語法、豐富的UI組件、以及實時界面預覽工具,幫助開發者提升HarmonyOS應用界面開發效率。
  • AppGallery Connect(簡稱AGC)致力于為應用的創意、開發、分發、運營、經營各環節提供一站式服務,構建全場景智慧化的應用生態體驗。
  • 端云一體化是為豐富HarmonyOS對云端開發的支持、實現HarmonyOS生態端云聯動,DevEco Studio推出了云開發功能,開發者在創建工程時選擇云開發模板,即可在DevEco Studio內同時完成HarmonyOS應用/服務的端側與云側開發。

二、主要功能

本次開發的實用小工具主要功能有:

1.油價查詢,點擊城市列表之后,就可以查看當前城市的油價,包括92,95,98,柴油等。

2.垃圾分類查詢,輸入物品名稱就可以查看垃圾的詳細分類,而不再害怕垃圾分類出錯。

3.當前定位查看,我們可以很方便的知道自己當前的位置信息。

4.提供12,22,24,44卡片。

API版本:API9

應用包名:com.jianguo.utilitybox

三、項目初始化

  • 當前未打開任何工程,單擊DevEco Studio歡迎頁中“Create Project”創建新工程。
  • 當前已打開工程,單擊菜單欄“File > New > Create Project”創建新工程。 首先創建項目,選擇原子化服務,第四個模版端云一體化模版

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS

點擊下一步

這個時候我們需要為工程關聯云開發所需的資源,即在DevEco Studio中選擇您的華為開發者賬號加入的開發者團隊,將該團隊在AGC的同包名應用關聯到當前工程。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_鴻蒙_02鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_鴻蒙_02

然后我們點擊登陸就好

這個時候會來到下面的授權頁面,我們點擊允許就可以。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_04鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_04

單擊“AppGallery Connect”打開AGC應用創建向導,填寫應用信息,單擊“確認”按鈕創建應用

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_05鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_05

我們點擊箭頭這兒就會跳轉到我們的

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_06鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_06

agc頁面。這個時候我們選擇創建項目,然后再創建應用。我之前已經有項目了。所以我們直接在項目里創建應用就可以

比如我這里就選擇

https://developer.huawei.com/consumer/cn/service/josp/agc/index.html#/myProject?appPackageName=com.jianguo.utilitybox&isAtomic=1

下面這個就可以

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_鴻蒙_07鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_鴻蒙_07

然后就會跳轉到設置位置處理頁面

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_鴻蒙_08鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_鴻蒙_08

我們點擊下一步就會到下面的添加應用界面,然后我們只需要填寫應用名稱就可以,其他的都會默認,如果默認失敗的話,我們就設置應用包名:com.jianguo.utilitybox

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_09鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_09

然后確定

這個時候就會有恭喜您!

應用創建已完成。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_鴻蒙_10鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_鴻蒙_10

我們選擇前往控制臺,然后來到Severless這一塊。把我們需要的認證服務,云函數,云數據庫,云緩存,云存儲,統統打開。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_11鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_11

我們回到IDE繼續開發,點擊Finsh就可。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_12鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_12

出現這個,我們ok就可以。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_13鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_13

然后大家可以看到工程配置完成

成功創建工程并關聯云開發資源后,DevEco Studio會為工程自動執行一些初始化配置,并開通云開發相關服務:認證服務、云函數、云數據庫、云托管、API網關、云存儲。,所以上面我們在控制臺的操作其實也可以不用操作。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_14鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_14

端側工程自動集成AGC SDK,包括AGC SDK 配置文件entry/src/main/resources/rawfile/agconnect-services.json 和在entry/oh-package.json5配置文件中引入的AGC相關云服務最新版本SDK。

"dependencies": {
    "@hw-agconnect/crypto-ohos": "^1.0.10",
    "@hw-agconnect/function-ohos": "^1.0.10",
    "@hw-agconnect/auth-ohos": "^1.0.10",
    "@hw-agconnect/cloudstorage-ohos": "^1.0.10",
    "@hw-agconnect/api-ohos": "^1.0.10",
    "@hw-agconnect/base-ohos": "^1.0.10",
    "@hw-agconnect/core-ohos": "^1.0.10",
    "@hw-agconnect/credential-ohos": "^1.0.10",
    "@ohos/agconnect-auth-component": "^1.0.5",
    "long": "5.2.1"
  }

云側工程自動集成云數據庫最新版本Node.js Server SDK。

/Users/jianguo/Desktop/teaching/utilitybox/CloudProgram/cloudfunctions/idgenerator/package.json

"dependencies": {
    "@agconnect/database-server": "^1.0.7"
  }
}

四、端云一體化開發

大家都知道我這次用的是端云一體化開發,那那么我們就有必要來了解一下端云協同的目錄結構

端云一體化開發工程目錄分為三個子工程:如下圖所示:

端開發工程(Application)

云開發工程(CloudProgram)

端側公共庫(External Libraries)

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_15鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_15

4.1端開發工程(Application)

端開發工程主要用于開發應用端側的業務代碼,端開發工程目錄結構如下:

端側的目錄和之前大家看到的文件目錄結構都差不多

- Application
    - AppScope
        app.json5    // 應用的全局配置信息
    - entry           // 應用/服務模塊,編譯構建生成一個HAP
        oh_modules   // 用于存放三方庫依賴信息
        - src/main
            - ets    // 用于存放ArkTS源碼
            - resources    // 用于存放應用/服務所用到的資源文件
            module.json5    // Stage模型配置文件
        build-profile.json5    // 當前模塊信息、編譯信息配置項
        hvigorfile.ts          // 模塊級編譯構建任務腳本
        oh-package.json5        // 配置三方包聲明的入口及包名
    build-profile.json5    // 應用配置信息,包括簽名、產品配置等
    hvigorfile.ts          // 應用級編譯構建任務腳本

4.2云開發工程(CloudProgram)

云開發工程中開發者可以為應用開發云函數和云數據庫服務資源,云開發工程目錄結構如下:

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_鴻蒙_16鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_鴻蒙_16

- CloudProgram
    - clouddb    // 云數據庫工程目錄
        dataentry    // 用于存放數據條目文件
        objecttype    // 用于存放對象類型文件
        db-config.json    // 模塊配置文件
    - cloudfunctions    // 云函數工程目錄
        node_modules    // 包含所有三方依賴
        cloud-config.json    // 云開發工程配置文件
        package.json    // 定義了TypeScript公共依賴

五、云函數開發指南

5.1創建函數

在云端工程(CloudProgram)中可以創建函數、編寫函數業務代碼、為函數配置調用觸發器。

1.單擊“cloudfunctions”目錄,選擇“New > Cloud Function”創建云函數。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_17鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_17

2.輸入函數名稱,單擊“OK”按鈕DevEco Studio自動生成函數目錄。函數名稱僅支持小寫英文字母、數字、中劃線(-),首字母必須為小寫字母,結尾不能為中劃線(-)。

比如add。

3.云函數目錄結構。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_鴻蒙_18鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_鴻蒙_18

4.云函數觸發器

云函數觸發器在function-config.json文件中triggers屬性中配置,當前支持HTTP觸發器、CLOUDDB觸發器、AUTH觸發器、CLOUDSTORAGE觸發器、CRON觸發器五種。

  • HTTP觸發器

工程創建完成后默認自動在function-config.json文件生成HTTP觸發器配置。函數部署到云端后會自動生成觸發URL,開發者向URL發起HTTP請求時觸發函數。

{
  "handler": "IdGenerator.myHandler",
  "triggers": [
    {
      "type": "http",
      "properties": {
        "enableUrlDecode": true,//通過HTTP觸發器觸發函數,對于contentType為“application/x-www-form-urlencoded”的觸發請求,是否使用URLDecoder對請求body進行解碼再轉發到函數中。true:啟用。false:不啟用。
        "authFlag": "true",//是否鑒權,默認為true。
        "authAlgor": "HDA-SYSTEM",//鑒權算法,默認為HDA-SYSTEM。
        "authType": "apigw-client",//HTTP觸發器的認證類型。apigw-client:端側網關認證,適用于來自APP客戶端側的函數調用。 cloudgw-client:云側網關認證,適用于來自APP服務器側的函數調用
        "mode": "NO_PATH"
      }
    }
  ]
}

5.2開發云函數

云函數的代碼實現基于不同的語言運行環境可分為Node.js、Java、Python,還有一種比較特別運行環境為Custom Runtime(自定義運行環境)。本工程的語言運行環境為Node.js。

1.云函數的入口方法:

module.exports.myHandler = function(event, context, callback, logger)
  • myHandler:入口方法名稱。
  • event:調用方傳遞的事件對象,JSON格式。
  • context:函數運行時上下文對象,封裝了日志接口、回調接口、環境變量env對象等。
  • callback:事件處理結果。
  • logger:記錄日志。開發者在代碼中使用
  • logger接口記錄日志,當前支持四種級別。

logger.debug()

logger.error()

logger.warn()

logger.info()

函數必須通過顯示調用callback(object)將事件處理結果返回給AGC,結果可以是任意對象,但必須與JSON.stringify兼容,AGC會將結果轉換成JSON字符串,返回給調用方。callback執行完成后,函數即執行結束。

2.為云函數添加返回內容

let myHandler = async function (event, context, callback, logger) {
  logger.info(event);

  // do something here

  callback({
    code: 0,
    desc: "Success."
  });
};

export { myHandler };

3.調試云函數 函數開發過程中,開發者可在本地進行調試,或者將函數部署到AGC云端后,在本地觸發調用云端函數。當前本地調試支持Run和Debug兩種模式,Debug模式支持使用斷點來追蹤函數的運行情況。

  • 本地云函數調試,單擊"cloudfunctions > Run/Debug Cloud Function"運行/調試云函數

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_19鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_19

查看Run面板,若出現“Cloud Functions loaded successfully”,標識云函數啟動成功(云函數啟動/調試將部署cloudfunctions中所有的云函數),并生成對應的POST URL。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_20鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_20

在菜單欄選擇“Tools > CloudDev > Cloud Functions Requestor”觸發云函數調用

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_21鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_21

在彈出的云函數調用界面填寫觸發事件參數。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_22鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_22

  • Environment:選擇函數調用環境,Local表示本地調用,Remote表示遠程調用(需要先將函數部署到AGC云端)。
  • Cloud Function:選擇需要觸發的云函數。
  • Event:輸入事件參數,內容為JSON格式請求體數據。單擊Trigger按鈕,觸發執行云函數,執行結果展示在Result框內,Run面板同時打印運行日志。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_23鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_23

部署云函數 完成函數代碼開發后,開發者可將函數部署到AGC控制臺,支持單個部署和批量部署。

  • 右鍵單擊需要部署的函數目錄,選擇“Deploy Cloud Functions”。
  • 底部狀態欄右側將顯示函數打包與部署進度,直至出現“Deploy successfully”消息表示函數部署成功。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_25鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_25

登錄AGC控制臺,進入當前項目的云函數服務菜單,可查看開發者部署的函數。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_26鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_26

遠程函數測試 在“Cloud Functions Reuestor”面板中,更改Environment為Remote遠程調用,單擊“Trigger”按鈕,在Result中顯示返回結果。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_鴻蒙_27鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_鴻蒙_27

當開發者創建的函數或函數別名中創建一個HTTP類型的觸發器后,在應用客戶端調用函數時需要傳入HTTP觸發器的標識,查詢方法如下: 在函數的觸發器頁面點擊“HTTPTrigger”觸發器,查看“觸發URL”的后綴,獲取觸發器標識,格式為“函數名-版本號”。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_28鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_28

5.3調用云函數

應用集成云函數SDK后,可以在應用內直接通過SDK API調用AGC中的云函數,云函數SDK與AGC的函數調用基于HTTPS的安全訪問。

在端側應用(Application)中“entry > src/main/ets > services”目錄創建SudokuAlgorithmFunction.ts文件,編寫調用云函數方法。

Button('請求自定義云函數')
  .fontSize(16)
  .onClick(() => {
    getSudokuPuzzle(getContext(this)).then((ret) => {
      Log.info(Constants.LOG_TAG_NAME, `單擊按鈕調用云函數返回結果: ${JSON.stringify(ret)}`)
    })
  })

然后我們簽名,在真機中

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_29鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_29

六、華為認證服務

當前AGC認證服務為HarmonyOS應用/服務提供的登錄認證方式有手機、郵箱和關聯賬號三種方式。本工程使用“郵箱+驗證碼”的方式作為應用的登錄入口。我們這次使用的是手機號碼登錄

需要在AGC控制臺開通認證服務(工程創建時默認開通),并在“認證方式”頁簽中啟用“郵箱地址”。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_鴻蒙_30鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_鴻蒙_30

調用PhoneUserBuilder生成PhoneUser,然后調用PhoneAuthProvider.credentialWithVerifyCode注冊用戶。注冊成功后,系統會自動登錄,無需再次調用登錄接口。也可以使用signIn登錄接口,通過第三方認證來登錄AGConnect平臺,在entry/src/main/ets/services/Auth.ts認證工具類中添加郵箱賬號注冊用戶方法。

public async login(countryCode: string, phoneNumber: string, verifyCode: string): Promise<AgUser> {
        return new Promise((resolve, reject) => {
            const credential = PhoneAuthProvider.credentialWithVerifyCode(countryCode, phoneNumber, verifyCode);
            this.agc.auth().signIn(credential).then(async (ret) => {
                Log.info(TAG, "User has signed in..");
                // @ts-ignore
                let user = ret.getUser();
                let userExtra = await ret.getUser().getUserExtra();

                let loginRes = new AgUser(
                user.getUid(),
                user.getPhotoUrl(),
                user.getPhone(),
                user.getDisplayName(),
                userExtra.getCreateTime(),
                userExtra.getLastSignInTime())

                resolve(loginRes);
            }).catch((error) => {
                Log.error(TAG, "Error: ", error);
                reject(error);
            });
        });
    }

6.1構建手機登錄頁面

通過容器組件Flex、Row、Column以及基礎組件Text、Image、Button、Navigation、TextInput,構建手機驗證碼登錄頁面。

Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text($r('app.string.auth_dialog_title'))
        .fontSize($r('app.float.navigation_font_size'))
        .margin({ bottom: Constants.LENGTH_20_PX })

      Flex({ direction: FlexDirection.Row }) {

        Select(mockData)
          .font({ size: $r('app.float.body_font_size') })
          .selectedOptionFont({ size: $r('app.float.body_font_size') })
          .optionFont({ size: $r('app.float.body_font_size') })
          .value(this.countryCode)
          .layoutWeight(Constants.LENGTH_1_PX)
          .backgroundColor($r('app.color.placeholder_background'))
          .borderRadius(Constants.BORDER_RADIUS_4_PX)
          .height(Constants.HEIGHT_40)
          .onSelect((_, val) => {
            this.countryCode = val.substring(0, val.length - 4);
          })


        TextInput({ placeholder: $r('app.string.auth_dialog_number_placeholder') })
          .layoutWeight(Constants.LENGTH_3_PX)
          .margin({ left: Constants.LENGTH_5_PX })
          .borderRadius(Constants.BORDER_RADIUS_4_PX)
          .maxLength(Constants.LENGTH_20_PX)
          .height(Constants.HEIGHT_40)
          .enabled(this.timer === 60)
          .onChange((val) => {
            this.phoneNumber = val;
          })

      }
      .margin({ bottom: Constants.LENGTH_20_PX })

      Flex({ direction: FlexDirection.Row }) {
        TextInput({ placeholder: $r('app.string.auth_dialog_code_placeholder'), text: this.verificationCode })
          .layoutWeight(Constants.LENGTH_3_PX)
          .margin({ right: Constants.LENGTH_5_PX })
          .borderRadius(Constants.BORDER_RADIUS_4_PX)
          .maxLength(Constants.LENGTH_6_PX)
          .height(Constants.HEIGHT_40)
          .onChange((val) => {
            this.verificationCode = val;
          })

        Button(this.timer === 60 ? $r('app.string.auth_dialog_get_code_button_text') : this.timer.toString(), {
          type: ButtonType.Normal
        })
          .backgroundColor($r('app.color.start_window_background'))
          .layoutWeight(Constants.LENGTH_2_PX)
          .borderColor($r('app.color.action_button_background'))
          .borderWidth(Constants.LENGTH_1_PX)
          .fontColor($r('app.color.action_button_background'))
          .borderRadius(Constants.BORDER_RADIUS_4_PX)
          .margin({ left: Constants.LENGTH_5_PX })
          .height(Constants.HEIGHT_40)
          .enabled(this.canGetCode() && this.timer === 60)
          .onClick(() => this.onGetCodeButtonClicked())
      }
      .margin({ bottom: Constants.LENGTH_20_PX })


      Button($r('app.string.auth_dialog_auth_button_text'), { type: ButtonType.Normal })
        .width(Constants.PERCENT_100)
        .borderRadius(Constants.BORDER_RADIUS_4_PX)
        .backgroundColor($r('app.color.action_button_background'))
        .enabled(this.canAuthorize() && this.verificationCode.length > 5 && this.canLogin)
        .opacity(this.canLogin ? 1 : 0.5)
        .height(Constants.HEIGHT_40)
        .onClick(() => this.onAuthButtonClicked())

    }
    .height(Constants.PERCENT_50)
    .padding({ right: Constants.LENGTH_20_PX, left: Constants.LENGTH_20_PX })
  }
-----------------------------------
?著作權歸作者所有:來自51CTO博客作者是堅果呀的原創作品,請聯系作者獲取轉載授權,否則將追究法律責任
鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程
https://blog.51cto.com/jianguo/6971001

6.2 用戶登錄成功信息寫入緩存

調用自定義的登錄接口實現登錄,并使用首選項自定義工具接口將用戶信息寫入緩存。,這樣下次進入之后,就可以進行對應的邏輯判斷。執行對應的流程。

onAuthButtonClicked() {
    this.canLogin = false;
    this.agcAuth.login(this.countryCode, this.phoneNumber, this.verificationCode).then(user => {
      AppStorage.Set<AgUser>('user', user);
      PreferencesUtil.putPreference(getContext(this), Constants.USER_AUTH_INFO, JSON.stringify(user));
      Log.info(TAG, "Logged in succesfully.");
      this.canLogin = true;
      router.replaceUrl({
        url: "pages/MainPage"
      })
    }).catch((err) => {
      this.canLogin = true;
      Log.error(TAG, "Logged in failed " + JSON.stringify(err));
      AlertDialog.show({
        title: $r('app.string.common_prompt'),
        message: $r('app.string.common_login_fail'),
      });
    });
  }

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_31鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_31

七、元服務開發

元服務 (原為"原子化服務") 是一種基于HarmonyOS API的全新服務提供方式,以鴻蒙萬能卡片等多種呈現形態, 向用戶提供更輕量化的服務。具有即用即走、信息外顯、服務直達的特性。

萬能卡片(以下簡稱“卡片”)是一種界面展示形式,可以將應用的重要信息或操作前置到卡片,以達到服務直達、減少體驗層級的目的。卡片常用于嵌入到其他應用(當前卡片使用方只支持系統應用,如桌面)中作為其界面顯示的一部分,并支持拉起頁面、發送消息等基礎的交互功能。

下面是我們開發卡片時候的實現原理

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_鴻蒙_32鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_鴻蒙_32

這里涉及的幾個知識點給大家介紹一下

  • 卡片使用方:顯示卡片內容的宿主應用,控制卡片在宿主中展示的位置。
  • 卡片提供方:提供卡片顯示內容的應用,控制卡片的顯示內容、控件布局以及控件點擊事件。
  • 卡片管理服務:用于管理系統中所添加卡片的常駐代理服務。
  • 卡片渲染服務:用于管理卡片渲染實例,渲染實例與卡片使用方上的卡片組件一一綁定。

ArkTS卡片提供了postCardAction()接口用于卡片內部和提供方應用間交互,當前支持router、message和call三種類型的事件,僅在卡片中可以調用。這個我們在查詢油價,以及處理message跳轉的時候會用到。大家繼續往后看就可以。

7.1油價查詢(2*2)

這里我們需要學習的知識點在于卡片的創建,以及卡片數據如何交互。

創建ArkTS卡片有兩種方式:

  • 通過在”entry“目錄右鍵單擊“New > Service Widget”創建卡片。
  • 通過在”entry > src/main/ets > widget > pages“目錄右鍵單擊“New > ArkTS File”創建文件,并在卡片配置文件form_config.json中配置卡片信息。

使用第二種方式創建卡片,在”entry > src/main/ets > widget > pages“目錄右鍵單擊“New > ArkTS File”創建RubbishWidgetCard.ets文件,接著打開"entry > src/main/resources > base > profile"目錄下的form_config.json文件,配置名稱為rubbish的2*2卡片

這樣的話,我們的卡片就算創建完成了,

Column() {
      Row() {
        Image($r("app.media.rubbish")).width(this.Image_WIDTH_PERCENT).margin({
          right: 5
        })
        Text(this.TITLE)
          .fontSize($r('app.float.font_size'))
          .fontWeight(FontWeight.Bold)
          .fontColor($r('app.color.item_title_font'))
      }
    }
    .width(this.FULL_WIDTH_PERCENT)
    .backgroundColor($r("app.color.emuiLow4_alpha"))

    .height(this.FULL_HEIGHT_PERCENT)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      postCardAction(this, {
        "action": this.ACTION_TYPE,
        "abilityName": this.ABILITY_NAME,
        "params": {
          "targetPage": this.MESSAGE
        }
      });
    })
  }

但是要實現卡片數據的更新

ArkTS卡片框架提供了updateForm()接口和requestForm()接口主動觸發卡片的頁面刷新。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_33鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_33

卡片中需要使用@LocalStorageProp裝飾器接收。


@LocalStorageProp("puzzles") puzzles: Array<Array<number>> = [];
@LocalStorageProp("answers") answers: Array<Array<Array<number>>> = [];

然后,我們以更新深圳的天氣為例,在/src/main/ets/entryformability/EntryFormAbility.ts寫寫對應的請求事件。

upData(formId :string){
    let formInfo = formBindingData.createFormBindingData({
      'text': '刷新中...'
    })
    formProvider.updateForm(formId, formInfo)
    console.info('Result:的結果' + JSON.stringify(formId));
    let httpRequest = http.createHttp();
    httpRequest.request(Constants.OILSERVER, {
      method: http.RequestMethod.GET,
      readTimeout: Constants.HTTP_READ_TIMEOUT,
      connectTimeout: Constants.HTTP_READ_TIMEOUT
    , extraData: {
        'province': "深圳",
        'app_id': Constants.APPID,
        'app_secret': Constants.APPSECRET

      },
    }, (err, data) => {
      if (!err) {
        // data.result為HTTP響應內容,可根據業務需要進行解析
        console.info('Result:的結果' + JSON.stringify(data.result));
        let OilModel: OilModel = JSON.parse(data.result.toString())
        // 注意:FormExtensionAbility在觸發生命周期回調時被拉起,僅能在后臺存在5秒
        // 建議下載能快速下載完成的小文件,如在5秒內未下載完成,則此次網絡圖片無法刷新至卡片頁面上
        let formData = {
          'oil': OilModel.data,
          'loaded': true,
          "time": getTime()

        };
        let formInfo = formBindingData.createFormBindingData(formData)
        formProvider.updateForm(formId, formInfo).then((data) => {
          console.info('FormAbility updateForm success.' + JSON.stringify(data));
        }).catch((error) => {
          console.error('FormAbility updateForm failed: ' + JSON.stringify(error));
        })
        // 當該請求使用完畢時,調用destroy方法主動銷毀
        httpRequest.destroy();
      } else {
        console.info('error:' + JSON.stringify(err));
        // 取消訂閱HTTP響應頭事件
        httpRequest.off('headersReceive');
        // 當該請求使用完畢時,調用destroy方法主動銷毀
        httpRequest.destroy();
      }
    }

    );
  }

然后我們在onUpdateForm中去調用就可以啦。

onUpdateForm(formId) {
    this.upData(formId)

    // Called to notify the form provider to update a specified form.
  }

這樣我們就完成了對油價的查詢。

這里我們主要了解的就是對卡片事件能力的處理。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_34鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_34

接口定義:postCardAction(component: Object, action: Object): void

接口參數說明:

action參數說明:

7.1.1通過message事件刷新卡片內容

.onClick(() => {
            postCardAction(this, {
              'action': 'message',
              'params': {
                'info': 'refreshImage'
              }
            });
          })

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_35鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_35

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_36鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_36

7.2垃圾分類(1*2)

這里實現的功能是點擊卡片之后,進入垃圾分類查詢頁的詳情。輸入物品名稱。就可以查看具體的垃圾分類信息。

7.2.1使用router事件跳轉到指定UIAbility

.onClick(() => {
  postCardAction(this, {
   'action': 'router',
    'abilityName': 'EntryAbility',
    "params": {
      "targetPage": this.MESSAGE
    }
  });
})

然后我們在src/main/ets/entryability/EntryAbility.ts中處理對應的邏輯。

onCreate(want) {


  console.info("onCreate want:" + JSON.stringify(want));
  if (want.parameters.params !== undefined) {
    let params = JSON.parse(want.parameters.params);
    hilog.info(0x0000, 'tonCreate router targetPage', '%{public}s', params.targetPage)
    console.info("onCreate router targetPage:" + params.targetPage);
    selectPage = params.targetPage;
  }
}

如果UIAbility已在后臺運行,在收到Router事件后會觸發onNewWant生命周期回調

onNewWant(want, launchParam) {

根據傳遞的targetPage不同,選擇拉起不同的頁面

這樣我們就完成了跳轉。

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_37鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_37

7.3當前定位(2*2)

點擊卡片之后,進入定位展示的詳情頁,展示當前的詳細定位。

主要技術,動態權限的獲取。

7.3.1動態權限獲取首先需要在module.json中聲明對應權限

然后在ets/entryability/EntryAbility.ts中添加動態權限的申請

然后我們編寫卡片代碼

Column() {
      Text("你想知道")
        .fontSize($r('app.float.title_immersive_font_size'))
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .fontColor($r('app.color.text_font_color'))
        .maxLines(this.MAX_LINES)
      Text("你當前的位置嗎")
        .fontSize("14fp")
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .fontColor($r('app.color.text_font_color'))
        .maxLines(this.MAX_LINES)
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .padding($r('app.float.column_padding'))

    .width(this.FULL_WIDTH_PERCENT)
    .height(this.FULL_HEIGHT_PERCENT)
    .backgroundColor($r('app.color.emuiLow2_alpha'))
    .onClick(() => {
      postCardAction(this, {
        "action": this.ACTION_TYPE,
        "abilityName": this.ABILITY_NAME,
        "params": {
          "targetPage": this.MESSAGE
        }
      });
    })
  }
-----------------------------------
?著作權歸作者所有:來自51CTO博客作者是堅果呀的原創作品,請聯系作者獲取轉載授權,否則將追究法律責任
鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程
https://blog.51cto.com/jianguo/6971001

運行之后的效果

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_39鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_39

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_40鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_開發者_40

鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_41鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程_HarmonyOS_41

八、總結

本文我們從元服務的基本概念,到我們實用小工具的項目開發,技術剝析,完整的了解了端元一體化開發元服務,以及如何在元服務中集成華為認證服務,到最后完成油價查詢功能在卡片上及時顯示,定位在卡片上實時刷新。以及點擊卡片分類,還可以進入詳情頁查詢更多物品的垃圾屬性,以及動態權限的獲取。

你可以學到的有

1.了解元服務的基本概念

2.使用端云一體化開發、開發云函數、開發云數據庫,集成華為認證服務。

3.使用FormExtensionAbility創建、更新、刪除元服務卡片。

4.使用router、message和call三種類型的事件,處理對應邏輯。


?著作權歸作者所有:來自51CTO博客作者是堅果呀的原創作品,請聯系作者獲取轉載授權,否則將追究法律責任鴻蒙入門開發教程:一文帶你詳解工具箱元服務的開發流程https://blog.51cto.com/jianguo/6971001

責任編輯:張燕妮 來源: 51CTO博客
相關推薦

2023-08-09 15:09:26

端云一體化云端開發

2021-05-29 10:11:00

Kafa數據業務

2015-05-27 14:26:05

2022-05-16 10:49:28

網絡協議數據

2025-04-09 08:25:20

2024-06-27 10:50:01

2011-11-16 13:58:12

Adobe AIR

2024-10-08 08:52:59

2022-05-11 11:54:55

Http傳送協議

2010-01-25 14:04:17

Android Wid

2018-11-13 09:56:52

TomcatServerWeb應用服務器

2022-11-09 09:15:31

ProtoBufGo語言

2020-05-20 14:19:47

滴滴開源工具

2023-11-20 08:18:49

Netty服務器

2022-12-20 07:39:46

2023-12-21 17:11:21

Containerd管理工具命令行

2023-07-31 08:18:50

Docker參數容器

2022-11-11 19:09:13

架構

2023-11-06 08:16:19

APM系統運維

2025-07-04 09:05:35

點贊
收藏

51CTO技術棧公眾號

欧美videos大乳护士334| 国产精品天天摸av网| 欧美裸体男粗大视频在线观看 | 国内精品不卡在线| 欧美精品激情在线观看| 一级性生活毛片| 国产成人精品一区二区三区免费| 亚洲免费高清视频在线| 精品乱子伦一区二区三区| 销魂美女一区二区| 欧美色123| 在线激情影院一区| 在线天堂www在线国语对白| 日韩一级二级| 亚洲国产精品麻豆| 亚洲欧美精品在线观看| 人妻少妇精品无码专区| 久久99国产精品免费| 欧美一区在线直播| 黄色片在线观看网站| 国产乱码精品一区二区亚洲 | 亚洲第一色av| 日本午夜大片a在线观看| 国产精品久久久久久久久久免费看| 成人欧美视频在线| 中文字幕在线播出| 免费亚洲婷婷| 国语自产精品视频在线看| 三级黄色录像视频| 国内精品久久久久久99蜜桃| 精品国产乱码91久久久久久网站| 亚洲国产成人va在线观看麻豆| 人在线成免费视频| 亚洲www啪成人一区二区麻豆| 欧美h视频在线观看| 高清美女视频一区| 久久综合久久综合九色| 国产伦精品一区二区三区四区免费 | 中文字幕久久久久久久| 精品国产黄a∨片高清在线| 精品久久久国产精品999| 久久久久久久久网| 动漫一区在线| 中文字幕一区二区三| 日本一区二区不卡高清更新| 男女污污视频网站| 日韩新的三级电影| 欧美日韩激情美女| 丰满少妇大力进入| 欧美人与禽性xxxxx杂性| 亚洲欧美色图小说| 天天做天天爱天天高潮| 色影视在线观看| 国产精品人成在线观看免费| 日本在线观看一区二区三区| 欧美大片aaa| 久久久影视传媒| 欧美日韩一区综合| 久色视频在线| 中文字幕欧美激情一区| 天堂一区二区三区| 91精品大全| 中文字幕亚洲一区二区av在线| 一区二区三区av| 毛片在线视频| 亚洲精品欧美二区三区中文字幕| 亚洲视频精品一区| 搞黄网站在线观看| 亚洲一区影音先锋| 日本中文字幕网址| 日韩电影免费观看高清完整版| 91福利区一区二区三区| 亚洲一区在线不卡| 一区二区三区无毛| 日韩欧美国产wwwww| 精品久久久久久无码人妻| 麻豆国产一区| 精品国产网站在线观看| 添女人荫蒂视频| 欧州一区二区| 另类天堂视频在线观看| 丝袜 亚洲 另类 欧美 重口| 黄色成人av网站| 欧美一区二区三区四区在线| 中文字幕精品一区二| 精品一区二区三区香蕉蜜桃| 91成人在线看| 免费国产在线观看| 日韩毛片一二三区| 美脚丝袜脚交一区二区| 欧美特大特白屁股xxxx| 欧美猛男gaygay网站| 任你躁av一区二区三区| 亚洲影院天堂中文av色| xvideos成人免费中文版| 久久国产精品波多野结衣| 亚欧成人精品| 亚洲伊人久久大香线蕉av| 天天综合天天综合| 成人欧美一区二区三区视频网页| 九九热只有这里有精品| 99riav视频一区二区| 精品久久久久久久人人人人传媒 | 1024成人网| 97超碰在线人人| 日本一区二区三区视频在线| 精品国产一区二区国模嫣然| 一级片久久久久| 亚洲国产午夜| 成人精品一区二区三区电影黑人| 天天干在线观看| 综合激情成人伊人| 成人性视频欧美一区二区三区| 亚洲高清999| 中文字幕欧美亚洲| 国产综合精品视频| 国产成人精品影视| 亚洲人成77777| xx欧美xxx| 精品国产伦一区二区三区观看体验| 黑人と日本人の交わりビデオ| 99精品福利视频| 91九色蝌蚪成人| 蜜芽在线免费观看| 91高清在线观看| 中文字幕乱码在线| 黄色亚洲大片免费在线观看| 国产精品亚洲自拍| 国产三级在线| 欧美日韩在线视频一区| 一级黄色高清视频| 久久免费精品视频在这里| 26uuu国产精品视频| 亚洲精品视频网| 亚洲欧美激情视频在线观看一区二区三区 | 91精品视频免费| jizz在线观看中文| 欧美午夜影院一区| av男人的天堂av| 99在线|亚洲一区二区| 成人午夜电影在线播放| 中文字幕伦理免费在线视频| 欧美丰满美乳xxx高潮www| 国产男男chinese网站| 国产精品日韩精品欧美精品| 精品久久久久久乱码天堂| 97在线视频免费观看完整版| 精品国产免费视频| 日本天堂在线视频| 成人app下载| 分分操这里只有精品| 8x国产一区二区三区精品推荐| 欧美大肥婆大肥bbbbb| 国产suv精品一区二区69| 一色桃子久久精品亚洲| 色国产在线视频| 天天超碰亚洲| 97超级碰碰| 国产在线拍揄自揄拍视频| 欧美不卡一区二区三区| 日本免费在线播放| 成a人片国产精品| 久久精品免费一区二区| 青草久久视频| 国产精品久久久久久搜索| aaa在线观看| 51午夜精品国产| 欧美精品一区二区成人| 成人污污视频在线观看| 欧美 日韩 激情| 精品久久91| 成人网在线视频| 日本动漫同人动漫在线观看| 亚洲福利视频网站| 国产伦精品一区二区三区视频网站| 国产目拍亚洲精品99久久精品 | 国产精品1区2区3区在线观看| 欧美美女黄色网| 极品束缚调教一区二区网站 | 97超碰免费观看| 成人性生交大片免费看96| 欧美怡红院视频一区二区三区 | 欧美国产乱子伦 | 成人动漫av在线| 国产成人精品无码播放| 国产国产精品| 国产一区免费视频| 欧美国产日韩电影| 欧美华人在线视频| 你懂得在线网址| 91精品国产aⅴ一区二区| 日韩av在线天堂| 国产精品久久毛片| 欧产日产国产精品98| 蜜乳av一区二区三区| 日韩久久久久久久久久久久| 久操成人av| 91欧美激情另类亚洲| 自拍网站在线观看| 免费91麻豆精品国产自产在线观看| 熟妇人妻系列aⅴ无码专区友真希| 欧洲一区在线观看| 99日在线视频| 99精品国产一区二区青青牛奶| 手机在线观看国产精品| av在线亚洲色图| 国产精品视频专区| 涩涩视频在线免费看| 久久伊人色综合| 国产精品影院在线| 亚洲国产精品视频在线观看| 国产精品污视频| 一级黄色大片网站| 亚洲少妇最新在线视频| 91精品国产自产| 国产成人亚洲综合a∨婷婷图片 | 欧美人与禽zoz0善交| 成人免费视频视频| 超碰91在线播放| 日本不卡在线视频| 日韩少妇内射免费播放18禁裸乳| 91精品高清| 手机看片福利永久国产日韩| 婷婷国产精品| 国产精品xxx在线观看www| 台湾天天综合人成在线| 国产高清视频一区三区| 国产污视频在线播放| 欧美激情中文字幕在线| 国产黄大片在线观看画质优化| 国产一区av在线| 可以在线观看的av| 亚洲欧美日韩精品久久| 少妇高潮久久久| 欧美va亚洲va| 国产一区二区播放| 亚洲视频网在线直播| 91视频最新网址| 国产精品丝袜久久久久久app| 亚洲av综合一区二区| 91麻豆免费在线观看| 国产人妻777人伦精品hd| 亚洲精品a级片| 日本一区二区三区四区五区六区| 日韩一区二区三区免费播放| 色乱码一区二区三在线看| 国产调教一区二区三区| 欧美日韩国产精品一区二区| 一区二区三区韩国免费中文网站| 久精品国产欧美| 亚洲国产合集| 欧洲av一区| 精品久久久久久久久久久下田| 欧美一区免费视频| 北条麻妃国产九九九精品小说 | 国产97色在线|日韩| 台湾佬成人网| 国产精品一二三视频| 在线观看欧美| 亚洲一区二区中文字幕| 91久久精品无嫩草影院| 国产v亚洲v天堂无码| 久久久免费毛片| 欧美国产综合视频| 日本一二区不卡| 亚洲免费视频播放| 国内精品久久久久久久影视蜜臀| www.av中文字幕| 日韩中文字幕区一区有砖一区 | 一本—道久久a久久精品蜜桃| 国产精品毛片一区二区在线看| 国产手机视频在线观看| 在线成人黄色| 玩弄japan白嫩少妇hd| 日本午夜一本久久久综合| 成年人网站av| 不卡免费追剧大全电视剧网站| 中文字幕在线看高清电影| 中文字幕制服丝袜一区二区三区| 久久r这里只有精品| 富二代精品短视频| 中文字幕在线观看高清| 日韩精品一区二区三区四区| 三级理论午夜在线观看| 色噜噜狠狠狠综合曰曰曰88av| 欧美伦理免费在线| 国产精品久久久久福利| 亚洲国产aⅴ精品一区二区| 久久国产精品一区二区三区四区| 欧美色就是色| 国产毛片久久久久久国产毛片| 天堂av在线一区| 老女人性生活视频| 国产午夜亚洲精品理论片色戒| 国产午夜手机精彩视频| 精品国产乱码久久久久久婷婷| 91成年人视频| 精品偷拍各种wc美女嘘嘘| 黄色在线免费网站| 日本精品视频在线观看| 亚洲超碰在线观看| 亚洲精品一区国产精品| 激情综合电影网| 亚洲理论中文字幕| 久久久精品黄色| 精品无码久久久久久久久| 欧美视频一区在线| 手机看片1024日韩| 欧美成人第一页| 亚洲精品555| 精品一区2区三区| 亚洲午夜激情在线| 国产一级片自拍| 久久精品网站免费观看| 精品一区免费观看| 欧美一区日韩一区| 91在线不卡| 欧美在线不卡区| 国产+成+人+亚洲欧洲在线| 久久久一二三四| 免费在线成人网| 日本激情小视频| 精品动漫一区二区三区| 亚洲av无码乱码国产麻豆| 日日骚久久av| 97欧美成人| 色一情一乱一伦一区二区三区丨 | 黄色片一区二区| 欧美精品一区在线播放| 57pao成人永久免费| 亚洲日本欧美在线| 麻豆一区二区在线| xxx在线播放| 色吊一区二区三区| 男男电影完整版在线观看| 88xx成人精品| 日日天天久久| 黄色影院一级片| 99热这里都是精品| 国产成人无码精品亚洲 | 国产视频网站在线| 国产ts一区二区| 沈樵精品国产成av片| 久久综合久久色| 国产欧美日产一区| 一级黄色av片| 中文字幕在线成人| 欧洲亚洲精品| 免费观看国产视频在线| 国产一区二区三区久久悠悠色av| 小泽玛利亚一区| 日韩亚洲电影在线| 黄色大片在线| 黄色99视频| 先锋影音久久久| 在线免费观看视频| 欧美日韩国产123区| 99久久精品免费观看国产| 51成人做爰www免费看网站| 国产精品啊啊啊| 91精品小视频| 色天天综合色天天久久| 成人欧美亚洲| 91最新国产视频| 在线高清一区| 国产又大又粗又爽的毛片| 欧美日韩国产一区| 黄色网址免费在线观看| 国产91精品入口17c| 一区二区高清| 人与嘼交av免费| 欧美一区二区三区色| 岛国av在线播放| 五月天亚洲综合| 国产传媒久久文化传媒| 午夜影院在线看| 最近2019中文字幕在线高清 | 精品三级在线观看| 午夜伦理福利在线| 亚洲一区二区三区涩| 国产成人午夜99999| 黄色片免费观看视频| 最新中文字幕亚洲| 超碰成人在线观看| 99视频精品免费| 一区二区三区在线免费视频| 亚洲欧美一区二区三| 成人免费在线视频网站| 亚洲精品1234| 久久av红桃一区二区禁漫| 亚洲成色777777女色窝| 国产a亚洲精品| 国自产拍偷拍精品啪啪一区二区 | 久草国产在线观看| 亚洲人成电影在线播放| 精品99re| 成人午夜激情av| 性做久久久久久免费观看欧美| 9191在线| 欧美日韩在线播放一区二区|