相关问题
#鸿蒙通关秘籍#JS卡片有哪些开发限制？
1149浏览 • 1回复 待解决
基于JS开发的鸿蒙应用卡片，点击卡片路由跳转怎么指定路由地址？？？？
3045浏览 • 1回复 待解决
#鸿蒙通关秘籍#在开发中，我们基于服务卡片的开发模式有哪些？
1186浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何为鸿蒙JS卡片开发添加自定义数据绑定？
1144浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何开发鸿蒙OS中的服务卡片？
1083浏览 • 1回复 待解决
#鸿蒙通关秘籍#服务卡片的开发，好像分为 ArkTS 和 JS ，问一下什么是ArkTS卡片和JS卡片？
1318浏览 • 1回复 待解决
#鸿蒙通关秘籍#鸿蒙UI开发中如何使用CSS的尺寸单位？
1105浏览 • 1回复 待解决
#鸿蒙通关秘籍#动态卡片与静态卡片事件能力在鸿蒙开发中的应用
1184浏览 • 1回复 待解决
#鸿蒙通关秘籍#多语言UI开发中如何处理基于JSON资源文件的图片路径？
1112浏览 • 1回复 待解决
#鸿蒙通关秘籍#鸿蒙开发中的UI样式如何应用逻辑像素？
1006浏览 • 1回复 待解决
#鸿蒙通关秘籍#鸿蒙UI开发中如何选择和添加合适的容器？
1109浏览 • 1回复 待解决
#鸿蒙通关秘籍#ArkTS卡片与JS卡片有哪些场景能力差异？
1185浏览 • 1回复 待解决
#鸿蒙通关秘籍#怎样选择ArkTS卡片的开发语言类型？
1070浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙UI开发中应用CSS伪类？
1103浏览 • 1回复 待解决
#鸿蒙通关秘籍#ArkTS怎么帮我搞定UI开发？
1415浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙开发中基于ArkUI网格布局提升性能？
1461浏览 • 1回复 待解决
#鸿蒙通关秘籍#在鸿蒙UI开发中如何应用不同的CSS样式？
1345浏览 • 1回复 待解决
鸿蒙js开发UI界面之后如何调用java提供的接口？
5011浏览 • 1回复 待解决
#鸿蒙通关秘籍#鸿蒙卡片如何持久化存储？
1196浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何实现卡片FormExtensionAbility
1054浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙开发中基于ArkUI的网格布局中显示数据？
1153浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何持久化鸿蒙服务卡片的信息？
1000浏览 • 1回复 待解决
基于鸿蒙JS UI，使用远程真机拍照上传报错
8133浏览 • 2回复 待解决
#鸿蒙通关秘籍#在鸿蒙UI开发中如何使用表单组件实现交互？
1226浏览 • 1回复 待解决
#鸿蒙通关秘籍#在鸿蒙UI开发中如何运用CSS样式预编译？
1224浏览 • 1回复 待解决
开发基于JS UI的鸿蒙卡片时，使用HML+CSS+JSON配置卡片页面。首先，在HML中使用类Web范式的组件描述页面信息：
<div class="container"> <stack> <div class="container-img"> <image src="/common/widget.png" class="bg-img"></image> </div> <div class="container-inner"> <text class="title">`title`</text> <text class="detail_text" onclick="routerEvent">`detail`</text> </div> </stack> </div>
在CSS文件中定义组件的样式：
.container { flex-direction: column; justify-content: center; align-items: center; }
.bg-img { flex-shrink: 0; height: 100%; }
.container-inner { flex-direction: column; justify-content: flex-end; align-items: flex-start; height: 100%; width: 100%; padding: 12px; }
.title { font-size: 19px; font-weight: bold; color: white; text-overflow: ellipsis; max-lines: 1; }
.detail_text { font-size: 16px; color: white; opacity: 0.66; text-overflow: ellipsis; max-lines: 1; margin-top: 6px; }
在JSON文件中配置卡片的数据和交互事件：
{ "data": { "title": "TitleDefault", "detail": "TextDefault" }, "actions": { "routerEvent": { "action": "router", "abilityName": "EntryAbility", "params": { "message": "add detail" } } } }
通过这些步骤，实现基于JS UI的鸿蒙卡片开发。