堅(jiān)果派由堅(jiān)果創(chuàng)建，團(tuán)隊(duì)擁有 12 個(gè)華為 HDE，以及若干其他領(lǐng)域的三十余位萬(wàn)粉博主運(yùn)營(yíng)。
團(tuán)隊(duì)成員聚集在北京，上海，南京，深圳，廣州，寧夏等地，歡迎合作。

首先鋪墊兩個(gè)基礎(chǔ)知識(shí)：

1.為什么桌面卡片需要使用特殊機(jī)制來(lái)刷新？

主要有兩個(gè)原因：第一是 OpenHarmonyOS Api9 的桌面卡片出于降低系統(tǒng)能耗的目的，被限制了只有 5 秒的活動(dòng)時(shí)間。超過(guò) 5 秒以后桌面卡片的相關(guān)進(jìn)程會(huì)被強(qiáng)制銷(xiāo)毀，變成一個(gè)靜態(tài)的頁(yè)面。只有通過(guò) router 機(jī)制、call 機(jī)制或者 message 機(jī)制拉起相關(guān)后臺(tái)，才能再次進(jìn)行卡片內(nèi)容的刷新。

第二個(gè)原因是從實(shí)際的運(yùn)行機(jī)制來(lái)說(shuō)，桌面卡片實(shí)際上并不是應(yīng)用主體的一部分，而是歸屬于 OpenHarmony 系統(tǒng)中的桌面應(yīng)用所管理的一系列服務(wù)，桌面卡片與其對(duì)應(yīng)的應(yīng)用主體之間相互隔離，只能使用專(zhuān)門(mén)的接口來(lái)進(jìn)行數(shù)據(jù)交互與頁(yè)面管理。

每張卡片都有一個(gè)獨(dú)立的 LocalStorage 可以用來(lái)存儲(chǔ)頁(yè)面級(jí)變量，但同一個(gè) LocalStorage 的數(shù)據(jù)只能在 UIAbility 內(nèi)部共享，對(duì)外隔離，UIAbility 無(wú)法直接訪問(wèn)。

桌面卡片刷新機(jī)制的本質(zhì)就是通過(guò)專(zhuān)門(mén)的接口，改變特定桌面卡片的 LocalStorage 參數(shù)。以實(shí)現(xiàn)桌面卡片的 UI 更新。

2.router 機(jī)制、call 機(jī)制與 message 機(jī)制有什么不同？

這三個(gè)機(jī)制都可以用來(lái)刷新桌面卡片的，三種機(jī)制的數(shù)據(jù)都以 JSON 的格式進(jìn)行配置，并使用**formBindingData.createFormBindingData()**函數(shù)構(gòu)建數(shù)據(jù)對(duì)象。

主要區(qū)別在于：

router 機(jī)制會(huì)直接打開(kāi)應(yīng)用界面，效果有點(diǎn)像點(diǎn)擊桌面圖標(biāo)。也可以帶參數(shù)打開(kāi)應(yīng)用，直接進(jìn)入應(yīng)用內(nèi)部的某個(gè)特定位置，或者觸發(fā)某項(xiàng)功能。

call 機(jī)制是不打開(kāi)應(yīng)用界面，僅在后臺(tái)拉起應(yīng)用主體的 UIAbility，來(lái)執(zhí)行 UIAbility 內(nèi)部的相關(guān)代碼。call 機(jī)制不受 5 秒時(shí)長(zhǎng)的限制，可以先實(shí)現(xiàn)復(fù)雜且費(fèi)時(shí)的數(shù)據(jù)加載，再提供給桌面卡片進(jìn)行刷新。

message 機(jī)制則不涉及到應(yīng)用的 UIAbility，只是拉起桌面卡片自己的 FormAbility，也可以刷新卡片，但仍然受 5 秒時(shí)長(zhǎng)的限制，更適合輕量化的的實(shí)現(xiàn)卡片內(nèi)容的刷新。

接下來(lái)進(jìn)入正式講解：

本案例使用 call 機(jī)制，通過(guò)拉起應(yīng)用主體的方式來(lái)刷新卡片內(nèi)容。

使用 call 機(jī)制刷新卡片的全流程主要分為 3 個(gè)階段：

