HarmonyOS原子化服务Music卡片体验 原创

鸿蒙时代
发布于 2021-6-16 15:16
浏览
1收藏

一、呈现样式

  HarmonyOS原子化服务Music卡片体验-鸿蒙开发者社区

二、创建开发流程

新建项目后在entry目录下任意文件右键新建service widget(卡片)

HarmonyOS原子化服务Music卡片体验-鸿蒙开发者社区

  

选择你需要的模板

  HarmonyOS原子化服务Music卡片体验-鸿蒙开发者社区

输入配置项

  HarmonyOS原子化服务Music卡片体验-鸿蒙开发者社区

 

 

项目的config.json文件(新建卡片后自动生成)

  HarmonyOS原子化服务Music卡片体验-鸿蒙开发者社区

卡片的实现类(新建卡片后自动生成)

  HarmonyOS原子化服务Music卡片体验-鸿蒙开发者社区

 

三、JSON代码

{
  "data": {
    "itemTitle": "JLTFMusic",
    "itemContent": "蛟龙腾飞",
    "src": "/common/icon.png"
  },
  "actions": {
    "getPrevious": {
      "action": "message",
      "params": {
        "mAction": "JLTFPrevious"
      }
    },
    "play": {
      "action": "message",
      "params": {
        "mAction": "JLTFPlay"
      }
    },
    "getNext": {
      "action": "message",
      "params": {
        "mAction": "JLTFNext"
      }
    }
  }
}

HML代码

<div class="card_root_layout">
    <div class="div_basic_container">
        <image class="item_image" src="{{src}}" onclick="play">
        </image>
        <div class="div_right_container">

            <div class="title_container">
                <text class="item_title">{{ itemTitle }}
                </text>
                <text class="item_content">{{ itemContent }}
                </text>
            </div>

            <div class="button_container">
                <button class="button_other" type="circle" onclick="getPrevious" icon="/common/previous.jpg">
                </button>
                <button class="button_other" type="circle" onclick="play" icon="/common/play.jpg">
                </button>
                <button class="button_other" type="circle" onclick="getNext" icon="/common/next.jpg">
                </button>
            </div>
        </div>
    </div>
</div>

 

 

完整代码地址:

https://gitee.com/jltfcloudcn/jump_to/tree/master/%E9%9F%B3%E4%B9%90%E5%8D%A1%E7%89%87

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
音乐卡片蛟龙腾飞.rar 1.31M 29次下载
2
收藏 1
回复
举报
回复
    相关推荐