小程序使用之自定义组件

166 阅读3分钟

文章链接:mp.weixin.qq.com/s/3xPnDwLsg…

在前一篇文章 小程序使用之WXS中,介绍了关于 wxs 的使用,通过wxs处理数据再渲染到view层,可以简化数据处理,将通用的数据处理封装起来,避免重复代码的使用。

今天要介绍的是小程序的 自定义组件 ,类似的在做android 开发的过程中会用到自定义view,封装成通用的组件可以在不同页面里重复使用;可以将复杂的页面拆分成多个低耦合的模块,便于代码的维护。

一个自定义组件由js json wxml wxss 4个文件组成,微信开发者工具里新建 选择 Component,会自动创建这个4个文件, json文件里设置:

{
  "component": true
}

这一组文件可以当做自定义组件使用。

一个简单的例子,自定义item当做组件使用。
在组件的wxml文件里码上页面元素

<view>
  <text>{{txt}}</text>
  <view class='content'>
    <view>
      <slot></slot>
      <text class='title'>{{title}}</text>
    </view>
    <text class='subTitle'>{{subTitle}}</text>
  </view>
</view>

组件提供<slot>节点,用于承载组件在引用时提供的子节点,可以当做占位的标志,后面可以将视图直接填充到此节点。

wxss是对应组件的样式

.content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px
}
.title{
  color: #424242
}
.subTitle{
  color: #939393;
  font-size: 16px
}

js文件里的Component构造器可以指定组件的属性、数据、方法等。

/**
* 组件的属性列表
*/
properties: {
    title: {
      type: String, //属性类型
      value: "--" //属性初始值
    },
    subTitle: {
      type: String,
      value: "--" 
    },
}

属性列表里的值对应渲染在组件的wxml里。

/**
* 组件的初始数据
*/
data: {
    txt:"颜色"
},

组件的内部数据用于wxml的渲染。

在需要用到组件的页面json文件里添加,注意路径是绝对路径

{
  "usingComponents": {
    "item": "/component/item/item" //绝对路径
  }
}

wxml页面内直接使用<item>标签,该标签下的节点text 用于填充到<solt>

<view>
  <item title="红色" subTitle="red">
    <text>1、</text>
  </item>
</view>

一个简单的页面渲染

组件也可以接受外部传入的样式,在组件的js文件 Component 构造器里

Component({
  externalClasses: ['title-class']
})

注意这里使用*-class 的形式定义,在组件的wxml里

<text class='title-class'>{{title}}</text>

外部使用的话,可以看到外部的样式传递给组件使用。

//wxml文件
<item title-class="red-class" title="红色" subTitle="red">
    <text>1、</text>
</item>

//wxss
.red-class{
  color: red
}

一个简单的组件的例子完成,实际项目中,通过自定义组件便于在不同的页面中重复使用。

欢迎关注我的个人博客:www.manjiexiang.cn/

更多精彩欢迎关注微信号:春风十里不如认识你
一起学习,一起进步,欢迎上车,有问题随时联系,一起解决!!!

更多精彩:
python itchat 爬取微信好友信息
python爬虫学习:爬虫QQ说说并生成词云图,回忆满满
python 图片在线转字符画预览
android 仿微信表情雨下落!
仿支付宝首页头部伸缩效果
一款属于自己的小程序