1.通過(guò)卡片的 postCardAction 接口觸發(fā) call 事件 →

2.call 事件拉起應(yīng)用主體的后臺(tái)，進(jìn)行數(shù)據(jù)準(zhǔn)備，通過(guò) updateForm 接口執(zhí)行刷新事件 →

3.卡片 page 頁(yè)面接收到數(shù)據(jù)，更新卡片界面。

由于卡片與應(yīng)用主體是獨(dú)立運(yùn)作的，并且一個(gè)應(yīng)用可能會(huì)有多個(gè)應(yīng)用卡片，應(yīng)用其實(shí)并不知到是哪個(gè)卡片觸發(fā)了 call 事件，所以我們需要把卡片 id 作為參數(shù)一起寫(xiě)入接口，讓卡片的管理方能找到我們要刷新的卡片。

補(bǔ)全以后的全流程如下：

1.(卡片創(chuàng)建時(shí))FormAbility 獲取卡片的 FormID，將其作為參數(shù)交給卡片頁(yè)面儲(chǔ)存 →
2.卡片頁(yè)面初始化自己的 FromID
3.(點(diǎn)擊刷新時(shí))卡片通過(guò) postCardAction 接口觸發(fā) call 事件，將卡片的 FormID 與要執(zhí)行的函數(shù)名 method 都作為參數(shù)提交，由系統(tǒng)啟動(dòng)對(duì)應(yīng)應(yīng)用的 UIAbility→
4.UIAbility 啟動(dòng)成功，通過(guò)預(yù)置的觸發(fā)器執(zhí)行 method 對(duì)應(yīng)的函數(shù)，完成數(shù)據(jù)準(zhǔn)備后通過(guò) updateForm 接口將數(shù)據(jù)推送給卡片管理方 →
5.對(duì)應(yīng) FormID 的卡片檢測(cè)并同步到數(shù)據(jù)變動(dòng)，完成頁(yè)面變更。

案例代碼：

1.卡片創(chuàng)建時(shí) FormAbility 獲取 FormID，并交給卡片頁(yè)面

import formBindingData from '@ohos.app.form.formBindingData'; 
import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';

export default class EntryFormAbility extends FormExtensionAbility {
  onAddForm(want) {//創(chuàng)建卡片時(shí)產(chǎn)生的want中包含F(xiàn)ormID，需要再此處讀取出來(lái)同步給LocalStorage。
   let formId = want.parameters["ohos.extra.param.key.form_identity"];
   let dataObj1 = {
     "formId": formId
   };
   let obj1 = formBindingData.createFormBindingData(dataObj1);
   return obj1;
 }
};

?
2.卡片頁(yè)面初始化自己的 FromID

let storage = new LocalStorage();
@Entry(storage)
@Component
struct WidgetCard {
  @LocalStorageProp('formId') formId: string = '0';//在Form頁(yè)面中使用@LocalStorageProp來(lái)進(jìn)行FromID變量的初始化
}

?
3.卡片通過(guò) postCardAction 接口觸發(fā) call 事件，讓系統(tǒng)拉起應(yīng)用后臺(tái)的 pageAbility

let storage = new LocalStorage();
@Entry(storage)
@Component
struct WidgetCard {
  @LocalStorageProp ("formId") @Watch('firstFresh') formId:string='0'//此處使用一個(gè)watch裝飾器，在FormID初始化完成后實(shí)現(xiàn)第一次的數(shù)據(jù)刷新。
  @LocalStorageProp('text')movieName: string = '加載中...';
  @LocalStorageProp('imgName')imgName: string = 'imageName';
  firstFresh(){
    console.log('卡片初始化')
    postCardAction(this, {
      "action": 'call',
      "abilityName": this.ABILITY_NAME,
      "params": {
        "method":"funA",
        "formId":this.formId,
      }
    });
  }

