开发者使用华为快服务智慧平台提供的IDE工具进行卡片开发,选择预置在工具中的卡片模板,修改卡片样式,并填充卡片内容参数即可创建一张卡片,开发者通过华为快服务智慧平台创建一个常驻意图,将这张卡片上传到平台上,即可关联这张卡片作为常驻意图的实现,完成一个常驻服务的开发,利用真机测试能力,开发者可以在"智慧助手·今天"上查看服务卡片效果。

您建立什么

本题目中,开发者需要按照指引使用我们提供的IDE工具拖拽开发一张卡片,然后在华为快服务智慧平台上完成一个常驻服务配置,并使用华为快服务平台提供的真机测试能力,在"智慧助手·今天"上查看服务卡片效果,效果如下:

您将会学到什么

硬件要求

软件要求

创建卡片项目

打开快应用IDE,点击 文件-新建项目-新建卡片项目

填入卡片项目相关信息,可以选择预置的卡片模板,基于模板来开发,任意选择一模板

开发卡片

新建卡片后IDE会自动生成相应的卡片文件,卡片文件是以"ux/wux"为后缀,文件结构主要有三部分,分别为template、style、script。

Template模板

Template模板部分是类似HTML的标签语言,结合基础组件、自定义组件、事件,构建出页面的结构。

这部分主要是页面UI布局控件的设计,具体介绍请参照开发指导
同时IDE工具也提供了封装好的组件供开发者使用

可以根据自己需求拖入IDE封装好的组件到template中指定区域快速开发,拖入的组件如果需要微调的话,可以根据组件名进入自定义组件中修改

Style样式

Style样式用于描述template模板的组件样式,决定组件如何显示。

样式布局采用CSS Flexbox(弹性盒)样式,针对部分原生组件,对 CSS 进行了少量的扩充以及修改。为了解决屏幕适配问题,所有与大小相关的样式(例如width、font-size)均以基准宽度(默认750px)为基础,根据实际屏幕宽度进行缩放,例如width:100px,在1500px宽度屏幕上,width实际上为200px。

对于这种情况,IDE提供的组件做了Android 系统中的dp单位与快应用的px单位做了转化,在style中引入basic.scss ,使用dpConvert方法,填入的参数值为Android系统下具体的dp值即可

主要功能有模板内部样式、文件导入等等,具体功能请参照开发指导

script脚本

script脚本用于定义页面数据和实现生命周期接口,支持ES6语法。在这个模块中做的是整个卡片的数据获取、变量命名、生命周期管理等核心操作。

这部分具体做的是对象的定义、方法的编写、生命周期重写等等,具体功能请参照开发指导

按照以上规则最终生成以下卡片

卡片打包

在IDE工具中把开发好的项目打包,点击"项目>打包正式版本"。打包成功后,包的路径在项目的"dist"目录下

创建快服务

登录华为快服务智慧平台

选择创建一个全新的快服务,服务分类选择"购物比价>线上商城",语言为简体中文

填写服务信息,依次配置基本信息、发布国家、服务呈现信息

快服务配置

新增常驻意图

在配置中新增一个常驻意图,实现类型选择自定义卡片

意图绑定实现

在这里需要上传已开发好的卡片包,上传RPK包,保存

测试准备

点击"快服务>测试"

点击 "开始测试准备"

打开智慧助手·今天(在手机首页右滑进入)

点击"用户头像>情景智能"找到对应的服务

订阅该服务

订阅该服务,回到负一屏即可看到卡片

干得好,您已经成功完成了Codelabs并学到了:

已复制代码