小程序-自定义组件

最新推荐文章于 2024-07-23 16:20:34 发布
最新推荐文章于 2024-07-23 16:20:34 发布
阅读量3.2k 收藏 1
点赞数 64
分类专栏： 问题总结 小程序 工作 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34182705/article/details/107615256
版权
问题总结 同时被 3 个专栏收录
14 篇文章 0 订阅
订阅专栏
工作
12 篇文章 0 订阅
订阅专栏
小程序
6 篇文章 0 订阅
订阅专栏

小程序的自定义组件

小程序组件的使用

自定义组件

组件的创建

  • 根目录下创建components文件夹，用于放置所有组件

  • components文件夹下创建对应组件的文件夹

  • 在对应组件的文件夹下创建对应的components

  • components 组件文件夹

    • 名字 对应组件的文件夹
      • 名字.js 组件的js文件
      • 名字.json 组件的json配置文件
      • 名字.wxml 组件的布局文件
      • 名字.wxss 组件的样式文件

配置对应的组件

  • 在需要使用相应组件的页面的.josn 文件中进行组件的调用配置

  • usingComponents 组件调用的配置

  • 在其中进行对应组件的路径配置，以及组件名字的配置，只和配置组件的名字相关，和组件的本身的名字没关

  • 组件的.json 文件

// json不能注释
{
  "component": true,
  // 组件可以嵌套
  "usingComponents": {}
}
  • 调用组件的页面的.json 文件
// json 不能注释
 "usingComponents": {
	 // cell 名字，组件的名字，调用组件时，只和这个名字有关，和组件本身的名字无关
	 // 后面的时组件的路径
    "cell" : "/components/cell/cell"
  }

使用对应的组件

  • 在需要使用组件的页面中，使用配置的组件的名字
<!-- 使用组件 -->
<cell></cell>

插槽的使用

匿名插槽

  • 调用组件时，添加其他内容,多个其他内容

  • 在组件页面使用slot接收，同时接收

  • 调用页面

 <!-- 组件 -->
<cell>
	<!-- 插槽内容 -->
  <text>momo的</text>
</cell>
  • 组件页面
<view>
	<!-- slot 用来接收插槽内容 -->
  <slot></slot>
  <!-- 这个时组件的内容-->
  安全设置
</view>

具名插槽以及多个调用的配置

单个具名插槽

  • 使用具名插槽时，插槽内容中的slot属性的值，就是组件内容中slot标签中name的属性值

  • 调用页面

<cell>
  <text slot="name">momo的</text>
</cell>
  • 组件页面
<view>
	<!-- 接收 -->
  <slot name="name"></slot>
  安全设置
</view>
多个具名插槽
  • 多个具名插槽需要开启对应的配置
  • 在组件的.js文件中，Component中配置options的multipleSlots
Component({
  // 组件的配置选项
  options : {
    // 多个slot的使用
    multipleSlots : true
  },
})
  • 然后就可以使用多个具名插槽了，可以布局了

组件传参

父传子

  • 传参与vue很是相似，基本一致

  • 在组件标签中定义传递参数的中间量，中间量="参数"

  • 在组件的.js文件中的properties中接收中间量，定义类型，定义默认值

  • 调用参数时传递的参数

<!-- 组件 -->
<!-- title 传递参数的中间量 -->
<cell 
  title="安全设置"
  note="手机号，密码"
>
</cell>
  • 组件接收参数时的.js文件
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 定义了title的类型与默认值
	// title , note 父组件调用组件时传递过来的参数
    title : {
		// type 类型
		// value 初始默认值
      type : String,value : ""
    },
    note : {
      type : String,value : ''
    }
  },
})

子传父

  • 与vue的方法很是相似，但是事件不一样

  • vue使用emit("发送的事件名字",参数)发送事件与参数

  • 小程序使用triggerEvent("发送事件的名字",发送的参数)

  • 发送事件

seitchChange(e) {
	console.log(e);
	// 发送事件的方法		
	// changewitch就是发送的事件
	// value 发送事件的detail下的参数
	// e.detail.value参数
	this.triggerEvent("changwitch",{value : e.detail.value});
}
  • 接收事件：bind:发送的事件的名字="事件的名字"
<!-- 带switch 开关的 -->
<!-- 接收事件  -->
<cell 
  bind:changwitch="changeswitch"
>
</cell>
  • 接收事件的逻辑
// 更改switch事件
changeswitch(e) {
	console.log(e)
	// 如果
	let a = e.detail.value?"已开启" : "已关闭";
	wx.showToast({
		title: '听筒模式' + a,
  })
},