  build() {
    Column() {
      Button('刷新')
        .height('15%')
        .onClick(() => {
          postCardAction(this, {
            "action": 'call',//call事件
            "abilityName": 'EntryAbility',//指向目標(biāo)應(yīng)用的Ability
            "params": {
              "method":"funA",//UIAbility中注冊(cè)的用于刷新卡片的事件
              "formId":this.formId,//卡片自身的FormID
            }
          });
        })
  }
}
?

4.pageAbility 啟動(dòng)，執(zhí)行對(duì)應(yīng)的函數(shù)，完成數(shù)據(jù)準(zhǔn)備后通過(guò) updateForm 接口將數(shù)據(jù)推送給卡片管理方
（數(shù)據(jù)來(lái)源于對(duì)應(yīng)的 severless 服務(wù)器，為方便演示，severless 的安全機(jī)制設(shè)為了不做身份校驗(yàn)即可訪問(wèn)數(shù)據(jù)的形式）

注意：callee 監(jiān)聽(tīng)事件必須要先申請(qǐng)"ohos.permission.KEEP_BACKGROUND_RUNNING"權(quán)限才能正常運(yùn)行！??！

import UIAbility from '@ohos.app.ability.UIAbility';
import formBindingData from '@ohos.app.form.formBindingData';
import formProvider from '@ohos.app.form.formProvider';
import hilog from '@ohos.hilog';
import Window from '@ohos.window';
import abilityAccessCtrl from '@ohos.abilityAccessCtrl';
import {AGCCloudDB} from'../services/AGCCloudDB'
import {AGCStorageReference} from'../services/Storage'
import request from '@ohos.request';
import fs from '@ohos.file.fs';

export default class EntryAbility extends UIAbility {
  onCreate(want, launchParam) {//如果觸發(fā)call事件時(shí)UIAbility未啟動(dòng)，會(huì)先執(zhí)行onCreate再執(zhí)行監(jiān)聽(tīng)事件。如果觸發(fā)Call事件時(shí)UIAbility已經(jīng)在運(yùn)行中則直接執(zhí)行監(jiān)聽(tīng)事件。
     this.callee.on('funA',(str)=>{//監(jiān)聽(tīng)器，檢測(cè)到對(duì)應(yīng)參數(shù)就執(zhí)行回調(diào)函數(shù)
         let params = JSON.parse(str.readString())
         if (params.formId != undefined) {
           let formId = params.formId
           const agcCloudDB = AGCCloudDB.instance(this.context)
           agcCloudDB.init(this.context).then((res) => {
             let CloudDB = new AGCStorageReference(this.context)
             agcCloudDB.getMovie().then((allRecords) => {//從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)組
               let radomNumber = Math.floor(Math.random() * allRecords.length)               CloudDB.getDownloadUrl(allRecords[radomNumber].movieName).then((url) => {//從數(shù)據(jù)組中隨機(jī)抽取一項(xiàng)，獲取對(duì)應(yīng)的圖片下載鏈接
                 let tempDir = this.context.getApplicationContext().tempDir;
                 let tmpFile = tempDir + '/file' + Date.now();
                 request.downloadFile(this.context, {//將圖片下載到本地，并得到本地的圖片地址
                   url: url, filePath: tmpFile
                 }).then((task) => {
                   task.on('complete', function callback() {
                     console.info('ArkTSCard download complete:' + tmpFile);
                     let file;
                     try {
                       file = fs.openSync(tmpFile);
                     } catch (e) {
                       console.error(`openSync failed: ${JSON.stringify(e)}`);
                     }
                     console.log(JSON.stringify(allRecords))
                     let formData = {//進(jìn)行數(shù)據(jù)打包
                       "text": allRecords[radomNumber].movieName,
                       "imgName": allRecords[radomNumber].movieName,
                       'formImages': {},
                      }                     formData.formImages[allRecords[radomNumber].movieName]=file.fd//由于Image的刷新機(jī)制必須接受不同的值才能識(shí)別到image變化，因此movieName只能使用變量的形式寫(xiě)入。
                     let formInfo = formBindingData.createFormBindingData(formData)//創(chuàng)建FormBindingData對(duì)象
                     formProvider.updateForm(formId, formInfo)
                   })//執(zhí)行updateForm事件，刷新指定卡片。
                   task.on('fail', function callBack(err) {//數(shù)據(jù)準(zhǔn)備失敗時(shí)顯示的內(nèi)容
                     console.info('ArkTSCard download task failed. Cause:' + err);
                     let formInfo = formBindingData.createFormBindingData({
                       'text': '刷新失敗,請(qǐng)重試'
                     })
                     formProvider.updateForm(formId, formInfo)
                   })
                 })
                 return null
               })
             })
           })
         }
     })
  }
}

?
5.對(duì)應(yīng) FormID 的卡片收到新的數(shù)據(jù)，完成頁(yè)面變更。

let storage = new LocalStorage();
@Entry(storage)
@Component
struct WidgetCard {
  @LocalStorageProp ("formId") @Watch('firstFresh') formId:string='0'
  @LocalStorageProp('text')movieName: string = '加載中...';
  @LocalStorageProp('imgName')imgName: string = 'imageName';
//LocalStorageProp檢測(cè)到text與imgName變量發(fā)生改變，單向同步最新的數(shù)據(jù)，并觸發(fā)卡片頁(yè)面的文本與圖片刷新。

