HarmonyOS元服务开发实践:桌面卡片字典

news2024/11/13 15:01:29

一、项目说明
1.DEMO创意为卡片字典。
2.不同卡片显示不同内容:微卡、小卡、中卡、大卡,根据不同卡片特征显示同一个字的不同内容,基于用户习惯可选择喜欢的卡片。
3.万能卡片刷新:用户点击卡片刷新按钮查看新内容,同时卡片设置了定时刷新,让用户每天看到的卡片都是新的文字,便于用户学习和查阅。
4.元服务内具有搜索功能,用户可以通过搜索查询相应的字和解释,采用了类似现在用户习惯的上下滑动方式来进行逐字详细阐述。
5.基于API9、ArkTS语言开发,通过serverless云服务实现注册、登录等功能。
二、元服务效果
1.万能卡片效果

 

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区

2.元服务内页
 

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区


三、项目开发
1.环境搭建
软件要求:
DevEco Studio版本:DevEco Studio 3.1 Release及以上版本。
HarmonyOS SDK版本:API version 9及以上版本。
硬件要求:
设备类型:华为手机或运行在DevEco Studio上的华为手机设备模拟器。
HarmonyOS系统:3.1.0 Developer Release及以上版本。

2.主要代码结构解读
 

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区


entry/src/main/ets: 文件入口
common:公共资源文件
images:公共图片资源
Constants.ts:公共常量
CountryViewModel.ts:国家号码类
LazyFE_Class.ets:懒数据加载类
Log.ts:日志类

components:封装组件文件

database:数据库封装类
data_cyhz.ets:数据文件

entryability:应用/服务入口

entryformability:卡片服务

pages:应用/服务页面
Auth.ets:认证授权
CloudFunction.ets:云函数
CloudProject.ets:云项目
CloudStorage.ets:云存储
Index.ets:主页
User_Login.ets:登录页
User_SignUp.ets:注册页
User_VerifyCodeLogin.ets:验证码登录页

services:后台操作类

widget:服务卡片

resources:资源文件目录

3.进入应用说明
由于创建的是云模板项目,所以无需额外配置SDK依赖,只需要注意的是,云模板的初始集成sdk位置不一样,所以我们还是在应用初始化阶段使用context初始化SDK,推荐在entryability的onCreate中进行。
 

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区


4.首页
我们需要给应用添加底部菜单栏,用于切换不同的应用模块,由于各个模块之间属于完全独立的情况,并且不需要每次切换都进行界面的刷新,所以我们用到了Tabs,TabContent组件。
 

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区


本应用一共有首页、我的两个模块,分别对应Tabs组件的两个子组件TabContent。

首页包含搜索文字和滑动浏览信息两个模块,具体代码实现我们将在下边分模块进行说明。

搜索文字:主要用到Search组件,通过搜索文字来跳转到相应的文字展示信息,主要代码如下:

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区

...
//常用汉字搜索栏
Column() {
  Search({ value: this.submitValue, placeholder: '汉字搜索', controller: this.search })
    .searchButton('搜索')
    .placeholderColor(Color.Grey)
    .textFont({ size: 14, weight: 400 })
    .margin({ left: 20, right: 20 })
    .onSubmit((value: string) => {
      this.submitValue = value
      for (let i = 0; i < wz.length; i++) {
        const element: any = wz[i];
        if (this.submitValue == element.zi) {
          this.swiperIndex = i
          this.submitValue = ''
        }
      }
    })
    .onChange((value: string) => {
      this.changeValue = value
    })
}.width("100%").margin({ top: 20, bottom: 20 })
......

浏览信息模块:主要用到swiper组件,通过数据的懒加载行为,来预缓存数据,通过滑动页面来展示文字信息,主要代码如下:

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区

...

