微信小程序中自定义组件

已于 2022-07-28 09:45:44 修改
阅读量595 收藏
点赞数
分类专栏： 微信小程序（新） 文章标签： 自定义组件 Component构造器
于 2022-06-30 10:56:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/125534880
版权
本文详细介绍了微信小程序中创建与使用自定义组件的过程，包括`Header`组件的实现，涉及到`app.json`、`index.wxml`、`index.wxss`和`index.js`等关键文件的配置。通过组件化，提高了代码复用性和项目结构的清晰度，简化了页面结构。同时，文章还提及了使用`scroll-view`组件时可能遇到的问题及解决方案，以及自定义组件的属性设置和方法定义。
摘要由CSDN通过智能技术生成

文章目录

小程序项目

代码涉及的主要文件有：

  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"
}

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>

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;
}

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})
  }
})

自定义组件

在这里插入图片描述
项目根目录下新建文件夹：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>

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;
}

components/Header/Header.js

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

  },
  methods: {

  }
})

pages/index/index.json

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

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>

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;
}

小结

创建自定义组件

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

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

使用自定义组件

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

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

相关链接

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

richest_qi
关注
专栏目录
微信小程序自定义组件及轮播图片自适应
weixin_49215012的博客
08-04 420
微信小程序自定义组件及轮播图片自适应 轮播组件wxml （注：根据业务需求我这里是重写微信小程序的轮播组件 <!-- 轮播组件wxml （**注：根据业务需求我这里是重写微信小程序的轮播组件**） --> <view class="rotation"> <swiper class="home-swiper" bindchange="bindchange" style="width:{{width}};height:{{imgheights[current]}}r
微信小程序如何自定义table组件
12-03
背景 最近想要捣鼓一个自己的小程序，其中数据展示部分比较多，想用table来做展示，但是微信小程序并没有table组件，于是就自己动手捣鼓了一个，勉强能用。 可以看看效果： etable使用介绍 etable的使用很简单，分为 引入、使用、配置等3个阶段 1、引入 首先在要使用的页面中的json文件中配置如下： { "usingComponents": { "etable" : "/compenents/etable/etable" } } 2、使用 在wxml页面需要用到的地方使用，如下： <etable
微信小程序自定义组件--日历组件
06-05
这是自己编写的一个轻量级的微信小程序组件，将该组件解压到你的组件文件夹下，即可使用。该组件可以标记日期，自行更改标记图标即可，可折叠展开，可左右滑动切换月份
微信小程序 - 自定义头部导航栏开发
最新发布
觉醒法师的专栏
07-30 3760
默认情况下，‌小程序的顶部导航栏由系统自动生成，‌允许修改一些基本样式如背景色、‌文字颜色等。‌然而，‌如果需要实现更复杂的样式，‌如自定义图标、‌背景等，‌或者需要适配不同手机屏幕的高度和样式，‌就需要自定义顶部导航栏。‌ 小程序自定义头部导航栏的开发主要涉及系统顶部状态栏和导航栏标题区域，‌自定义顶部导航栏的好处包括提高用户体验、‌增加页面交互性等。‌创建一个自定义导航栏组件，‌包含导航栏的样式和交互逻辑，‌并在需要使用导航栏的页面中引入自定义导航栏组件。‌
微信小程序自定义组件——添加图片组件
暗影刀客的博客
05-12 1万+
文章目录一、预期功能二、组件的设计方案三、现在上代码（根据引用关系进行展示）3.1 image-view组件3.2 row-view组件3.3 add-img组件 先上图 一、预期功能 实现图片的添加 实现图片的删除 实现图片的预览 二、组件的设计方案 2.1 添加图片方案有几种添加方式 添加的同时上传，这样最后提交表单的时候便捷，但是会浪费一些多余的流量和服务器资源 添加只保存本地url...
微信小程序日历签到功能demo
08-13
要实现一个简单的日历，需要先知道几个值： 每月有多少天 每月第一天、最后一天各星期几 每月1号之前应有多少天属于上一个月 每月最后一天之后应有多少天属于下一个月
微信小程序各种自定义组件
05-10
组件的wxml结构请看dist/components/下的组件 样式文件可直接引用dist/components/wux.wxss 插件及文档 ActionSheet - 上拉菜单 Backdrop - 背景幕 Barcode - 条形码 Button - 浮动按钮 Calendar - 日历 CountDown ...
微信小程序-自定义组件-遮罩层
05-05
在微信小程序开发中，自定义组件是提升代码复用性和模块化的重要手段。遮罩层，也称为蒙层，是一种常见的UI元素，用于在页面上创建半透明的覆盖层，通常用于显示弹窗、加载提示或者进行用户交互时提供背景效果。在此...
基于canvas 2D实现微信小程序自定义组件-环形进度条
06-11
在微信小程序开发中，自定义组件是提升代码复用性和应用可维护性的重要手段。本教程将探讨如何利用canvas 2D API来实现一个高效、可定制的环形进度条自定义组件。Canvas 2D 提供了一套丰富的绘图接口，让我们能够...
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
01-18
最近为我开源的小项目：微信小程序扩展自定义组件库（点击去GitHub） 增加了一个新组件 —— 日历组件。 效果演示： 在编写过程中，因为大家都知道，日历组件是有固定行数和每一行的固定列数的（即使当前方块内没有...
微信小程序，日历组件页面模板
06-03
文件是微信小程序，日历组件页面模板！可以选择和标记具体日期！ 讲解博文：https://blog.csdn.net/weixin_46043195/article/details/125110425?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22125110425%22%2C%22source%22%3A%22weixin_46043195%22%7D&ctrtid=Mkgra
FlatList组件
qq_48648782的博客
09-15 299
React Native 之FlatList组件 ​ ScrollView组件与FlatList组件同为自带滚动效果的组件，两者之间有所差异，各有所优势。与ScrollView相比较，FlatLis可以通过data属性进行自动遍历，根据其中的结果显示相应的视图。 ​ FlatList一个高性能的列表组件，具有多个属性（多列、下拉刷新、触底加载更多、间隔组件、自动滚动、横向滚动、表头、表尾…），更加方便。 import React, {Component} from 'react'; import { A
微信小程序自定义组件制作图表动画
a_靖的博客
03-08 1621
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 效果图 <!--pages/test/test.wxml--> <view class="date-chart" hidden="{{resHidden}}"> <ec-canvas id="mychart-dom-pie" canvas-id="...
微信小程序内解决view内文字过多溢出
Pumily的脱发历程
10-16 3910
【代码】微信小程序内解决view内文字过多溢出。
CSS 文本省略
RGSNbiubiubiu的博客
10-16 615
想让溢出的文本变成....... 形成想要的效果 使用下面三个元素配合实现 overflow: hidden; 隐藏溢出的文本。 white-space:nowarp; 让文本不会自动换行 就可以让第一个属性去隐藏文本了 text-overflow:ellipsis; 让隐藏的文本变成.... overflow 的属性： visible 默认值。...
CSS3 用text-overflow解决文字排版问题
weixin_49342009的博客
10-28 584
基本语法 text-overflow的使用需配合hight,over-flow:hidden;white-space:nowrap;三个属性共同使用 text-overflow: clip;ellipsis;string clip: 直接隐藏不显示 ellipse: 用… 三个点来表示溢出的文字 （常用） string:可自定义符号来表示放不下的字符 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
微信小程序text文本溢出单行/多行省略
热门推荐
zhuhai__yizhi的专栏
08-15 2万+
（转载）https://my.oschina.net/u/2276921/blog/829937 在做小程序的时候遇到在text标签里面的文本过长，需要限制显示长度，并且在限制了长度的后面加上省略号代表后面还有内容。 这时候设置样式： .note_item text{ display: -webkit-box; font-size:28rpx; color:#
小程序文本溢出隐藏
buddha_coder的博客
08-07 2949
多行文本            .note_item text{ display: -webkit-box; font-size:28rpx; color:#000000; line-height: 40rpx; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp:3; overflow: hidden;...
微信小程序自定义dialog组件实现
"微信小程序自定义dialog组件开发教程" 在微信小程序的开发过程中，有时系统提供的组件无法满足所有设计需求，特别是在界面交互上。在这种情况下，开发者需要自定义组件以达到期望的效果。本教程将详细介绍如何在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值