组件与调用组件页面的css关系

  • 在组件的.js页面中进行设置外部css，与组件内部css的关系

  • 在Component中的options的styleIsolation

  • styleIsolation中的值有：isolated隔离，apply-shared页面样式分享到组件，shared双向共享

Component({
  options:{
     styleIsolation:'isolated',
    // 样式隔离方式
    // isolated 隔离
    // apply-shared 页面样式分享到组件 
    // shared 双向共享
  },
})

外部类的定义

  • 1.定义外部类名称 可以组件外部定义，class 在组件内容使用
Component({
// cell-class 在组件中插入这个类，可以在外部，使用类改变组件的样式
  externalClasses:["cell-class"],
  // 01 定义外部类名称 可以组件外部定义，class 在组件内容使用
})
  • 2.在组件页面中使用定义的外部类名称
				<!-- cell-class就是定义的外部类 -->
<view class="cell cell-class"></view>
  • 3.传入外部类
<cell 
cell-class="mycell"
title="收藏"
icon="/images/icon02.png"
></cell>
<!-- 03 传入外部类 -->
  • 4.定义外部类
/* 05 定义外部类 */
.mycell{ height: 140rpx !important;}

组件的跳转

  • 1.传入组件需要跳转的路径的参数
<!-- url 就是定义的路径的参数 -->
<cell 
  title="安全设置"
  note="手机号，密码"
  url="/pages/base/base"
>
  • 2.定义组件的点击事件
<!-- 定义事件 tapHd -->
<view class="cell" bindtap="tapHd"></view>
  • 3.接收传递的参数
properties: {
	url : {
		type : String,
		value : ''
	}
},
  • 4.定义组件的点击事件逻辑
/**
* 组件的方法列表
*/
methods: {
	tapHd() {
		// 如果data中的数据url存在
		if(this.data.url) {
			// 进行微信跳转
			wx.navigateTo({
				// 因为注册到了data中，当然也可以使用properties进行调用
				url: this.data.url,
			})
		}
	}
}

组件的生命周期—lifetimes

created—组件被创建

  • 组件被创建了，早于attached

attached—组件实例进入页面节点树时执行

  • 每一次组件被调用，加载到页面中时都会被调用

ready—渲染完毕

  • 组件被渲染

move—移动

  • 当组件有移动的时触发

detached—移除

  • 移除组件时触发

error—错误

  • 出错时触发

组件的页面生命周期—pageLifetimes

show—显示

  • 组件页面切换到了前台

hide—隐藏

  • 组件页面切换到了后台

resize—改变大小时

  • 页面的大小被改变时

混合—behaviors

var myBehavior = require('my-behavior')
	Component({
	  behaviors: [myBehavior],
	})

监听—observers

 observers: {
    'numberA, numberB': function(numberA, numberB) {
      // 在 numberA 或者 numberB 被设置时，执行这个函数
      this.setData({
        sum: numberA + numberB
      })
    }
  }

储数据字段—_数据名:""

  • 纯数据字段是一些不用于界面渲染的 data 字段，可以用于提升页面更新性能
  • 使用下划线的方式定义
options: {
    pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
  },
  data: {
    a: true, // 普通数据字段
    _b: true, // 纯数据字段
  },

案例—定义组件

  • 调用组件页面html
<!--pages/user/user.wxml-->
<cell 
  title="安全设置"
  note="手机号，密码"
  url="/pages/base/base"
>
</cell>
<!-- 带图标的 -->
<cell 
  title="收藏"
  icon="/images/home-h.png"
>
</cell>
<!-- 带switch 开关的 -->
<cell 
  title="听筒模式"
  toggle="{{true}}"
  bind:changwitch="changeswitch"
>
</cell>
<!-- 带图标的 -->
<view title="搜索">
  <icon slot="iconright" size="20" type="search"></icon>
</view>
<!-- 带插槽的 -->
<cell url="/pages/base/base">
<view slot="title"><text>通知</text><text class="dot"></text></view>
</cell>
<cell url="/pages/base/base">
  <view slot="title">
    <text>描述</text>
    <text class="compu">10元优惠券</text>
  </view>
</cell>
  • 调用组件页面的js
