• 小程序中自定义组件

    文章目录

    小程序项目

    代码涉及的主要文件有：

    1. app.json
    2. pages/index/index.wxml
    3. pages/index/index.wxss
    4. pages/index/index.js

    在这里插入图片描述

    app.json

    {
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#971a22",
    "navigationBarTitleText": "首页",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    pages/index/index.wxml

    <view class="indexContainer">
  <view class="recommendSongContainer">
    <view class="header">
      <view class="title">推荐歌单</view>
      <view>
        <text class="desc">邂逅你的真爱歌单</text>
        <text class="btn">></text>
      </view>
    </view>
    <scroll-view class="recommendSongList" enable-flex scroll-x>
      <view class="recommendItem" wx:for="{{list}}" wx:key="id">
        <image src="{{item.picUrl}}"></image>
        <view class="name">{{item.title}}</view>
      </view>
    </scroll-view>
  </view>
  <view class="newSongContainer">
    <view class="header">
      <view class="title">新歌速递</view>
      <view>
        <text class="desc">更多鲜乐更多快落</text>
        <text class="btn">></text>
      </view>
    </view>
  </view>
  <view class="newDiscContainer">
    <view class="header">
      <view class="title">新碟上架</view>
      <view>
        <text class="desc">魔力新碟好听到爆</text>
        <text class="btn">></text>
      </view>
    </view>
  </view>
  <view class="screamSongContainer">
    <view class="header">
      <view class="title">尖叫新歌榜</view>
      <view>
        <text class="desc">潮人必听热门新单</text>
        <text class="btn">></text>
      </view>
    </view>
  </view>
</view>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    pages/index/index.wxss

    .indexContainer{
  padding: 0 20rpx;
}
.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx 0;
}
.header .title{
  font-weight: bold;
}
.header .desc{
  font-size: 24rpx;
  color: #333;
  padding: 0 20rpx;
}
.header .btn{
  font-size: 24rpx;
  padding: 0 10rpx;
  background: #eee;
  color: #888;
  border-radius: 6rpx;
}
.recommendSongList{
  display: flex;
  height: 280rpx;
}
.recommendSongList image{
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
  margin-right: 10rpx;
}
.recommendSongList .name{
  font-size: 26rpx;
  display: -webkit-box;
  overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    pages/index/index.js

    Page({
  data:{
    list:[]
  },
  onLoad(){
    this.getDataFromServer();
  },
  getDataFromServer(){
    const result = [
      {id: 494479726, picUrl: "https://p2.music.126.net/58ox3zVEmosSrdLaKj6x5w==/109951162827155600.jpg", title: "后摇MV | 原来后摇也能视觉化"},
      {id: 135595185, picUrl: "https://p2.music.126.net/11ZHf0G9FQzWNi-8sFzCmw==/109951164541050373.jpg", title: "Acid Jazz酸爵士—爵士乐中的“酸性”融合"},
      {id: 114846926, picUrl: "https://p2.music.126.net/GTf1b1G2dAs1SleurIfcJg==/3399689953594431.jpg", title: "歌名后缀大科普"},
      {id: 113780871, picUrl: "https://p2.music.126.net/qxUWSKhrd1UWME8oAYTMFQ==/109951164497486331.jpg", title: "「Cool Jazz」冷爵士让你全身心放松"},
      {id: 2962407224, picUrl: "https://p2.music.126.net/NW1GEN3sruiLpT4AZrdDFw==/109951165669533032.jpg", title: "『英伦女声』遗世而独立的不列颠玫瑰"},
      {id: 2107922801, picUrl: "https://p2.music.126.net/b--QkIcFfdxz_DryW55ZfA==/109951163165101034.jpg", title: "声光美学 I 经典电影中的古典配乐集"},
      {id: 78669437, picUrl: "https://p2.music.126.net/AfN_yyi-fQe8POTMKJFjAA==/7957165650297535.jpg", title: "美剧中的神级插曲"},
      {id: 3116763088, picUrl: "https://p2.music.126.net/MSom1XSXqt5K9ArZlJ29CQ==/109951164608648583.jpg", title: "音乐的力量 I 文艺复兴时期的世俗情歌"},
      {id: 101354498, picUrl: "https://p2.music.126.net/dmj9iqz8MsD_sCd1xBF0WA==/7918682744429845.jpg", title: "时尚运动•必备节奏"}
    ]
    this.setData({list:result})
  }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    自定义组件

    在这里插入图片描述
    项目根目录下新建文件夹：components，components下新建文件夹：Header，Header下新建Component，自动生成文件： Header.wxml、Header.wxss、Header.js和Header.json。

    代码变更涉及的文件有：

    1. components/Header/Header.wxml
    2. components/Header/Header.wxss
    3. components/Header/Header.js
    4. pages/index/index.json
    5. pages/index/index.wxml
    6. pages/index/index.wxss

    在这里插入图片描述

    components/Header/Header.wxml

    <view class="header">
  <view class="title">{{title}}</view>
  <view>
    <text class="desc">{{desc}}</text>
    <text class="btn">></text>
  </view>
</view>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    components/Header/Header.wxss

    .header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx 0;
}
.header .title{
  font-weight: bold;
}
.header .desc{
  font-size: 24rpx;
  color: #333;
  padding: 0 20rpx;
}
.header .btn{
  font-size: 24rpx;
  padding: 0 10rpx;
  background: #eee;
  color: #888;
  border-radius: 6rpx;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    components/Header/Header.js

    Component({
  properties: {
    title:{
      type:String,
      value:"默认标题"
    },
    desc:{
      type:String,
      value:"默认描述"
    }
  },
  data: {

  },
  methods: {

  }
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    pages/index/index.json

    {
  "usingComponents": {
    "Header":"/components/Header/Header"
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5

    pages/index/index.wxml

    <view class="indexContainer">
  <view class="recommendSongContainer">
    <Header title="推荐歌单" desc="邂逅你的真爱歌单"/>
    <scroll-view class="recommendSongList" enable-flex scroll-x>
      <view class="recommendItem" wx:for="{{list}}" wx:key="id">
        <image src="{{item.picUrl}}"></image>
        <view class="name">{{item.title}}</view>
      </view>
    </scroll-view>
  </view>
  <view class="newSongContainer">
    <Header title="新歌速递" desc="更多鲜乐更多快落"/>
  </view>
  <view class="newDiscContainer">
    <Header title="新碟上架" desc="魔力新碟好听到爆"/>
  </view>
  <view class="screamSongContainer">
    <Header title="尖叫新歌榜" desc="潮人必听热门新单"/>
  </view>
</view>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    pages/index/index.wxss

    .indexContainer{
  padding: 0 20rpx;
}
.recommendSongList{
  display: flex;
  height: 280rpx;
}
.recommendSongList image{
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
  margin-right: 10rpx;
}
.recommendSongList .name{
  font-size: 26rpx;
  display: -webkit-box;
  overflow: hidden;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    小结

    创建自定义组件

    微信小程序中使用 Component() 实现自定义组件，它接收一个对象作为参数，该对象包含多个属性，其中，常用的有：

    • properties，组件的对外属性，相当于vue或react中的props。类型是Object Map，非必填。如
    properties: {
  title:{
    type:String, //属性的类型，必填
    value:"默认标题" //属性的初始值，非必填
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • data，组件自己内部的数据。类型是Object，非必填。
    • methods，组件的方法。

    使用自定义组件

    使用自定义组件前，首先要在页面json文件中进行引用声明，如下所示，这样，页面的wxml中就可以像使用基础组件一样使用自定义组件。

    {
  "usingComponents": {
    "Header":"/components/Header/Header"
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5

    相关链接

    使用scroll-view实现滑块视图可能遇到的问题及其解决方法
    自定义组件介绍
    Component构造器

  • 相关阅读:
    python经典百题之打印素数
    使用＜a＞标签进行文件下载出现文件名称乱码、文件名变下划线
    PTFE恒压分液漏斗150ml耐酸碱白色四氟材质塑料漏斗
    蓝牙技术|Matter或能改变中国智能家居市场，蓝牙技术将得到进一步应用
    使用docker的常见bug
    C/C++高频面经-秋招篇
    倒置字符串
    Qt QFile文件操作详解
    嵌入式函数调用入栈与出栈
    UGUI学习笔记（七）自己实现圆形图片组件
  • 原文地址：https://blog.csdn.net/qzw752890913/article/details/125534880