Html+Css+Js Vs 鸿蒙原生，代码区别

原创已于 2025-06-05 09:59:31 修改 · 220 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript #鸿蒙

于 2025-06-05 09:59:06 首次发布

Html+Css+Js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="icon.css">
    <style>
        .box{
            display: flex;
            width: 100%;
            padding: 5px;   
            background-color:#131313;
            color: #fff;
        }
        .box_img{
            width: 70px;
            height: 70px;
        }
        .box_img > img{
            border-radius: 5px;
            width: 100%;
            height: 100%;
        }
        .box_info{
            display:flex;
            flex-direction: column;
            margin-left: 10px;
            flex: 1; /* 让 info 占满剩余空间 */
            position: relative;
        }
        .box_info .title{
            margin:3px 0px;
            font-weight: 550;
        }
        .box_info > div {
            display: flex;
            align-items: center; 
        }
        .box_info .vip{
            flex: 0.1; 
            color: #9A8E28;
            font-size: 9px;
            padding: 3px;
            border: 1px solid #9A8E28;
            border-radius: 10px;
            text-align: center; 
        }
        .box_info .name{
            flex: 2;
            font-size: 12px;
            padding-left: 5px; 
        }
        .box_info .more{
            font-size: 25px;
            position: absolute;
            top: 17px;
            right: 10px;
        }
    </style>
</head>
<body>
    <div class="body">


    </div>
    <script src="jquery.js"></script>
    <script>
    const arr = [
            {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.jpg',
      name: '直到世界的尽头',
      author: 'WANDS',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/1.jpg',
      name: '画',
      author: '赵磊',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/2.jpg',
      name: 'Sweet Dreams',
      author: 'TPaul Sax / Eurythmics',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/3.jpg',
      name: '奢香夫人',
      author: '凤凰传奇',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/4.jpg',
      name: '空心',
      author: '光泽',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/5.jpg',
      name: '反转地球',
      author: '潘玮柏',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/6.jpg',
      name: 'No.9',
      author: 'T-ara',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/7.jpg',
      name: '孤独',
      author: 'G.E.M.邓紫棋',
    },

    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/8.jpg',
      name: 'Lose Control',
      author: 'Hedley',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/9.jpg',
      name: '倩女幽魂',
      author: '张国荣',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/10.jpg',
      name: '北京北京',
      author: '汪峰',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/11.jpg',
      name: '苦笑',
      author: '汪苏泷',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/12.jpg',
      name: '一生所爱',
      author: '卢冠廷 / 莫文蔚',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/13.jpg',
      name: '月半小夜曲',
      author: '李克勤',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/14.jpg',
      name: 'Rolling in the Deep',
      author: 'Adele',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/15.jpg',
      name: '海阔天空',
      author: 'Beyond',
    }
    ]
    const str = arr.map(item => `
        <div class="box">
            <div class="box_img"><img src="${item.img}" alt=""></div>
            <div class="box_info">
                <span class="title">${item.name}</span>
                <div>
                    <span class="vip">VIP</span>
                    <span class="name">${item.author}</span>
                    <span class="iconfont icon-gengduo more"></span>
                </div>
            </div>
        </div>    
    `)
    $(".body").html(str)
    </script>
</body>
</html>

鸿蒙原生

interface SongItemType {
  img: string // 图像路径
  name: string // 名称
  author: string // 作者
}

@Entry //程序的入口
@ComponentV2 // 下面的代码是组件
struct Index {
  @Local playIndex:number = -1
  songs: SongItemType[] = [
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.jpg',
      name: '直到世界的尽头',
      author: 'WANDS',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/1.jpg',
      name: '画',
      author: '赵磊',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/2.jpg',
      name: 'Sweet Dreams',
      author: 'TPaul Sax / Eurythmics',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/3.jpg',
      name: '奢香夫人',
      author: '凤凰传奇',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/4.jpg',
      name: '空心',
      author: '光泽',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/5.jpg',
      name: '反转地球',
      author: '潘玮柏',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/6.jpg',
      name: 'No.9',
      author: 'T-ara',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/7.jpg',
      name: '孤独',
      author: 'G.E.M.邓紫棋',
    },

    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/8.jpg',
      name: 'Lose Control',
      author: 'Hedley',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/9.jpg',
      name: '倩女幽魂',
      author: '张国荣',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/10.jpg',
      name: '北京北京',
      author: '汪峰',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/11.jpg',
      name: '苦笑',
      author: '汪苏泷',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/12.jpg',
      name: '一生所爱',
      author: '卢冠廷 / 莫文蔚',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/13.jpg',
      name: '月半小夜曲',
      author: '李克勤',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/14.jpg',
      name: 'Rolling in the Deep',
      author: 'Adele',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/15.jpg',
      name: '海阔天空',
      author: 'Beyond',
    }
  ]
  build() {
    //Build 里面要有唯一的容器根组件
    Column(){
      Text("猜你喜欢").font({weight:700,size:20}).fontColor('#fff').width('100%').margin({bottom:10})
      Column(){
          List(){
            ForEach(this.songs,(item:SongItemType,index:number)=>{
              ListItem(){
                Row(){
                  Stack(){
                    Image(item.img)
                      .width(80)
                      .border({radius:8})
                      .margin({right:10})
                    if(this.playIndex === index){
                      Image($r('app.media.wave')).width(24)
                    }
                  }
                  //字
                  Column(){
                    Text(item.name).fontColor('#fff').fontWeight('700').width('100%').margin({bottom:15})
                    Row(){
                      Text('VIP')
                        .font({size:10}).fontColor('#9A8E28')
                        .border({width:1,color:'#9A8E28',radius:15}).margin({right:8}).padding(3)
                      Text(item.author).fontColor('#515151').fontSize(15)
                    }.width('100%')
                  }.layoutWeight(1)
                  //更多
                  Image($r("app.media.more")).width(20)
                }
              }.margin({bottom:10}).onClick(()=> {
                if(this.playIndex === index){
                  this.playIndex = -1
                }else{
                  this.playIndex = index
                }
              })
            })

          }
      }
    }.width('100%').height('100%').backgroundColor('#131313').padding(10)
     .expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])
  }
}