微信自定义组件基础

最新推荐文章于 2024-08-11 18:40:36 发布

·歪腻·

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量945

点赞数 1

文章标签：微信 javascript 前端

本文链接：https://blog.csdn.net/wzy199982/article/details/127895536

版权

本文详细介绍了微信小程序中自定义组件的样式隔离、外部类、插槽以及事件传递机制。通过实例展示了如何创建具有属性、事件和插槽的组件，并解释了组件间的父子通信和样式影响。同时，探讨了页面生命周期和自定义状态栏的配置，以及组件和页面的生命周期管理。此外，文章还提到了自定义组件在实际应用中的使用和组件库的构建方法。

摘要由CSDN通过智能技术生成

自定义组件

组件的样式

样式的隔离

isolated：相互隔离
shared父子：相互影响
apply-shared：父影响子

外部类

组件内部

externalClasses:["cell-class"],

<view class="cell cell-class">我是cell组件</view>

页面中

<cell cell-class="mycell"></cell>
<cell></cell>

.mycell{
    line-height: 120rpx !important;
    color: #f70;
 }

组件的插槽

默认插槽

父组件：<cell><text>工资1w</text></cell>
子组件：<view><slot></slot></view>

命名多插槽

父组件：<cell><text slot="next">💓</text><text slot="pre">💟</text></cell>
子组件：<view class="cell cell-class"><slot name="pre"></slot><slot name="next"></slot></view>

组件的传参

父传子：property
子传参父：triggerEvent

定义基础的三个组件

定义组件item

props

title：标题
icon：图标
tip：提示
url：跳转链接
open-type：打开的方式

properties: {
    //标题
    title:{
      type:String,
      value:""
    },
    //是否显示右侧插槽
    showSlot:{
      type:Boolean,
      value:false
    },
    //图标
    icon:{
      type:String,
      value:""
    },
    tip:{
      type:String,
      value:""
    },
    badge:{
      type:[Boolean,Number],
      value:false
    },
    url:{
      type:String,
      value:""
    },
    openType:{
      type:String,
      value:"navigate"
    }
  },

slot：插槽

right
left

<!--components/item/item.wxml-->
<navigator class="item itemclass" url="{{url}}" open-type="{{openType}}" bindtap="itemclick">
  <view class="icon" wx:if="{{icon}}">
    <image src="{{icon}}" mode="aspectFill"/>
  </view>
  <view class="content">
    <view class="title" wx:if="{{title}}">{{title}}</view>
    <slot name="title" wx:else></slot>
    <view class="right" wx:if="{{!showSlot}}">
      <view class="tip">{{tip}}</view>
      <view class="badge" wx:if="{{badge}}">
        <view wx:if="{{badge==true}}" class="dot"></view>
        <view wx:else class="redbadeg">{{badge}}</view>
      </view>
      <view class="arrow"></view>
    </view>
    <slot name="right" wx:else></slot>
  </view>
</navigator>

event：事件

click

外部类

itemClass
titleClass

 externalClasses:["itemclass"],

定义组件component

生命周期：lifetimes（attach组件的挂载）
data：数据
methods：方法
properties：属性（只读）
externalClass：外部类
options：选项
1、multipleSlots：开启多个插槽
2、stylelsolation：“isolated”：组件的样式格式

定义导航栏

wx.getMenuButtonBoundingClientRect：胶囊的边界

	  const res = wx.getMenuButtonBoundingClientRect()
      console.log(res);
      //标题栏可使用的宽度（排除右侧胶囊的位置）
      this.setData({titleWidth:res.left-7})
      //标题栏高度
      var barHeight = res.height+(res.top-info.statusBarHeight)*2
      this.setData({barHeight})

wx.getSystemInfoSync：系统信息（获取状态栏的高度）

	  var info = wx.getSystemInfoSync()
      console.log(info);
      //更新状态栏的高度
      this.setData({statusBarHeight:info.statusBarHeight})

配置自定义状态栏

{
  "usingComponents": {
    "nav":"/components/nav/nav"
  },
  "navigationStyle": "custom"
}

生命周期

lifetimes:{
    attached(){
      //获取系统信息
      var info = wx.getSystemInfoSync()
      console.log(info);
      //更新状态栏的高度
      this.setData({statusBarHeight:info.statusBarHeight})
      // this.setData({barHeight:info.screenHeight-info.safeArea.height})
      //胶囊的位置
      const res = wx.getMenuButtonBoundingClientRect()
      console.log(res);
      //标题栏可使用的宽度（排除右侧胶囊的位置）
      this.setData({titleWidth:res.left-7})
      //标题栏高度
      var barHeight = res.height+(res.top-info.statusBarHeight)*2
      this.setData({barHeight})

      //获取当前页
      var pages = getCurrentPages();
      console.log(pages);
      //更新页面的长度
      this.setData({pagesLen:pages.length})
    }
  },