//常用汉字轮播部分
Column() {
  Swiper(this.swiperController) {
    LazyForEach(this.data_wz, (item: any) => {
      Column() {
        ...
      }.width("100%")
      .height("100%")
      .justifyContent(FlexAlign.Start)
      .alignItems(HorizontalAlign.Start)
    }, item => item)
  }
  .vertical(true)
  .cachedCount(2)
  .autoPlay(false)
  .indicator(false)
  .loop(false)
  .duration(400)
  .itemSpace(0)
  .curve(Curve.Linear)
  .cachedCount(3)
  .index(this.swiperIndex)
  .disableSwipe(this.disableSwipe)
  .onChange((index: number) => {
    console.info("swiper:" + index.toString())
    this.swiperIndex = index
  })
}.width("100%")

...

5.我的
我的页包含游客登陆、用户登录两个模块。
其中游客登陆不显示登录信息以及应用部分功能,仅能使用部分应用能力;
用户登录显示用户部分信息,并展开应用所有功能,需要用户注册登录;
具体代码实现我们将在下边分模块进行说明。

游客登录:

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区

...

//游客登陆状态
if (this.isVisitor) {
  //头像信息
  Column() {
    Image($r('app.media.icon'))
      .width(90)
      .objectFit(ImageFit.Contain)
      .borderRadius(50)
    Text(this.isVisitor ? "游客_" : this.userName).fontSize(16).margin(20)
    Button(this.isLogin ? "退出" : "登录", { type: ButtonType.Capsule })
      .fontSize(14)
      .width('120')
      .height('30')
      .backgroundColor(0xf48fb1)
      .onClick(() => {
        router.replaceUrl({
          url: "pages/User_Login"
        })
      })
  }
  .width('90%')
  .height('240')
  .borderRadius(12)
  .margin({ top: 20 })
  .backgroundColor(0xFFFFFF)
  .shadow({ radius: 12, color: 0xCECECE, offsetX: 4, offsetY: 6 })
  .justifyContent(FlexAlign.Center)
}

...

用户登录:

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区

...

