使用鸿蒙端云一体化模板快速开发一个显示桌面文案的元服务

不期。

已于 2023-09-18 15:18:27 修改

阅读量569

点赞数 1

分类专栏：鸿蒙开发经验文章标签： harmonyos 华为鸿蒙 serverless

于 2023-09-18 14:59:29 首次发布

本文链接：https://blog.csdn.net/weixin_44827696/article/details/132978709

版权

鸿蒙开发经验专栏收录该内容

7 篇文章 1 订阅

订阅专栏

作为一个文艺青年，偶尔会有想要表达一下自己心情的需求，这时候鸿蒙系统的桌面卡片就非常合适。

简单设想一下，这是一个常驻桌面、能显示个性文案的元服务。如果用户对文案内容不满意的话可以手动切换文案。由于每次只能单条刷新很不方便，因此还需要一个应用界面，里面能够分类显示很多不同的文案，便于快速选择，只要手动点击某一条文案，就能直接显示到桌面卡片上。

使用端云一体化开发可以很容易的实现这个效果

效果展示：
每日走心文案阶段性功能演示

简单介绍一下端云一体化开发：

作为一个独立开发者，由于时间和开发能力的限制，想要独立开发一个应用程序其实还是挺难的，微博、B站那种功能复杂又高大上的应用自然不必说，很多时候连简单的应用也会受限于前后端开发的差异，学前端的不会写后端、不会配置服务器，学后端的搞不懂前端三件套，让人搞得一头雾水，项目未半而中道崩卒。

DevEco的端云一体化开发工具能让应用开发变得非常简单，前后端语法统一，前端用基于JS衍生的ArkTS，后端能直接用Node.js，语法高度相似。
severless不需要手动安装各种服务器软件，也不需要进行大量复杂难懂的系统配置。直接新建项目就能让客户端自动连接上severless，并且服务器常用的登录、后端环境、数据库、文件存储系统、日志系统他都有。突出一个简单快捷，傻瓜式操作。

想法有了，开始分析项目：

文案可以统一放在云数据库，使用云数据库的接口来查询。
桌面卡片的刷新事件主要靠postCardAction接口的message事件来实现，
点击跳转应用靠postCardAction接口的router事件来实现
FormAbility和应用页面点击后刷新卡片的功能依靠formProvider.updateForm接口来实现。
为了能管理多张应用卡片，避免出现明明没有卡片但应用提示刷新成功，已经明明有应用卡片但应用找不到对应的FormID导致卡片不刷新的情况，又需要一个能记录所有FormID的函数。

关于postCardAction接口和formProvider.updateForm接口可以参考以下文章：

鸿蒙元服务开发教程：从底层原理开始讲透桌面卡片的call事件刷新机制

鸿蒙元服务开发教程02：从底层原理开始讲透桌面卡片的message事件刷新机制

鸿蒙元服务开发教程03：从底层原理开始讲透桌面卡片的router事件刷新机制

简单的分析完这个项目，就可以动手操作啦

第一步：在AGC中新建项目，新建应用。

如果不会创建端云一体化工程的话可以参考一下这篇文章：【纯新手向】手把手带你使用模板创建第一个端云一体化元服务
第二步：按照项目需求开通对应的服务。
- 由于这个案例非常的简单，登陆服务、云函数、云存储都用不上，只要有一个云数据库就够了。在这里就只开通云数据库。
- 完成云数据库的基本配置
- 存储区命名为sloganZone
- 云数据配置好以后导出对象类型的js文件。后续会用到。
- 手动录入一些数据以便后续开发中进行测试
配置完成后新建本地工程。（强烈建议新手先完成severless的各种配置再新建本地项目，因为建立本地项目时会自动下载与severless配置情况对应的agconnect-services.json与schema.json文件。改动severless配置后需要手动更新这两个文件，否则可能会无法运行。）
- 删除不需要的程序文件，开始编写我们自己的代码。
  - ets目录下除了EntryAbility、EntryFormAbility和WidgetCard以外的文件可以全部删除。
  - 将之前下载的对象类型文件（dailySlogan.js）复制进来,后续查询云数据库必须要用到它。
  - 重建一个Index.ets文件。
