微信小程序-自定义组件

合集 - 微信小程序(60)
1.小程序开发概述2.创建第一个小程序3.微信小程序app.json文件4.微信小程序-sitemap.json文件5.微信小程序app.js文件6.微信小程序app.wxss文件7.微信小程序-project.config.json文件8.微信小程序-页面.json文件9.微信小程序-页面.js文件10.微信小程序-组件创建和使用11.微信小程序-组件-.json文件12.微信小程序-组件-.js文件13.微信小程序-WXSS学什么14.微信小程序-WXSS的书写格式15.微信小程序-新增RPX响应式单位16.微信小程序-什么是WXML17.微信小程序-WXML数据绑定18.微信小程序-WXML条件渲染19.微信小程序-WXML的hidden属性20.微信小程序-WXML列表渲染21.微信小程序-WXML列表渲染Key22.微信小程序-WXML包装元素23.微信小程序-WXS的作用和使用24.微信小程序-WXS独立文件25.微信小程序-WXS支持的语法26.微信小程序-小程序事件绑定27.微信小程序-小程序事件冒泡和事件捕获28.微信小程序-事件传递数据29.微信小程序-data和mark30.微信小程序-touches和changedTouches31.微信小程序-案例练习32.微信小程序-view组件33.微信小程序-text组件34.微信小程序-icon组件35.微信小程序-button组件36.微信小程序-image组件37.微信小程序-scrollview38.微信小程序-image组件-选择相册资源案例
39.微信小程序-自定义组件
40.微信小程序-自定义组件样式隔离41.微信小程序-自定义组件外部样式42.微信小程序-传递数据父传子43.微信小程序-传递数据子传父44.微信小程序-页面访问组件数据和方法45.微信小程序-组件通讯练习46.微信小程序-单个插槽47.微信小程序-多个插槽-具名插槽48.微信小程序-behaviors49.微信小程序-双线程渲染模型50.微信小程序-页面生命周期51.微信小程序-页面生命周期方法52.微信小程序-组件生命周期方法53.微信小程序-应用程序生命周期方法54.微信小程序-页面跳转Tabbar55.微信小程序-页面跳转navigator组件56.微信小程序-页面跳转wxAPI57.微信小程序-页面跳转数据传递58.微信小程序-常用弹窗59.微信小程序-Storage60.微信小程序-获取用户位置
收起

什么是自定义组件

我们自己写的组件称之为自定义组件

为什么需要自定义组件

?> 自定义组件可以方便我们后续代码的一个复用，提高代码的可维护性。

首先我说一下为什么，然后我在利用一个栗子来演示一下我们如果不使用自定义组件带来的麻烦。

我们去网易新闻官方网站进行查看，仔细观察一下，可以发现有的内容布局是不是有点类似呢如下图：

image-20230513112511831

好，这个时候我们去微信开发者工具当中编写一下这个简单的案例，先布局编写 wxml:

<view class="container">
       <view class="title">我是标题</view>
       <view class="content">我是内容</view>
</view>

在编写样式：

.container {
  background: skyblue;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.container .title {
  color: #666;
}

.container .content {
  color: #f00;
  font-size: 12px;
}

image-20230513112818855

得到了如上图的效果，我们在 C+V 复制多个，发现我们已经实现了。好，这个时候呢，我是产品经理，我要加需求，我的要求，在原本的基础之上加一个发布时间，然后我接收到了需求之后，发现一个问题，我们的代码重复的太多了，如果要加的话，我们 C+V 了多少个那么就需要改多少个，发现不利于我们维护，代码的重复比较多，不利于复用。

那么该如何自定义组件呢？

自定义组件

新建 components 目录，在该目录下新建对应组件目录，右键 新建 Component

image-20230513115539584

将我们之前的布局和样式代码移动到 c-test 当中，关于自定义组件我前面的文章已经介绍过，不懂的可以去翻阅一下：https://www.cnblogs.com/BNTang/p/17280237.html

image-20230513115638968

我们在 index 当中引用 c-test, 好，这个时候我们产品经理又来了个需求，需要添加一个发布日期，我们这个时候再去应对这个需求就显得非常的简单，我们去更改 c-test 添加一个 view 来存放发布日期：

<view class="container">
       <view class="title">我是标题</view>
       <view class="content">我是内容</view>
       <view class="time">2023-05-13</view>
</view>

image-20230513115829292

自定义组件注意点

!> 组件配置文件中，"component": true, 必须为 true

!> 组件中也可以使用其他组件

!> 组件名称不能为 wx-开头

!> 很多地方都要用到某个组件，我们可以在 app.json 中将它注册为全局组件

注意点我演示一个挂载到全局即可，我们将 c-test 挂载到 app.json，然后在日志页面当中就也可以进行使用了，我这里不以其它页面举例，挂载到全局的组件名称叫做 myCTest，我们在原来的 index 页面使用下挂载到这个全局的组件：

app.json:

{
  "usingComponents": {
    "myCTest": "/components/c-test/c-test"
  }
}

image-20230513132216235

posted @   BNTang  阅读(97)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示