//已经登陆状态
  if (!this.isVisitor) {
    //头像信息
    Column() {
...
      }
    .width('90%')
    .height('240')
    .borderRadius(12)
    .margin({ top: 20 })
    .backgroundColor(0xFFFFFF)
    .shadow({ radius: 12, color: 0xCECECE, offsetX: 4, offsetY: 6 })
    .justifyContent(FlexAlign.Center)

    //选择项
    Column() {
      ...
}.width('100%')
.height("100%")
.backgroundColor(0xF5F5F5)
.justifyContent(FlexAlign.Start)

6.注册登录页
让用户进行账号注册,能够完全使用应用。
 

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区


 

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区


核心代码:

...

.onClick(() => {
  if (this.phoneNumber !== '' && this.password !== '') {
    let verifyCodeSettings = new VerifyCodeSettingBuilder()
      .setAction(VerifyCodeAction.REGISTER_LOGIN)
      .setLang('zh_CN')
      .setSendInterval(60)
      .build();
    agconnect.auth().requestPhoneVerifyCode(this.countryCode, this.phoneNumber, verifyCodeSettings)
      .then(verifyCodeResult => {
        this.startTimer()
        //验证码申请成功
      }).catch(error => {
      //验证码申请失败
      Prompt.showToast({ message: "请输入正确的手机号和密码" + JSON.stringify(error) })
    });
  }else {
    Prompt.showToast({ message: "手机号和密码不能为空" })
  }
})

......
......

.onClick(() => {
  if (this.phoneNumber !== '' && this.password !== '') {
    let user = new PhoneUserBuilder()
      .setCountryCode(this.countryCode)
      .setPhoneNumber(this.phoneNumber)
      .setPassword(this.password) //可以给用户设置初始密码。填写后后续可以用密码来登录
      .setVerifyCode(this.VerifyCode)
      .build();
    agconnect.auth().createPhoneUser(user)
      .then(result => {
        // 创建用户成功
        AppStorage.Set('phoneNumber', user.phoneNumber)
        AppStorage.Set('password', user.password)
        AppStorage.Set('isVisitor', false)
        AppStorage.Set('isLogin', true)
        AppStorage.Set('userName', user.phoneNumber)
        router.pushUrl({
          url: "pages/Index"
        })
      })
      .catch(error => {
        // 创建用户失败
        Prompt.showToast({ message: "注册失败," + JSON.stringify(error),duration:4 })
      })
  } else {
    Prompt.showToast({ message: "手机号和密码不能为空" })
  }
})


7.其他云服务
说明:这是云模板初始业务,如有其他业务需求,可自行添加。
 

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区


四、卡片开发
按需求添加卡片,也可以只用初始创建卡片,修改相关卡片参数即可。

1.创建卡片
 

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区


2.初始卡片修改相关参数
打开resources/base/profile目录下的form_config.json文件,按需修改参数
 

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区


3.卡片加载与获取数据

卡片加载更新部分由EntryFormAbility.ts文件完成,这里可参考官方文档操作即可。

由于没有连接到后台数据部分,所以我们这里采用自定义模拟数据,然后在每次卡片挂载到桌面时,随机选取卡片内容,代码如下:
 

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区

...
aboutToAppear() {
  let idx = Math.floor((Math.random() * wz_arr.length))
  this.zi = wz_arr[idx].zi
  this.pinYin = wz_arr[idx].pinYin
  this.buShou = wz_arr[idx].buShou
  this.biHua = wz_arr[idx].biHua
  this.fanTi = wz_arr[idx].fanTi
  this.near_words = wz_arr[idx].near_words
  this.reverse_words = wz_arr[idx].reverse_words
  this.explain = wz_arr[idx].explain.toString()
}

...

4.卡片主要代码

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区

...

Column() {
  //微卡
  Stack() {
    Text(this.zi)
      .width("100%")
      .textAlign(TextAlign.Center)
      .fontSize(30)
      .fontColor('#1f1f1f')
      .fontWeight(600)
      .margin({right:20})
    Row(){
      Image("/common/images/R2.png")
        .width(18)
        .height(18)
        .margin({right:"15%"})
        .objectRepeat(ImageRepeat.NoRepeat)
        .onClick(()=>{
          this.rotateAngle = 180
          this.aboutToAppear()
        })
        .rotate({ angle: this.rotateAngle })
        .animation({
          duration:300,
          curve: Curve.Linear,
          playMode: PlayMode.Normal
        })
    }.width("100%").justifyContent(FlexAlign.End)

  }
  .width("100%")
  .height(72)
  //小卡、中卡
  Flex({direction:FlexDirection.Column,wrap:FlexWrap.Wrap,justifyContent:FlexAlign.Start}){
    Column(){
      Text("拼音:"+this.pinYin).fontSize(14).margin({left:15})
      Text("部首:"+this.buShou).fontSize(14).margin({top:4,left:15})
      Text("笔画:"+this.biHua).fontSize(14).margin({top:4,left:15})
      Text("繁体:"+this.fanTi).fontSize(14).margin({top:4,left:15})
    }.width(208)
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start)

    Column(){
      Text("近义词:"+this.near_words).fontSize(12).margin({right:15})
      Text("反义词:"+this.reverse_words).fontSize(12).margin({top:4,right:15})
    }
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start)
  }
  .width("100%")
  .height(102)
  //大卡
  Column(){
    Text("解释:").width("100%").textAlign(TextAlign.Start).fontSize(12).margin({left:15,right:15})
    Text(this.explain).fontSize(14).margin({top:4,left:15,right:15})
  }.width("100%")
  .height("100%")
  .justifyContent(FlexAlign.Start)
  .alignItems(HorizontalAlign.Start)
}
.width("100%")
.alignItems(HorizontalAlign.Center)
.backgroundImage("/common/images/cywz.jpg")
.backgroundImageSize(ImageSize.Cover)
.onClick(() => {
  postCardAction(this, {
    "action": this.ACTION_TYPE,
    "abilityName": this.ABILITY_NAME,
    "params": {
      "message": this.MESSAGE,
    }
  });
})

...

五、项目运行
 

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区