最终的项目结构如下：
开发桌面卡片的代码

卡片界面WidgetCard.ets的代码

let storage=new LocalStorage()//页面级存储，靠它才能卡片内容的跨文件刷新
@Entry(storage)
@Component
struct WidgetCard {
  @LocalStorageProp('formId') @Watch('sentFormID') formId: string = '0';//保存FormID的变量
  @LocalStorageProp('slogan') slogan:string='我希望有个如你一般的人。如山间清爽的风，如古城温暖的光，由清晨到傍晚，由山野到书房，只要最后是你，就好。'//卡片的默认文案

 sentFormID(){
   console.log('发送formID')
   postCardAction(this,{//call事件，可以后台启动UIAbility并执行预设的事件。
     'action':'call',
     "abilityName": 'EntryAbility',
     'params': {
       'method': 'createFormId',
       'formId': this.formId,
       'detail': ''
     }
   })
 }
  build() {
    Stack() {
      Image($r("app.media.background1"))
        .width('100%')
        .height('100%')
      Column() {
        Row(){
          Image($r("app.media.logo_white"))
            .objectFit(ImageFit.Contain)
            .width('30vp')
          Text('每日走心文案')
            .fontColor(Color.White)
        }
        .height('20%')
        .width('100%')
        .justifyContent(FlexAlign.Start)
        Row(){
          Text(this.slogan)
            .fontColor(Color.White)
            .width('80%')
          Column(){
            Image($r('app.media.freshButton'))
              .height('35%')
              .objectFit(ImageFit.Contain)
              .padding(5)
          }
          .onClick(()=>{
            postCardAction(this,{//message事件，用于启动FormAbility并执行预设的事件。
              'action':'message',
              'params': {
                'msgTest': 'messageEvent'
              }
            })
          })
          .padding(5)
          .margin(5)
          .backgroundColor(Color.Gray)
          .borderRadius(50)
          .justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Center)
        }
        .height('80%')
        .width('100%')
        .justifyContent(FlexAlign.Center)
      }
      .width('100%')
      .height('100%')
      .padding($r('app.float.column_padding'))
     }
    .width('100%')
    .height('100%')
    .onClick(() => {
      postCardAction(this, {//router事件，可以跳转到UIAbiliity，同时也可以执行UIAbiliity中预设的事件
        "action": "router",
        "abilityName": 'EntryAbility',
        "params": {
          "message": ''
        }
      });
    })
  }
}

FormAbility部分EntryFormAbility.ts的关键代码

import formInfo from '@ohos.app.form.formInfo';
import formBindingData from '@ohos.app.form.formBindingData';
import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
import formProvider from '@ohos.app.form.formProvider';
import agconnect from '@hw-agconnect/api-ohos';
import { AGConnectCloudDB, CloudDBZone, CloudDBZoneConfig, CloudDBZoneQuery } from '@hw-agconnect/database-ohos';

import {dailySlogan} from'../models/dailySlogan'


export default class EntryFormAbility extends FormExtensionAbility {
  objectTypeInfo=null
  cloudZone:CloudDBZone=null
  cloud:AGConnectCloudDB=null


  onAddForm(want) {//want中包含了FormId等信息，在卡片创建时读取并更新，以便卡片执行call时使用
    let formId = want.parameters["ohos.extra.param.key.form_identity"];
    let dataObj1 = {
      "formId": formId
    };
    let obj1 = formBindingData.createFormBindingData(dataObj1);
    console.log('formId向卡片发送'+formId)
    return obj1;
  }

