微信小程序自定义组件

2021-07-21 13:01:24

wxs

一种类似于js的小程序脚本语言。
注意；

wxs 文件不依赖于运行时的库。
wxs 与js是另外一门语言。
wxs于js的运行时完全隔离的，不能调用js中的函数，不能调用小程序提供的api
不能进行回调

总结一下

总结一下当前的内容
wxs类似于一门脚本语言，使用的是导出的方式来进行和wxml进行连接，类似于node.js
wxml为页面显示的文件，类似于网页中的html文件
json为配置文件，可以进行对页面内容的配置。
wxss为css配置文件，可以进行css的配置。
js 为进行处理回调，以及页面数据绑定的文件

自定义组件

使用自定义组件，将页面的功能抽象成为组件，在不同的页面中重复使用，将复杂的页面抽象成为多个模块。即达到高内聚，低耦合的目标。

总诉

创建自定义组件

一个组件由json，wxml，wxss，js四个文件组成，要编写一个自定义组件，需要在json中自定义组件声明，声明这一组文件为自定义组件。

json文件如下

{
  "usingComponents": {
    "component": "/component/component"
  }
}

即上方中设置该文件夹为组件文件夹

命名有点不规范，应该命名为components

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: '默认文字',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function () { }
  }
})

使用component函数进行设置

ps 这里需要重要component为大写。必须写为Component 否则会无法显示，一个小坑，不是驼峰命名法，╮(╯▽╰)╭

设置组件的内容

<view class="inner">
  {{innerText}}
</view>
<slot></slot>

设置组件的css

.inner {
  color: red
}

通过设置页面的json数据，进行对组件的引用

{
  "usingComponents": {
    "component": "/component/component"
  }
}

设置component组件引用component文件夹下单component组件内容
对组件进行引用

<view>
  <component inner-text="Some text"></component>
</view>

设置文字内容为some text，
如果

<view>
  <component></component>
</view>

设置的话，将会设置为默认的。

组件模板和样式

类似于页面，自定义组件拥有自己的wxml和wxss样式。

组件模板

组件模板的写法和页面模板相同，组件模板和组件数据组合生成节点树。将被插入到组件的引用位置上。
组件模板中提供slot，用于承载组件引用时的子节点，即组件引用的时候，其内部的子节点，将会插入到slot节点内部
组件的wxml文件如下

<view class="inner">
<slot></slot>
  {{innerText}}
  这是内部节点
</view>

page的wxml文件如下

<view>
  <component>
    <view>这是内部节点</view>
  </component>
</view>

编译后即可生成

模板和数据绑定

使用数据绑定，向子组件的属性动态的传递数据
即，向模板传递数据
设置模板的wxml

<view>
  <component propA="hello" propB="world">
    <view>这是内部节点</view>
  </component>
</view>

设置模板的js文件

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    propA: {
      type: String,
      value: '1'
    },
    propB: {
      type: String,
      value: '2'
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function () { }
  }
})

设置page的wxml文件

<view>
  <component propA="hello" propB="world">
    <view>这是内部节点</view>
  </component>
</view>

完成对组件的使用。

设置组件的slot

slot为子节点的承载点。
在Component函数中设置options对象的multipleSlots属性为true，确保支持多slot的支持
即

  options: {
    multipleSlots: true  // 在组件中支持多slot子节点的支持
  }

对于多个slot使用name来进行区分
定义wxml文件如下

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
<slot name="before"></slot>
  {{propA}}
  {{propB}}
  这是内部节点
<slot name="after"></slot>
</view>

接着定义page的wxml文件

<view>
  <component propA="hello" propB="world">
    <view slot="after">这是after</view>
    <view slot="before">这是before</view>
  </component>
</view>

完成，至此完成多个节点的slot的插入

组件样式

组件对应于wxss文件的样式，只对组件内部的wxml节点生效。
注意

组件只能使用class
组件避免使用后代选择器

:host选择器

使用host选择器，可以设置组件的默认样式

:host {
  color: yellow;
}

即上方设置该页面的全部的host值为yellow

外部样式

普通样式和外部样式尽量避免同时使用，因为这样会造成两个类的优先级为未定义的
设置externalClasses 为class的样式。
commpont文件如下
js

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    propA: {
      type: String,
      value: '1'
    },
    propB: {
      type: String,
      value: '2'
    }
  },
  options: {
    multipleSlots: true  // 在组件中支持多slot子节点的支持
  },
  externalClasses: ['my-class'] // 设置允许外部样式的my-class的使用
})

wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view>
<slot name="before"></slot>
  {{propA}}
  {{propB}}
  这是内部节点
<slot name="after"></slot>
</view>

wxss

:host {
  color: red
}

page如下
wxml如下

<view>
  <component propA="hello" propB="world" class="my-class">
    <view slot="after">这是after</view>
    <view slot="before">这是before</view>
  </component>
</view>

wxss如下

.my-class {
  color:yellow
}

显示为黄色，因为默认的权重低于外部样式表

全局样式

设置addGlobalClass为true即可，当设置addGlobalClass的时候，其组件定义的css无效，只有外部的class影响，除此之外都不影响

码农公寓

wxs