六、结语
各位感兴趣的开发者可以点击进入元服务官网,详细了解元服务、万能卡片相关信息。大家还可以在华为手机的负一屏、华为应用市场元服务专区体验本文作者及团队已经上架运营的元服务-成语心情,用万能卡片按照自己的心情来刷刷成语吧。

HarmonyOS元服务开发实践:桌面卡片字典-开源基础软件社区

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/835133.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

NVM保姆级安装配置

nvm安装配置 1、NVM简介2、NVM安装三、NVM使用四、NVM常用命令 1、NVM简介 在项目开发过程中&#xff0c;使用到vue框架技术&#xff0c;需要安装node下载项目依赖&#xff0c;但经常会遇到node版本不匹配而导致无法正常下载&#xff0c;重新安装node却又很麻烦。为解决以上问…

浏览器调式的时候刷新页面network的日志和请求不会消失的解决办法

把“Preserve log”勾选去掉&#xff0c;F5刷新页面时&#xff0c;就是最新的日志&#xff0c;新的请求 把“Preserve log”勾上&#xff0c;F5刷新浏览器页面时&#xff0c;就会有历史日志&#xff0c;而不会消失

基于VR技术的新型实验室教学模式——VR线上生物实验室

随着科技的发展&#xff0c;虚拟现实技术已经逐渐走进了我们的生活。在教育领域中&#xff0c;虚拟现实技术也被广泛应用于各种学科的教学中。其中&#xff0c;VR线上生物实验室是广州华锐互动开发的&#xff0c;一种基于VR技术的新型教学模式&#xff0c;它能够为学生提供更加…

开源免费用|Apache Doris 2.0 推出跨集群数据复制功能

随着企业业务的发展&#xff0c;系统架构趋于复杂、数据规模不断增大&#xff0c;数据分布存储在不同的地域、数据中心或云平台上的现象越发普遍&#xff0c;如何保证数据的可靠性和在线服务的连续性成为人们关注的重点。在此基础上&#xff0c;跨集群复制&#xff08;Cross-Cl…

镜头基础知识

本文介绍镜头基础知识。 1.焦距 焦距指透镜中心到光聚集之焦点的距离&#xff0c;如下图&#xff0c;通常用f表示。 焦距是正值&#xff0c;一束平行光将会聚集在一个点上&#xff0c;焦距是负值&#xff0c;一束平行光在通过透镜之后将会扩散开。 注意&#xff1a; 1)这里…

【Winform学习笔记(五)】引用自定义控件库(dll文件)

引用自定义控件库dll文件 前言正文1、生成dll文件2、选择工具箱项3、选择需要导入的dll文件4、确定需要导入的控件5、导入及使用 前言 在本文中主要介绍 如何引用自定义控件库(dll文件)。 正文 1、生成dll文件 通过生成解决方案 或 重新生成解决方案 生成 dll 文件 生成的…

MybatisPlus注意点

1、表id过长 默认生成的id过长&#xff0c;不是从1开始需要加如下注解&#xff0c;如果表已经建立&#xff0c;需要重新建表才生效 2、MybatisPlus表明字段非数据库字段 mybatis-plus 就可以用注解 TableField(exist false) 表明字段非数据库字段 TableName(value "o…

第十一次CCF计算机软件能力认证

第一题&#xff1a;打酱油 小明带着 N 元钱去买酱油。 酱油 10 块钱一瓶&#xff0c;商家进行促销&#xff0c;每买 3 瓶送 1 瓶&#xff0c;或者每买 5 瓶送 2 瓶。 请问小明最多可以得到多少瓶酱油。 输入格式 输入的第一行包含一个整数 N&#xff0c;表示小明可用于买酱油的…

第2章 C语言概述

本章介绍以下内容&#xff1a; 运算符&#xff1a; 函数&#xff1a;main()、printf() 编写一个简单的C程序 创建整型变量&#xff0c;为其赋值并在屏幕上显示其值 换行字符 如何在程序中写注释&#xff0c;创建包含多个函数的程序&#xff0c;发现程序的错误 什么是关键字 C程…