  async onFormEvent(formId, message) {//当message事件触发时，查询数据库并刷新卡片
   // Called when a specified message event defined by the form provider is triggered.

    try {
      agconnect.instance().init(this.context)//初始化agc
    }
    catch (error){}
    
    try {
      await  AGConnectCloudDB.initialize(this.context)//初始化AGConnectCloudDB
    }
    catch (error){}
    
    if (this.cloud == null) {
      this.cloud = await AGConnectCloudDB.getInstance()//获取实例
    }
    if (this.objectTypeInfo == undefined) {//查询并构建云数据库的数据类型
      const value = await this.context.resourceManager.getRawFile('schema.json');
      let json = "";
      for (var i = 0; i < value.length; i++) {
        json += String.fromCharCode(value[i]);
      }
      this.objectTypeInfo = JSON.parse(json);
      this.cloud.createObjectType(this.objectTypeInfo);
    }
    
    
    if (this.cloudZone == null) {
      this.cloudZone = await this.cloud.openCloudDBZone(new CloudDBZoneConfig("sloganZone"))//打开存储区
    }
    
    
    const sql = CloudDBZoneQuery.where(dailySlogan)
      .limit(1, Math.floor(Math.random() * 9)) //用于查询的sql语句
     
    this.cloudZone.executeQuery(sql).then((sloganInfo) => {
      let info:dailySlogan[]=sloganInfo.getSnapshotObjects()//处理查询结果
      let slogan=info[0].Slogan
      let formData = {
        'slogan': slogan, // 此处需要和卡片页面的变量相对应
      };
      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));
      })
    }).catch((error) => {
      console.error('数据查询失败: ' + JSON.stringify(error));
    })
  }

  onRemoveForm(formId) {
    // Called to notify the form provider that a specified form has been destroyed.

  }

  onAcquireFormState(want) {
    // Called to return a {@link FormState} object.
    return formInfo.FormState.READY;
  }
};

另外为了显示效果，我们需要把卡片尺寸修改为2*4

开发应用主页的代码

page部分Index.ets文件的代码

import agconnect from '@hw-agconnect/api-ohos';
import { AGConnectCloudDB, CloudDBZone, CloudDBZoneConfig, CloudDBZoneQuery } from '@hw-agconnect/database-ohos';
import {dailySlogan} from'../models/dailySlogan'
import formBindingData from '@ohos.app.form.formBindingData';
import formProvider from '@ohos.app.form.formProvider';
import formInfo from '@ohos.app.form.formInfo';

@Entry
@Component
struct  homepage{

  @State sloganList:Array<string>=[]//保存文案列表的变量
  objectTypeInfo=null
  cloudZone:CloudDBZone=null
  cloud:AGConnectCloudDB=null

  aboutToAppear(){
    this.fresh()
  }

  async fresh(){//用于查询新文案的代码，与FormAbility中的基本一致
    try {
      try {
        agconnect.instance().init(getContext(this))
      }
      catch (error){}
      try {
        await  AGConnectCloudDB.initialize(getContext(this))
      }
      catch (error){}
      if (this.cloud == null) {
        this.cloud = await AGConnectCloudDB.getInstance()
      }
      if (this.objectTypeInfo == undefined) {
        const value = await getContext(this).resourceManager.getRawFile('schema.json');
        let json = "";
        for (var i = 0; i < value.length; i++) {
          json += String.fromCharCode(value[i]);
        }
        this.objectTypeInfo = JSON.parse(json);
        this.cloud.createObjectType(this.objectTypeInfo);
      }
      if (this.cloudZone == null) {
        this.cloudZone = await this.cloud.openCloudDBZone(new CloudDBZoneConfig("sloganZone"))
      }
      const sql = CloudDBZoneQuery.where(dailySlogan)
        .limit(4, Math.floor(Math.random() * 9)) 
      this.cloudZone.executeQuery(sql).then((sloganInfo) => {
        let info: dailySlogan[] = sloganInfo.getSnapshotObjects()
        this.sloganList = []
        for (var i = 0;i < info.length; i++) {
          this.sloganList.push(info[i].Slogan)
        }
      }).catch((error) => {
        console.error('数据查询失败: ' + JSON.stringify(error));
      })
    }
    catch (error){
        console.error('刷新异常: ' + JSON.stringify(error));
    }
  }
  build(){

    List(){
      ListItem(){
       Button('刷新文案')
        .onClick(()=>{
          this.fresh()
        })
      }
      ForEach(this.sloganList,(listInfo)=>{
        ListItem(){
          Column(){
            Text(listInfo)
          }
          .width('90%')
          .height('20%')
          .backgroundImage($r('app.media.background1'))
          .margin({top:5,bottom:5})
          .justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Center)
          .onClick(async()=>{//判断是否存在卡片并根据用户点击的文案来刷新这些卡片


            if(AppStorage.Has('formId')){
              let formIdList:Array<string>=AppStorage.Get('formId')
              let formData = {
                "slogan": listInfo
              };
              let formMsg = formBindingData.createFormBindingData(formData)
               console.log('开始刷新')

              for(let i=0;i<formIdList.length;i++){
                try {
                  await formProvider.updateForm(formIdList[i], formMsg)
                }
               catch (error){
                 if(error.code==16501001){//formId都不存在的错误码
                   console.log('formID是'+formIdList[i])
                   formIdList[i]=' '
                 }
               }
              }

              let newFormIdList=[]
              for(var i=0;i<formIdList.length;i++){
              if(formIdList[i]!=' '){
                console.log('检测成功的formID是'+formIdList[i])
                newFormIdList.push(formIdList[i])
              }else{
                console.log(i+'id值已清空'+formIdList[i])
              }
              }
              if(newFormIdList.length==0){
                console.log('卡片已被清空')
                AppStorage.Delete('formId')
                AlertDialog.show({
                  message:'卡片不存在，请重新添加卡片'
                })
              }
              else{
                AppStorage.SetOrCreate('formId',newFormIdList)
                AlertDialog.show({
                  message:'卡片刷新已完成'
                })
              }

            }else {
              AlertDialog.show({
                message:'请先添加卡片'
              })
            }

          })
        }
      },)
    }
    .width('100%')
    .height('100%')
    .alignListItem(ListItemAlign.Center)
  }
}

