微信小程序自定义组件

wxs

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

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

总结一下

总结一下当前的内容
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节点生效。
注意

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

: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影响,除此之外都不影响

上一篇:Docker容器性能监控工具google/cadvisor


下一篇:Android官方开发文档Training系列课程中文版:网络操作之XML解析