共计 3066 个字符，预计需要花费 8 分钟才能阅读完成。
本文转载分享自华为开发者论坛《HarmonyOS 元服务开发实际：桌面卡片字典》，作者：蛟龙腾飞
一、我的项目阐明
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. 首页
咱们须要给利用增加底部菜单栏，用于切换不同的利用模块，因为各个模块之间属于齐全独立的状况，并且不须要每次切换都进行界面的刷新，所以咱们用到了 Tabs，TabContent 组件。
本利用一共有首页、我的两个模块，别离对应 Tabs 组件的两个子组件 TabContent。
首页蕴含搜寻文字和滑动浏览信息两个模块，具体代码实现咱们将在下边分模块进行阐明。
搜寻文字：次要用到 Search 组件，通过搜寻文字来跳转到相应的文字展现信息，次要代码如下：
浏览信息模块：次要用到 swiper 组件，通过数据的懒加载行为，来预缓存数据，通过滑动页面来展现文字信息，次要代码如下：
5. 我的
我的页蕴含游客登陆、用户登录两个模块。
其中游客登陆不显示登录信息以及利用局部性能，仅能应用局部利用能力；
用户登录显示用户局部信息，并开展利用所有性能，须要用户注册登录；
具体代码实现咱们将在下边分模块进行阐明。
游客登录：
用户登录：
6. 注册登录页面让用户进行账号注册，可能齐全应用利用。
外围代码：
...
.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. 其余云服务
阐明：这是云模板初始业务，如有其余业务需要，可自行添加。
四、卡片开发
按需要增加卡片，也能够只用初始创立卡片，批改相干卡片参数即可。
1. 创立卡片
2. 初始卡片批改相干参数
关上 resources/base/profile 目录下的 form_config.json 文件，按需批改参数
3. 卡片加载与获取数据
卡片加载更新局部由 EntryFormAbility.ts 文件实现，这里可参考官网文档操作即可。
因为没有连贯到后盾数据局部，所以咱们这里采纳自定义模仿数据，而后在每次卡片挂载到桌面时，随机选取卡片内容，代码如下：
4. 卡片主代码
五、我的项目运行
六、结语
各位感兴趣的开发者能够点击进入元服务官网，具体理解元服务、万能卡片相干信息。大家还能够在华为手机的负一屏、华为利用市场元服务专区体验本文作者及团队曾经上架经营的元服务 - 成语情绪，用万能卡片依照本人的情绪来刷刷成语吧。