UIAbility部分EntryAbility.ts文件的关键代码

import hilog from '@ohos.hilog';
import UIAbility from '@ohos.app.ability.UIAbility';
import Window from '@ohos.window';
import abilityAccessCtrl from '@ohos.abilityAccessCtrl';
import formInfo from '@ohos.app.form.formInfo';
import formBindingData from '@ohos.app.form.formBindingData';
import formProvider from '@ohos.app.form.formProvider';

function saveFormId(data){//保存新增的FormId的函数
  console.log('监听事件已激活')
  let FormIdList=[]
  if(AppStorage.Has('formId')){
    FormIdList=AppStorage.Get('formId')
  }

  let params = JSON.parse(data.readString())
  if (params.formId !== undefined) {
    let FormId = params.formId;
    console.log('读取到formId')
    FormIdList.push(FormId)

    AppStorage.SetOrCreate('formId', FormIdList)

    for(var i=0;i<FormIdList.length;i++){
      console.log('formID保存成功')
      console.log(FormIdList[i])
    }
  }
  else {
    console.log('formId读取失败')
  }
  return null
}


export default class EntryAbility extends UIAbility {
  onCreate() {
    this.callee.on('createFormId',saveFormId);//应用启动时监听call事件

    let AtManager = abilityAccessCtrl.createAtManager();
    AtManager.requestPermissionsFromUser(this.context, ['ohos.permission.READ_MEDIA', 'ohos.permission.MEDIA_LOCATION']).then((data) => {
      hilog.info(0x0000, 'testTag', '%{public}s', 'request permissions from user success' + data);
    }).catch((err) => {
      hilog.error(0x0000, 'testTag', 'Failed to request permissions from user. Cause: %{public}s', JSON.stringify(err) ?? '');
    });
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy() {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
    this.callee.off('createFormId');//应用销毁时解除监听call事件
  }
}

不期。

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
6
评论
使用鸿蒙端云一体化模板快速开发一个显示桌面文案的元服务

使用端云一体化开发可以很容易的实现这个效果简单介绍一下端云一体化开发：作为一个独立开发者，由于时间和开发能力的限制，想要独立开发一个应用程序其实还是挺难的，微博、B站那种功能复杂又高大上的应用自然不必说，很多时候连简单的应用也会受限于前后端开发的差异，学前端的不会写后端、不会配置服务器，学后端的搞不懂前端三件套，让人搞得一头雾水，项目未半而中道崩卒。DevEco的能让应用开发变得非常简单，前后端语法统一，前端用基于JS衍生的ArkTS，后端能直接用Node.js，语法高度相似。
复制链接

扫一扫