基于JS，我成功开发了HarmonyOS鸿蒙Next笑话服务卡片

基于JS，我成功开发了HarmonyOS鸿蒙Next笑话服务卡片 下面文章我将带领大家开发一个基于JS的笑话服务卡片,最终效果如下图所示

开发工具: DevEco Studio 2.2.0.200 x64

代码已上传Gitee,文章末尾查看地址

一. 进入开发工具,点击 “Create HarmonyOS Project” 创建项目(如下所示)

二. 选择模板,默认第一个JS模板就可以(如下所示)

三. 设置项目相关参数配置,其它未标明的默认就行(如下所示)

四. 进入项目后默认会创建好服务卡片开发相关代码(如下所示)

1. 如果没有创建卡片相关代码可以手动创建(如下所示),已创建的跳到第五步

2. 选择好一个模板,点击"Next"(如下所示)

3. 填写相关配置,点击 “Finish” 即可创建好服务卡片(如下所示)

五. 服务卡片内部文件结构(如下所示)

我们开始时要先了解卡片上有哪些结构,根据结构进行编写代码,这个卡片上就分为三个部分

1. 卡片内容部分

2. 卡片名称部分

3. 刷新按钮部分

我们再根据各个部分进行页面布局并编写代码

六. JS端 ①编写 index.hml 文件

七. JS端 ②编写 index.css 文件

八. JS端 ③编写 index.json 文件

九. JS端 ④编写多语言配置文件

到此服务卡片 JS端开发完毕,后面进行JAVA端开发

由于要请求网络数据,进行网络请求就必须要先配置 “网络权限” 和 “网络模式”

1. 网络权限

2. 网络模式

网络访问前置条件已完成.

十. 网络请求类编写,代码过长查看代码 点击这里

十一. 进入 WidgetImpl 文件编写java卡片业务逻辑, 完整代码 点击查看

编写卡片JAVA端主要的就三个方法

1. 卡片初始化时

2. 卡片更新时

3. 卡片消息事件时

通过这三个方法就能控制JS端的卡片显示输出与交互事件

完成以上代码后就可以在你的手机里打开这样的效果了(如下所示)

你想问2*4的卡片怎么来的?很简单(如下所示),这里面还有很多配置可以自行研究,比如卡片标题,卡片描述,默认卡片等…

完整代码已上传Gitee,欢迎Star

代码地址: https://gitee.com/1145457389/harmony_js_card-demo