本文转载分享自华为开发者论坛《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.卡片主代码

五、项目运行

六、结语

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

HarmonyOS元服务开发实践:桌面卡片字典的更多相关文章

  1. 基于 WebRTC 技术的实时通信服务开发实践

    随着直播的发展,直播实时互动性变得日益重要.又拍云在 WebRTC 的基础上,凭借多年的开发经验,结合当下实际情况,开发 UPRTC 系统,解决了网络延时.并发量大.客户端解码能力差等问题. WebR ...

  2. 升讯威微信营销系统开发实践:订阅号和服务号深入分析( 完整开源于 Github)

    GitHub:https://github.com/iccb1013/Sheng.WeixinConstruction因为个人精力时间有限,不会再对现有代码进行更新维护,不过微信接口比较稳定,经测试至 ...

  3. Go单体服务开发最佳实践

    单体最佳实践的由来 对于很多初创公司来说,业务的早期我们更应该关注于业务价值的交付,并且此时用户体量也很小,QPS 也非常低,我们应该使用更简单的技术架构来加速业务价值的交付,此时单体的优势就体现出来 ...

  4. 大规模web服务开发技术

    大规模web服务开发技术 总评        这本书是日本一个叫hatena的大型网站的CTO写的,通过hatena网站从小到大的演进来反应一个web系统从小到大过程中的各种系统和技术架构变迁,比较接 ...

  5. Redis的Python实践,以及四中常用应用场景详解——学习董伟明老师的《Python Web开发实践》

    首先,简单介绍:Redis是一个基于内存的键值对存储系统,常用作数据库.缓存和消息代理. 支持:字符串,字典,列表,集合,有序集合,位图(bitmaps),地理位置,HyperLogLog等多种数据结 ...

  6. 《Flask Web开发——基于Python的Web应用开发实践》一字一句上机实践(上)

    目录 前言 第1章 安装 第2章 程序的基本结构 第3章 模板 第4章 Web表单 第5章 数据库 第6章 电子邮件 第7章 大型程序的结构   前言 学习Python也有一个半月时间了,学到现在感觉 ...

  7. 我们必须要知道的RESTful服务最佳实践

    看过很多RESTful相关的文章总结,参齐不齐,结合工作中的使用,非常有必要归纳一下关于RESTful架构方式了,RESTful只是一种架构方式的约束,给出一种约定的标准,完全严格遵守RESTful标 ...

  8. 升讯威微信营销系统开发实践:(3)功能介绍与此项目推广过程的一些体会( 完整开源于 Github)

    GitHub:https://github.com/iccb1013/Sheng.WeixinConstruction因为个人精力时间有限,不会再对现有代码进行更新维护,不过微信接口比较稳定,经测试至 ...

  9. 【实战分享】又拍云 OpenResty / Nginx 服务优化实践

    2018 年 11 月 17 日,由 OpenResty 主办的 OpenResty Con 2018 在杭州举行.本次 OpenResty Con 的主题涉及 OpenResty 的新开源特性.业界 ...

  10. Angular开发实践(七): 跨平台操作DOM及渲染器Renderer2

    在<Angular开发实践(六):服务端渲染>这篇文章的最后,我们也提到了在服务端渲染中需要牢记的几件事件,其中就包括不要使用window. document. navigator等浏览器 ...

随机推荐

  1. 手把手教你用 NebulaGraph AI 全家桶跑图算法

    前段时间 NebulaGraph 3.5.0 发布,@whitewum 吴老师建议我把前段时间 NebulaGraph 社区里开启的新项目 ng_ai 公开给大家. 所以,就有了这个系列文章,本文是该 ...

  2. AntSK:打造你的本地AI知识库——离线运行详细教程

    亲爱的读者朋友们,今天我要给大家介绍一个强大的开源工具--AntSK.这个工具能让您在没有Internet连接时依然能使用人工智能知识库对话和查询,想象一下,即使在无网络的环境中,您也能与AI进行愉快 ...

  3. C++ auto与循环

    C++ auto与循环 C++ auto 的介绍 typeid(p).name();可以输出auto的类型 auto 是 C++11 引入的一个关键字,用于自动类型推导.编译器会根据初始化表达式的类型 ...

  4. ElasticSearch基本查询使用(2)

    在介绍本章之前,需要先打开安装的Kibana页面, 并打开命令行工具页面: 并且根据上节的介绍,我们需要根据中文搜索,所以需要在建立映射时,指定中文字段的分词器为Ik分词器, 默认为英文分词器,每个中 ...

  5. C++ //常用集合算法 //set_intersection //求俩个容器的交集 //set_union //求两个容器的并集 //set_difference //求两个容器的差集

    1 //常用集合算法 2 //set_intersection //求俩个容器的交集 3 //set_union //求两个容器的并集 4 //set_difference //求两个容器的差集 5 ...

  6. Harbor 2.1.2 安装部署

    环境 首先需要准备好 Docker + Docker-Compose 环境,Docker 在 CentOS 7.x 的安装教程请参考 这篇文章,后续文章假设你已经安装好了上述环境. 安装 标准安装 首 ...

  7. RabbitMQ集群运维实践

    一.RabbitMQ的集群模式 主要有两种:普通集群模式和镜像队列模式.下面分别介绍这两种模式的原理: 1.普通集群模式: 在普通集群模式下,RabbitMQ的集群节点之间主要同步元数据,而不同步存储 ...

  8. 记录--通过Promise实现分批处理接口请求

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 如何通过 Promise 实现百条接口请求? 实际项目中遇到需要批量发起上百条接口请求怎么办? 最新案例代码在此!点击看看 前言 不知你项 ...

  9. 记录--从AI到美颜全流程讲解

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 美颜和短视频 美颜相关APP可以说是现在手机上的必备的软件,例如抖音,快手,拍出的"照骗"和视频不加美颜效果,估计没有 ...

  10. Liunx-LVM创建与扩容

    LVM是 Logical Volume Manager(逻辑卷管理)的简写,它是Linux环境下对磁盘分区进行管理的一种机制,它由Heinz Mauelshagen在Linux 2.4内核上实现,最新 ...