鸿蒙HarmonyOS实战-Stage模型（卡片数据交互），2024年最新面试官问技术问题不太会怎么办] } 🦋2.3

] }

在这里插入图片描述

🦋2.3 下次刷新

import formProvider from '@ohos.app.form.formProvider';

具体刷新可参考上篇文章

3.刷新本地图片和网络图片

在HarmonyOS卡片开发中，可以通过请求本地图片和网络图片来实现对图片的显示。

请求本地图片可以使用HarmonyOS提供的资源管理器来获取本地图片的资源，然后将其显示在卡片上。

先需要打开这个权限：

ohos.permission.INTERNET

🦋3.1 发送本地图片

import formBindingData from '@ohos.app.form.formBindingData'; import formProvider from '@ohos.app.form.formProvider'; import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility'; import request from '@ohos.request'; import fs from '@ohos.file.fs';

export default class EntryFormAbility extends FormExtensionAbility { ... // 在添加卡片时，打开一个本地图片并将图片内容传递给卡片页面显示 onAddForm(want) { // 假设在当前卡片应用的tmp目录下有一个本地图片：head.PNG let tempDir = this.context.getApplicationContext().tempDir; // 打开本地图片并获取其打开后的fd let file; try { file = fs.openSync(tempDir + '/' + 'head.PNG'); } catch (e) { console.error(openSync failed: ${JSON.stringify(e)}); } let formData = { 'text': 'Image: Bear', 'imgName': 'imgBear', 'formImages': { 'imgBear': file.fd }, 'loaded': true } // 将fd封装在formData中并返回至卡片页面 return formBindingData.createFormBindingData(formData); }

... }

🦋3.2 发送网络片

export default class EntryFormAbility extends FormExtensionAbility { // 在卡片页面触发message事件时，下载一个网络图片，并将网络图片内容传递给卡片页面显示 onFormEvent(formId, message) { let formInfo = formBindingData.createFormBindingData({ 'text': '刷新中...' }) formProvider.updateForm(formId, formInfo) // 注意：FormExtensionAbility在触发生命周期回调时被拉起，仅能在后台存在5秒 // 建议下载能快速下载完成的小文件，如在5秒内未下载完成，则此次网络图片无法刷新至卡片页面上 let netFile = 'https://xxxx/xxxx.png'; // 需要在此处使用真实的网络图片下载链接 let tempDir = this.context.getApplicationContext().tempDir; let tmpFile = tempDir + '/file' + Date.now(); request.downloadFile(this.context, { url: netFile, 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)}); } let formData = { 'text': 'Image: Https', 'imgName': 'imgHttps', 'formImages': { 'imgHttps': file.fd }, 'loaded': true } 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)); }) }) task.on('fail', function callBack(err) { console.info('ArkTSCard download task failed. Cause:' + err); let formInfo = formBindingData.createFormBindingData({ 'text': '刷新失败' }) formProvider.updateForm(formId, formInfo) }); }).catch((err) => { console.error('Failed to request the download. Cause: ' + JSON.stringify(err)); }); }

... };

🦋3.3 卡片UI接收数据

let storage = new LocalStorage();

@Entry(storage) @Component struct WidgetCard { @LocalStorageProp('text') text: string = '加载中...'; @LocalStorageProp('loaded') loaded: boolean = false; @LocalStorageProp('imgName') imgName: string = 'name';

build() { Column() { Text(this.text) .fontSize('12vp') .textAlign(TextAlign.Center) .width('100%') .height('15%')

Row() { if (this.loaded) { Image('memory://' + this.imgName) .width('50%') .height('50%') .margin('5%') } else { Image('common/start.PNG') .width('50%') .height('50%') .margin('5%') } }.alignItems(VerticalAlign.Center) .justifyContent(FlexAlign.Center)

Button('刷新') .height('15%') .onClick(() => { postCardAction(this, { 'action': 'message', 'params': { 'info': 'refreshImage' } }); }) } .width('100%').height('100%') .alignItems(HorizontalAlign.Center) .padding('5%') } }

4.根据卡片状态刷新不同内容

