一、项目说明1.DEMO 创意为卡片字典。2.不同卡片显示不同内容微卡、小卡、中卡、大卡根据不同卡片特征显示同一个字的不同内容基于用户习惯可选择喜欢的卡片。3.万能卡片刷新用户点击卡片刷新按钮查看新内容同时卡片设置了定时刷新让用户每天看到的卡片都是新的文字便于用户学习和查阅。4.元服务内具有搜索功能用户可以通过搜索查询相应的字和解释采用了类似现在用户习惯的上下滑动方式来进行逐字详细阐述。5.基于 API9、ArkTS 语言开发通过 serverless 云服务实现注册、登录等功能。二、元服务效果\1. 万能卡片效果2.元服务内页三、项目开发\1. 环境搭建软件要求DevEco Studio 版本DevEco Studio 3.1 Release 及以上版本。HarmonyOS SDK版本API version 9 及以上版本。硬件要求设备类型华为手机或运行在 DevEco Studio 上的华为手机设备模拟器。HarmonyOS 系统3.1.0 Developer Release 及以上版本。2.主要代码结构解读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 中进行。4.首页我们需要给应用添加底部菜单栏用于切换不同的应用模块由于各个模块之间属于完全独立的情况并且不需要每次切换都进行界面的刷新所以我们用到了 TabsTabContent 组件。本应用一共有首页、我的两个模块分别对应 Tabs 组件的两个子组件 TabContent。首页包含搜索文字和滑动浏览信息两个模块具体代码实现我们将在下边分模块进行说明。搜索文字主要用到 Search 组件通过搜索文字来跳转到相应的文字展示信息主要代码如下浏览信息模块主要用到 swiper 组件通过数据的懒加载行为来预缓存数据通过滑动页面来展示文字信息主要代码如下5.我的我的页包含游客登陆、用户登录两个模块。其中游客登陆不显示登录信息以及应用部分功能仅能使用部分应用能力用户登录显示用户部分信息并展开应用所有功能需要用户注册登录具体代码实现我们将在下边分模块进行说明。游客登录用户登录6.注册登录页面让用户进行账号注册能够完全使用应用。核心代码....onClick((){if(this.phoneNumber!this.password!){letverifyCodeSettingsnewVerifyCodeSettingBuilder().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!){letusernewPhoneUserBuilder().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.其他云服务说明这是云模板初始业务如有其他业务需求可自行添加。四、卡片开发按需求添加卡片也可以只用初始创建卡片修改相关卡片参数即可。\1. 创建卡片2.初始卡片修改相关参数打开 resources/base/profile 目录下的 form_config.json 文件按需修改参数3.卡片加载与获取数据卡片加载更新部分由 EntryFormAbility.ts 文件完成这里可参考官方文档操作即可。由于没有连接到后台数据部分所以我们这里采用自定义模拟数据然后在每次卡片挂载到桌面时随机选取卡片内容代码如下4.卡片主代码五、项目运行六、结语各位感兴趣的开发者可以点击进入元服务官网详细了解元服务、万能卡片相关信息。大家还可以在华为手机的负一屏、华为应用市场元服务专区体验本文作者及团队已经上架运营的元服务-成语心情用万能卡片按照自己的心情来刷刷成语吧。最后这里整理了一份《鸿蒙零基础入门学习指南》希望能对那些想要学习鸿蒙但是有没有方向的人提供一点帮助。本文档适用于HarmonyOS应用开发的初学者由于文档内容过多因此为了避免影响到大家的阅读体验在此只以截图展示部分内容详细完整版的看文末有免费的获取方式## 《鸿蒙零基础入门学习指南》目录一、快速入门适用于HarmonyOS应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用快速了解工程目录的主要文件熟悉HarmonyOS应用开发流程。开发准备基本概念工具准备构建第一个ArkTS应用Stage模型构建第一个ArkTS应用FA模型构建第一个JS应用FA模型二、开发基础知识应用程序包基础知识应用程序包概述应用程序包结构应用程序包多HAP机制应用程序包安装和卸载流程应用程序包更新流程共享包应用程序包快速修复应用配置文件Stage模型应用配置文件概述Stage模型app.json5配置文件module.json5配置文件应用配置文件概述FA模型应用配置文件概述FA模型app对象内部结构deviceConfig内部结构module对象内部结构三、资源分类与访问应用开发过程中经常需要用到颜色、字体、间距、图片等资源在不同的设备或配置中这些资源的值可能不同。资源分类与访问资源分类资源目录资源组目录创建资源目录和资源文件创建资源目录和资源文件创建资源目录创建资源文件资源访问应用资源系统资源资源匹配四、学习ArkTs语言ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript简称TS生态基础上做了进一步扩展继承了TS的所有特性是TS的超集。因此在学习ArkTS语言之前建议开发者具备TS语言开发能力。初识ArkTS语言基本语法基本语法概述声明式UI描述自定义组件状态管理其他状态管理其他状态管理概述Watch装饰器状态变量更改通知$$语法内置组件双向同步渲染控制渲染控制概述if/else条件渲染ForEach循环渲染LazyForEach数据懒加载扫描下方二维码免费领取《鸿蒙5.0零基础入门学习指南》