相关问题
基于JS开发的鸿蒙应用卡片，点击卡片路由跳转怎么指定路由地址？？？？
1921浏览 • 1回复 待解决
#鸿蒙通关秘籍#JS卡片有哪些开发限制？
27浏览 • 1回复 待解决
#鸿蒙通关秘籍#在开发中，我们基于服务卡片的开发模式有哪些？
56浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何为鸿蒙JS卡片开发添加自定义数据绑定？
31浏览 • 1回复 待解决
#鸿蒙通关秘籍#服务卡片的开发，好像分为 ArkTS 和 JS ，问一下什么是ArkTS卡片和JS卡片？
54浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何开发鸿蒙OS中的服务卡片？
22浏览 • 1回复 待解决
#鸿蒙通关秘籍#多语言UI开发中如何处理基于JSON资源文件的图片路径？
47浏览 • 1回复 待解决
基于鸿蒙JS UI，使用远程真机拍照上传报错
7042浏览 • 2回复 待解决
鸿蒙js开发UI界面之后如何调用java提供的接口？
3866浏览 • 1回复 待解决
如何用JS UI做一个基于鸿蒙OS的股票走势图？
7165浏览 • 1回复 待解决
#鸿蒙通关秘籍#鸿蒙UI开发中如何使用CSS的尺寸单位？
84浏览 • 1回复 待解决
服务卡片只能基于JAVA开发吗？
3449浏览 • 1回复 待解决
#鸿蒙通关秘籍#鸿蒙UI开发中如何选择和添加合适的容器？
78浏览 • 1回复 待解决
高德地图的接入，鸿蒙应用开发的JS UI框架如何实现？
7823浏览 • 1回复 待解决
#鸿蒙通关秘籍#动态卡片与静态卡片事件能力在鸿蒙开发中的应用
39浏览 • 1回复 待解决
#鸿蒙通关秘籍#鸿蒙开发中的UI样式如何应用逻辑像素？
54浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙开发中基于ArkUI网格布局提升性能？
103浏览 • 1回复 待解决
鸿蒙os的JS UI如何导入jquery
9415浏览 • 4回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙开发中基于ArkUI的网格布局中显示数据？
75浏览 • 1回复 待解决
#鸿蒙通关秘籍#ArkTS怎么帮我搞定UI开发？
141浏览 • 1回复 待解决
#鸿蒙通关秘籍#在鸿蒙UI开发中如何应用不同的CSS样式？
89浏览 • 1回复 待解决
#鸿蒙通关秘籍#如何在鸿蒙UI开发中应用CSS伪类？
78浏览 • 1回复 待解决
#鸿蒙通关秘籍#ArkTS卡片与JS卡片有哪些场景能力差异？
14浏览 • 1回复 待解决
#鸿蒙通关秘籍#怎样选择ArkTS卡片的开发语言类型？
26浏览 • 1回复 待解决
关于 JS UI 开发的应用的问题？
5692浏览 • 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的鸿蒙卡片开发。