小程序组件相关

lemonChen
758 阅读6分钟

前言

在开发小程序的过程中，经常会遇到一些很容易错误，然后容易忘记的一些知识点，因此，决定写一篇文章来总结一下

组件相关

一、组件WXML中的slot

组件WXML中可以用插槽来分发内容，例如：

   <view class='component'>
     <slot></slot>    //添加一个匿名插槽，用来承载其他WXML结构
   </view>

需要定义多个slot，需要在对应的组件js中声明：

Component({
    options:{
      multipleSlots: true   //当设置为true，可以支持在组件中设置多个slot 
    }
})

注：当在组件WXML中定义多个带name属性的slot，而没有在对应组件js中配置multipleSlots: true,会导致页面所有的插槽结构渲染失败，例如：

//子组件
<view class='component>
    <view class='box1'>
        <slot name='box1'></slot> //name属性用来标识插槽
    </view>
      <view class='box2'>
        <slot name='box'></slot>
    </view>
</view>

//父组件（也叫引入组件的页面）
<component>
    <view slot='box1'></view>  //slot的值对应子组件slot的name属性值
    <view slot='box2'></view> //当没配置multipleSlots时，给两处WXML都不会渲染到页面中
</component>

另外当在组件的两个位置，设置两个匿名插槽时，会默认把内容渲染到最后一个slot中，例如:

//子组件
<view class='component>
    <view class='box1'>
        <slot></slot> //添加一个匿名插槽
    </view>
      <view class='box2'>
        <slot></slot> //添加一个匿名插槽
    </view>
</view>
//父组件（也叫引入组件的页面）
<component>
    <view>这里输入内容...</view>
    <view>这里输入内容...</view> //两处内容都会插入子组件最后设置的slot位置处
</component>

二、组件样式

组件对应的WXSS样式，只对组件WXML中的节点生效，默认情况下，组件WXML的样式只受对应组件的WXSS影响（app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项或者标签选择器和其他特殊选择器））
注：当组件样式和页面样式相互影响时，同等条件下，会适用组件中的样式

编写样式时，需要主要以下几点：

  • 组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。
  • 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
  • 子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
  • 继承样式，如 font 、 color ，会从组件外继承到组件内（引用组件页面改组件的父级元素的font、color会被组件继承）

组件样式styleIsolation

styleIsolation支持以下取值：

  • isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）
  • apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
  • shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件（这个选项在插件中不可用）

如果Component 构造器用于构造页面 ，默认值为 shared ，且还有以下几个的样式隔离选项可用：

  • page-isolated 表示在这个页面禁用 app.wxss ，同时，页面的 wxss 不会影响到其他自定义组件
  • page-apply-shared 表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式不会影响到其他自定义组件，但设为 shared 的自定义组件会影响到页面
  • page-shared 表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式会影响到其他设为 apply-shared 或 shared 的自定义组件，也会受到设为 shared 的自定义组件的影响
Component({
    options:{
        styleIsolation: 'isolated', //styleIsolation优先级高于addGlobalClass
        addGlobalClass: true, //基础库版本 2.2.3 以上支持,等价于设置styleIsolation: apply-shared
    }
})

当然在开发项目的过程中,有一个例外，当组件中包含一个富文本的时候，例如：

   //子组件
    <view class="count_time">
      <rich-text nodes="{{countHtml}}"></rich-text>
    </view>
  //countHtml
  <span class="shape">2</span><em class="st_txt">天</em>
  <span class="shape">10</span><em class="st_txt">:</em>
  <span class="shape">50</span><em class="st_txt">:</em>
  <span class="shape">30</span>
  //引用组件页面
  <count propA='...'></count>

想在引用组件的页面复写组件的样式，通过设置styleIsolation: 'apply-shared',在页面修改组件中富文本中class为shape的样式无法生效，但是修改组件中不存在于富文本中内容可以生效，通过设置styleIsolation: 'shared'可成功复写组件中的样式

三、组件事件有关

最近在将之前做的一些小程序页面的过程中，遇到了一个很奇怪的问题，如下：

//一个弹框组件
<view class="pop_prop_box>
  <view class="m_bot_box f_col">
    <view class="service_titile" wx:if='{{viewTitle}}'>
      <text class="txt">{{viewTitle}}</text>
    </view>
    <image class="icon-close" src='/static/newIcon/goods-close.png' bindtap="closePopup"></image> //绝对定位元素
  </view>
</view>

//组件css
.pop_prop_box {
  width: 100%;                              
  height: 100%;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 99;
}

.m_bot_box {
  position: absolute;
  z-index: 101;  //z-index高于pop_prop_box
}

.icon-close {
  position: absolute; //添加一个绝对定位的按钮
  top: 24rpx;
  right: 24rpx;
  z-index：100; //通过设置任意大于等于1的值触发点击事件
 }
  
//组件js
Component({
 methods: {
    //关闭弹框
    closePopup() {
      this.setData({
        showShare:false
      })
    }
 }
})

定义一个遮罩层组件,在里面添加一个绝对定位的按钮，用于关闭弹框,点击image无法触发点击事件，把image用插槽的方式，定义在页面中，则可以触发，最后通过在组件的class为icon-close的元素的样式上面添加一个z-index值（大于等于1）触发了事件

总结

这里主要总结了几种我在开发中遇到的一些问题和我容易忘记的一些知识点，比较简单，但是俗话说，好记性不如烂笔头，所以就希望做个记录，也希望里面一些我遇到的坑可以帮助到其他也遇到这些问题的人。这段时间也做了一些小程序前端生成图片相关，过几天会写一个canvas生成图片的一些知识点，以便于巩固一下知识点

avatar
文章
阅读
粉丝