与时间赛跑:图算法如何加持自然灾害应急响应场景?

近日&#xff0c;受台风“杜苏芮”影响&#xff0c;华北、黄淮等地出现极端降雨过程&#xff0c;引发洪涝和地质灾害&#xff0c;造成京津冀地区的重大人员伤亡和财产损失。大家的心都被这场暴雨牢牢牵动着。 而在7月31日晚&#xff0c;小编的微信朋友圈开始被《京津冀暴雨紧急…

安达发|APS智能排程系统帮助企业提升生产效率

APS高级排产软件&#xff0c;这个名字听起来就像一把伞&#xff0c;为整个产业链提供了完美的遮蔽。它能够从产业链中提取实时数据信息&#xff0c;经过复杂的数学运算&#xff0c;为我们提供一个可调度、快速且可靠的生产计划。这款软件集成了多种先进技术&#xff0c;如优化算…

【Linux命令200例】awk文本处理工具的系统与实战讲述(常用)

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f3c6;本文已…

抖音seo源码开发源代码搭建分享

抖音SEO源码开发涉及到以下几个方面&#xff1a; 前端开发&#xff1a;包括抖音SEO页面的设计与布局&#xff0c;以及需要使用到的前端技术&#xff0c;如HTML、CSS、JavaScript等。 后端开发&#xff1a;包括抖音SEO页面的数据获取和处理&#xff0c;以及需要使用到的后端技术…

[CKA]考试之调度 pod 到指定节点

由于最新的CKA考试改版&#xff0c;不允许存储书签&#xff0c;本博客致力怎么一步步从官网把答案找到&#xff0c;如何修改把题做对&#xff0c;下面开始我们的 CKA之旅 题目为&#xff1a; Task 创建一个Pod&#xff0c;名字为nginx-kusc00401&#xff0c;镜像地址是nginx…

Shell脚本学习-for循环结构3

案例1&#xff1a; 使用for循环结构在/oldboy目录下创建10个文件&#xff0c;名称依次为&#xff1a; chang-1 chang-2 chang-3 ... chang-10 脚本&#xff1a; [rootvm1 scripts]# cat for9.sh #!/bin/bash[ -d "/chang" ] || mkdir /changcd /changfor i i…

OA会议管理系统之我的审批(审批签字可生成图片)

一、前言 1.导读 OA会议管理系统之我的会议&#xff08;会议排座&可拖拽座位&附源码&#xff09;http://t.csdn.cn/iVLAD 书接上文&#xff0c;在上一篇中我们完成了我的会议功能&#xff0c;其中有功能会议送审&#xff0c;送审人就可以在我的审批功能中查看…

信息安全风险评估总结【GB/T 20984-2007】

文章目录 风险评估实施流程一.风险评估准备1.1确定风险评估目标1.2确定风险评估范围1.3组建评估团队1.4风险评估工作启动会议1.5系统调研1.6确定评估依据1.7确定评估工具1.8制定评估方案1.9获得支持 二.风险要素识别2.1实施整个流程图2.2资产识别2.2.1资产调查2.2.2资产分类2.2…

vCenter 7.0 的热迁移配置操作指南

vCenter 7.0 的热迁移配置操作指南 现在我们已经部署好了vCenter 7.0&#xff08;VMware vCenter Server 7.0快速部署操作指南&#xff09;和几台ESXi 7.0的虚拟主机&#xff08;VMWare ESXi 7.0快速部署操作指南&#xff09;&#xff0c;我们可以继续测试之前操作失败的热迁移…

【练】要求打印,倒置线程,顺序执行。运行顺序为:线程1 线程2 线程1 线程2

要求定义一个全局变量 char buf[] "1234567"&#xff0c;创建两个线程&#xff0c;不考虑退出条件&#xff0c;另&#xff1a; A线程循环打印buf字符串&#xff0c;B线程循环倒置buf字符串&#xff0c;即buf中本来存储1234567&#xff0c;倒置后buf中存储7654321. 不…

RabbitMQ 教程 | 第9章 RabbitMQ 高阶

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…