  build() {
    Column() {
      Text(this.text)
        .fontSize('12vp')
        .textAlign(TextAlign.Center)
        .width('100%')
        .height('15%')
      Row() {
          Image('memory://' + this.imgName)//imgName變化以后image組件會(huì)自動(dòng)尋找對(duì)應(yīng)的圖片進(jìn)行加載
            .width('50%')
            .height('50%')
            .margin('5%')
      }.alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.Center)
      Button('刷新')
        .height('15%')
        .onClick(() => {
          postCardAction(this, {
            "action": 'call',
            "abilityName": 'EntryAbility',
            "params": {
              "method":"funA",//UIAbility中注冊(cè)的用于刷新卡片的事件
              "formId":this.formId,
            }
          });
        })
    }
    .width('100%').height('100%')
    .alignItems(HorizontalAlign.Center)
    .padding('5%')
  }
}
?

postCardAction 接口 call 事件的寫(xiě)法如下：

updateForm 接口的寫(xiě)法如下：

為了能讓大家更好的學(xué)習(xí)鴻蒙 (OpenHarmony) 開(kāi)發(fā)技術(shù)，這邊特意整理了《鴻蒙 (OpenHarmony)開(kāi)發(fā)學(xué)習(xí)手冊(cè)》，希望對(duì)大家有所幫助：

《鴻蒙（Harmony OS）開(kāi)發(fā)學(xué)習(xí)手冊(cè)》

入門(mén)必看：https://docs.qq.com/doc/DUk51cHZJaUpmSlhH
1.應(yīng)用開(kāi)發(fā)導(dǎo)讀（ArKTS）
2.……

HarmonyOS概念：https://docs.qq.com/doc/DUk51cHZJaUpmSlhH
1.系統(tǒng)定義
2.技術(shù)框架
3.技術(shù)特性
4.系統(tǒng)安全

快速入門(mén)：https://docs.qq.com/doc/DUk51cHZJaUpmSlhH
1.基本概念
2.構(gòu)建第一個(gè)ArkTS應(yīng)用
3.…

開(kāi)發(fā)基礎(chǔ)知識(shí)：https://docs.qq.com/doc/DUk51cHZJaUpmSlhH
1.應(yīng)用基礎(chǔ)知識(shí)
2.配置文件
3.應(yīng)用數(shù)據(jù)管理
4.應(yīng)用安全管理
5.應(yīng)用隱私保護(hù)
6.三方應(yīng)用調(diào)用管控機(jī)制
7.資源分類(lèi)與訪問(wèn)
8.學(xué)習(xí)ArkTS
9…

基于ArkTS 開(kāi)發(fā)：https://docs.qq.com/doc/DUk51cHZJaUpmSlhH
1.Ability開(kāi)發(fā)
2.UI開(kāi)發(fā)
3.公共事件與通知
4.窗口管理
5.媒體
6.安全
7.網(wǎng)絡(luò)與鏈接
8.電話服務(wù)
9.數(shù)據(jù)管理
10.后臺(tái)任務(wù)(Background Task)管理
11.設(shè)備管理
12.設(shè)備使用信息統(tǒng)計(jì)
13.DFX
14.國(guó)際化開(kāi)發(fā)
15.折疊屏系列
16………

審核編輯 黃宇