微信小程序开发的OA会议之会议，投票，个人中心的页面搭建及模板

本文链接：https://blog.youkuaiyun.com/m0_74915426/article/details/133959147

一.自定义组件

一.自定义组件

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

以下的代码都基于我博客中的 :

微信小程序的OA会议之首页搭建https://blog.youkuaiyun.com/m0_74915426/article/details/133936420?spm=1001.2014.3001.5502

1.1.创建

在项目中创建一个名为 : components 的文件，来存放组件

再在components文件夹中创建一个组件，名为 : tabs ，创建操作如图 :

1.2.定义

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：

在 tabs.json 中编写:

{
  "component": true,
  "usingComponents": {}
}

同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项参见组件模板和样式。

1.3.编写

在 tabs.wxml 中进行编写模板:

<!--components/tabs/tabs.wxml-->
<!-- <text>components/tabs/tabs.wxml</text> -->
<!-- 这是自定义组件的内部WXML结构 -->
<view class="tabs">
    <view class="tabs_title">
        <view wx:for="{
  {tabList}}" wx:key="id" class="title_item  {
  {index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{
  {index}}">
            <view style="margin-bottom:5rpx">{
  {item}}</view>
            <view style="width:30px" class="{
  {index==tabIndex?'item_active1':''}}"></view>
        </view>
    </view>
    <view class="tabs_content">
        <slot></slot>
    </view>
</view>

在 tabs.js 中进行编写功能 :

// components/tabs/tabs.js
Component({
 
  /**
   * 组件的属性列表
   */
  properties: {
 // 这里定义了innerText属性，属性值可以在组件使用时指定
 innerText: {
  type: String,
  value: 'default value'
},
tabList:Object
  },
 
  /**
   * 组件的初始数据
   */
  data: {
    tabIndex:1
  },
 
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e){
      // 获取索引
      const {index} = e.currentTarget.dataset;
      
      // 触发 父组件的事件
      this.triggerEvent("tabsItemChange",{index})
      this.setData({
          tabIndex:index
      })
    }
  }
})

在 tabs.wxss 中进行编写样式:

.tabs {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff;
  z-index: 99;
  border-bottom: 1px solid #efefef;
  padding-bottom: 20rpx;
}
 
.tabs_title {
  /* width: 400rpx; */
  width: 90%;
  display: flex;
  font-size: 9pt;
  padding: 0 20rpx;
}
 
.title_item {
  color: #999;
  padding: 15rpx 0;
  display: flex;
  flex: 1;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
 
.item_active {
  /* color:#ED8137; */
  color: #000000;
  font-size: 11pt;
  font-weight: 800;
}
 
.item_active1 {
  /* color:#ED8137; */
  color: #000000;
  font-size: 11pt;
  font-weight: 800;
  border-bottom: 6rpx solid #333;
  border-radius: 2px;
}

1.4.使用

在项目的 project.config.json 文件中的setting属性中进行配置，增加以下两个配置 :

"ignoreDevUnusedFiles": false,
"ignoreUploadUnusedFiles": false,

如图：

需要在哪个页面中进行使用，就需要在哪个页面中进行引用配置

比如说 : 需要在会议页面中进行使用，就要在会议页面.json (meeting/list/list.json)

中增加以下设置

{
  "usingComponents": {
    "tabs": "../../../components/tabs/tabs"
  }
}

然后再 list.js 中进行初始化数据，在data属性中编写 :

 data: {
    tabs:['会议中','已完成','已取消','全部会议']
}

在 list.wxml中使用

<!--pages/meeting/list/list.wxml-->
<tabs tabList="{
  {tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>

效果图后面一起

注意事项:

一些需要注意的细节：

因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。

自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。

自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。

注意，是否在页面文件中使用 usingComponents 会使得页面的 this 对象的原型稍有差异，包括：

使用 usingComponents 页面的原型与不使用时不一致，即 Object.getPrototypeOf(this) 结果不同。

使用 usingComponents 时会多一些方法，如 selectComponent 。

出于性能考虑，使用 usingComponents 时， setData 内容不会被直接深复制，即 this.setData({ field: obj }) 后 this.data.field === obj 。（深复制会在这个值被组件间传递时发生。）

如果页面比较复杂，新增或删除 usingComponents 定义段时建议重新测试一下。