// pages/user/user.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  
  changeHd(e){
    console.log("页面e",e);
     var msg = e.detail.value?'开启':'关闭';
      wx.showToast({
        title: '听筒模式已'+msg,
        icon:'none'
      })
    
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
  • 调用组件页面的css
/* pages/user/user.wxss */
.title{ color:red !important;}
.mycell{ height: 140rpx !important;}
/* 05 定义外部类 */
.dot{ margin-left: 15rpx; display: inline-block; height: 20rpx; width: 20rpx; border-radius: 10rpx; background-color: orangered;}
.compu{ 
  margin-left:15rpx; 
  display: inline-block; 
  padding: 10rpx; 
  background-color: orange; 
  color: #fff;
  font-size: 18rpx;
  border-radius: 6rpx;
}
  • 组件页面html
<!--components/cell/cell.wxml-->
<!-- 02 使用外部类 -->
<view class="cell cell-class" bindtap="tapHd">
  <view class="icon">
    <image mode="widthFix" wx:if="{{icon!=''}}" src="{{icon}}"></image>
  </view>
  <view class="content">
    <view class="title" wx:if="{{title}}">{{title}}</view>  
    <slot wx:else name="title"/>  
    <view class="tip">
        <view class="note">{{note}}</view>
        <view wx:if="{{toggle}}" class="toggle">
          <switch bindchange="toggleChange"></switch>
        </view>
        <view wx:else>
         <view  class="arrow" wx:if="{{url}}"></view>   
         <slot name="iconright" wx:else class="iconright"/>
                 
        </view>
        
    </view>
  </view>
</view>
  • 组件页面的js
// components/cell/cell.js
Component({
  options:{
    multipleSlots:true,
    // 多个slot
    // styleIsolation:'isolated',
    // 样式隔离方式
    // isolated 隔离
    // apply-shared 页面样式分享到组件 
    // shared 双向共享
  },
  externalClasses:["cell-class"],
  // 01 定义外部类名称 可以组件外部定义，class 在组件内容使用
  /**
   * 组件的属性列表
   */
  properties: {
    title:{type:String,value:''},
    note:{type:String,value:''},
    icon:{type:String,value:''},
    url:{type:String,value:''},
    toggle:{type:Boolean,value:false}
    // 定义了title的类型与默认值
  },
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      console.log(this)
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    tapHd(){      
      if(this.data.url){ //如果url不为空
        wx.navigateTo({
          url: this.data.url, //跳转url对应页面
        })
      }
    },
    toggleChange(e){
      // console.log(e);
      this.triggerEvent("change",{value:e.detail.value})
      // 发送事件 名称change 值为当前toggle值
    }

  }
})
  • 组件页面的css
/* components/cell/cell.wxss */