我们可以添加两张桌面卡片，一张显示杭州的天气，另一张显示北京的天气。这些卡片可以在每天早上7点触发定时刷新。卡片需要能够感知当前的配置是杭州还是北京，并根据情况选择相应城市的天气信息进行刷新。以下示例展示了如何根据卡片的状态动态选择需要刷新的内容。

1、配置定时刷新

{ "forms": [ { "name": "widget", "description": "This is a service widget.", "src": "./ets/widget/pages/WidgetCard.ets", "uiSyntax": "arkts", "window": { "designWidth": 720, "autoDesignWidth": true }, "colorMode": "auto", "isDefault": true, "updateEnabled": true, "scheduledUpdateTime": "07:00", "updateDuration": 0, "defaultDimension": "22", "supportDimensions": ["22"] } ] }

2、选择状态

let storage = new LocalStorage(); @Entry(storage) @Component struct WidgetCard { @LocalStorageProp('textA') textA: string = '待刷新...'; @LocalStorageProp('textB') textB: string = '待刷新...'; @State selectA: boolean = false; @State selectB: boolean = false;

build() { Column() { Row() { Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) .select(false) .onChange((value: boolean) => { this.selectA = value; postCardAction(this, { 'action': 'message', 'params': { 'selectA': JSON.stringify(value) } }); }) Text('状态A') }

Row() { Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) .select(false) .onChange((value: boolean) => { this.selectB = value; postCardAction(this, { 'action': 'message', 'params': { 'selectB': JSON.stringify(value) } }); }) Text('状态B') }

Row() { // 选中状态A才会进行刷新的内容 Text('状态A: ') Text(this.textA) }

Row() { // 选中状态B才会进行刷新的内容 Text('状态B: ') Text(this.textB) } }.padding('10%') } }

3、根据状态刷新内容

import formInfo from '@ohos.app.form.formInfo' import formProvider from '@ohos.app.form.formProvider'; import formBindingData from '@ohos.app.form.formBindingData'; import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility'; import dataStorage from '@ohos.data.storage'

export default class EntryFormAbility extends FormExtensionAbility { onAddForm(want) { let formId = want.parameters[formInfo.FormParam.IDENTITY_KEY]; let isTempCard: boolean = want.parameters[formInfo.FormParam.TEMPORARY_KEY]; if (isTempCard === false) { // 如果为常态卡片，直接进行信息持久化 console.info('Not temp card, init db for:' + formId); let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore') storeDB.putSync('A' + formId, 'false'); storeDB.putSync('B' + formId, 'false'); storeDB.flushSync(); } let formData = {}; return formBindingData.createFormBindingData(formData); }

onRemoveForm(formId) { console.info('onRemoveForm, formId:' + formId); let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore') storeDB.deleteSync('A' + formId); storeDB.deleteSync('B' + formId); }

// 如果在添加时为临时卡片，则建议转为常态卡片时进行信息持久化 onCastToNormalForm(formId) { console.info('onCastToNormalForm, formId:' + formId); let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore') storeDB.putSync('A' + formId, 'false'); storeDB.putSync('B' + formId, 'false'); storeDB.flushSync(); }

onUpdateForm(formId) { let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore') let stateA = storeDB.getSync('A' + formId, 'false').toString() let stateB = storeDB.getSync('B' + formId, 'false').toString() // A状态选中则更新textA if (stateA === 'true') { let formInfo = formBindingData.createFormBindingData({ 'textA': 'AAA' }) formProvider.updateForm(formId, formInfo) } // B状态选中则更新textB if (stateB === 'true') { let formInfo = formBindingData.createFormBindingData({ 'textB': 'BBB' }) formProvider.updateForm(formId, formInfo) } }

onFormEvent(formId, message) { // 存放卡片状态 console.info('onFormEvent formId:' + formId + 'msg:' + message); let storeDB = dataStorage.getStorageSync(this.context.filesDir + 'myStore') let msg = JSON.parse(message) if (msg.selectA != undefined) { console.info('onFormEvent selectA info:' + msg.selectA); storeDB.putSync('A' + formId, msg.selectA); } if (msg.selectB != undefined) { console.info('onFormEvent selectB info:' + msg.selectB); storeDB.putSync('B' + formId, msg.selectB); } storeDB.flushSync(); }

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！