.cell{
  display: flex;
  height: 88rpx;
}
.icon{
  display: flex;
  align-items: center;
  /* margin-left: 30rpx; */
}
.icon image{ width: 58rpx; height: 58rpx; margin-left:30rpx;}
.cell .content{
  border-bottom: 1rpx solid #eee;
  flex:1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left:30rpx;
}
.tip{
  display: flex;
  padding-right:30rpx;
}
.arrow{
  height: 26rpx;
  width: 26rpx;
  border-top:1rpx solid #ccc;
  border-right:1rpx solid #ccc;
  transform: rotate(45deg);
  margin-left: 30rpx;
}
.note{
  font-size: 28rpx;
  color:#999;
}
缘明随心
关注
专栏目录
小程序自定义组件
listStyleScript的博客
06-23 362
自定义组件的优势：复用，好维护 小程序复用代码方式： 1.自定义模板复用 第一步：定义模板 格式： <template name="模板名称"> .... //定义模板结构 </template> 例如： <template name="list_tpl"> <view> <text>list模板页11111</text> </view> </template> 第二步：使用
微信小程序-自定义组件
qq_35389653的博客
05-17 257
自定义组件的目的是组件化的复用问题。 组件的书写和页面的书写是一样的，当组件和数据结合之后会生成DOM树。 当然可以在组件中预留插槽来来承载组件中预留的子节点。 在模版中引用节点时候需要在json文件中显示定义，否则会被认为是无定义的节点。 <!-- 引用组件的页面模板 --> <view> <component-tag-name> <!-- 这部分内容将被放置在组件 <slot> 的位置上 --> <view>
微信小程序onLoad函数（options参数和onShow()区别）
最新发布
J123375644的博客
07-23 1037
调用时机onLoad仅在页面或组件初始化时调用一次；onShow每次页面或组件显示时调用。用途onLoad用于初始化数据和状态；onShow用于刷新或更新页面数据和状态。
微信小程序自定义组件
m0_59642141的博客
11-16 253
自定义组件、组件样式、组件插槽、组件传参
微信小程序-自定义组件-遮罩层
05-05
在微信小程序开发中，自定义组件是提升代码复用性和模块化的重要手段。遮罩层，也称为蒙层，是一种常见的UI元素，用于在页面上创建半透明的覆盖层，通常用于显示弹窗、加载提示或者进行用户交互时提供背景效果。在此...
微信小程序-自定义组件开发微信小程序的框架
08-06
W2X框架致力于以"自定义组件"的方式快速开发微信小程序，这些自定义组件以组件库的形式进行组织。 一个使用W2X组件库的页面代码举例如下： > W2X提供了wx.html文件格式把cssdomjs聚合在一个文件中 .abc { ...
WX-ComponentDemo:微信小程序-自定义组件demo-悬浮按钮弹出菜单
05-09
我也很困惑这件事，今天了解到自定义组件这个概念，就试了试，感觉好像弥补了template的那个缺点，于是写了个小demo，也算做个笔记 效果 做的就是个菜单组件，数据由外部灌入。 目前我还在看怎么样才能实现菜单弹出...
微信小程序--自定义选择颜色（组件）
07-29
1、微信小程序、颜色、组件、可自定义选择 2、该资源科用于用户自定义选择喜欢的颜色 3、已经封装成组件，可以直接调用即可 4、成功运用于网上用户，体验效果好 5、想要的小伙伴可以直接拿去使用，方便快捷高效的...
微信小程序-自定义组件传参
yuan_xiaoxin的博客
06-26 1815
微信小程序-自定义组件传参自定义组件介绍创建自定义组件声明组件编辑组件注册组件声明引⼊⾃定义组件页面中使用自定义组件定义段与示例方法微信小程序-自定义组件传参介绍流程图示小结 自定义组件介绍 类似于vue或者react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 创建自定义组件 类似于页面,一个自定义组件由json wxml js 4个文件组成的 可以在微信开发者工具中快速创建组件的文件结构,如图所示 在文件夹内 components/myHeader ,创建组件名为myHeade
微信小程序学习-2
qq_61726551的博客
04-09 632
第二天，跟课程学习的。
微信小程序的开发总结
iocncc的博客
07-27 3145
小程序的界面配置 1、sitemap.json 站点地图 微信搜一搜里面哪些页面可以展示，哪些不能 2、project.config.json 项目配置 3、app.js 全局的业务逻辑 4、app.json 全局的小程序配置 5、app.wxss 全局的样式 6、pages 存放页面的文件夹 7、utils 存放工具的文件夹 app.json配置 pages页面配置 那个页面写在前面，那个页面默认打开 window窗口配置 1、backgroundTextStyle–背景文字颜色 2、navigation
微信小程序数组动态赋值
GUANYX的博客
10-27 7133
作为一个小白，最近有兴趣试了试小程序开发，发现小程序里面写js和写网页的JavaScript还是有些不同的。 emmm，赋值真的有些坑。 首先是赋值后，如果要渲染到前端，一定要用that.setData({ }),否则改了也是木有用滴。 然后就是对数组的赋值，直接在setData里面是不可以给数组元素动态赋值的，那么怎么解决嘞。来个代码看看。 js  关注点在n[],p[](命名不规范~~...
小程序点击复制功能
aiiiszrh的博客
05-07 428
<text class='shopName' style="text-decoration-line: underline; color:rgb(66, 111, 194)" bindtap='textPaste'>点击复制</text> // 复制 textPaste: function () { var that = this console.log(that.showIndex) wx.showToast({ title: '复..
微信小程序 纯数据字段
java1234的博客
06-29 870
完整微信小程序(Java后端) 技术贴目录清单页面（必看） 纯数据字段是一些不用于界面渲染的 data 字段，可以用于提升页面更新性能。从小程序基础库版本 2.8.2 开始支持。 组件数据中的纯数据字段 有些情况下，某些 data 中的字段（包括 setData 设置的字段）既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。 此时，可以指定这样的数据字段为“纯数据字段”，它们将仅仅被记录在 this.data 中，而不参与任何界面渲染过程，这样有助于提升页面更新性能。 指定“纯数据字段”的方
微信小程序Slideview和cell
qq_25846091的博客
01-25 1956
微信小程序Slideview和cell的用法和使用： 提示：左滑删除组件，基础库 2.4.4 开始支持： 使用方法： 微信UI扩展组件库基于小程序自定义组件构建，在使用扩展组件库之前要在全局json中引入扩展库. （1）这里我们通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小 { "useExtendedLib": { "kbone": true, "weui": true } } （2）然后就可以在 页面.json 中引入模块组
评论 57
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值