微信小程序之自定義組件（OA項(xiàng)目個(gè)人主頁(yè)及投票）

這篇具有很好參考價(jià)值的文章主要介紹了微信小程序之自定義組件（OA項(xiàng)目個(gè)人主頁(yè)及投票）。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

前言

本期為大家?guī)?lái)微信小程序自定義組件及OA項(xiàng)目的個(gè)人主頁(yè)布局和投票

微信小程序之自定義組件（OA項(xiàng)目個(gè)人主頁(yè)及投票）,微信小程序,微信小程序,小程序

一.自定義組件

1.學(xué)習(xí)官網(wǎng)

自定義組件 / 介紹 (qq.com)

2.如何自定義組件

?2.1 創(chuàng)建目錄

在根目錄下依次創(chuàng)建components/tabs，然后在tabs中新建Component

微信小程序之自定義組件（OA項(xiàng)目個(gè)人主頁(yè)及投票）,微信小程序,微信小程序,小程序

創(chuàng)建好后會(huì)自動(dòng)為我們生成對(duì)應(yīng)的文件

微信小程序之自定義組件（OA項(xiàng)目個(gè)人主頁(yè)及投票）,微信小程序,微信小程序,小程序

2.2添加配置文件(關(guān)閉檢查)

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

在根目錄下的project.config.json中的setting中添加上面的代碼?

微信小程序之自定義組件（OA項(xiàng)目個(gè)人主頁(yè)及投票）,微信小程序,微信小程序,小程序

2.3 添加組件內(nèi)容

在?wxml?文件中編寫組件模板

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

2.4 設(shè)置組件樣式

在wxss中設(shè)置樣式

.inner {
  color: red;
}

2.5 在component中注冊(cè)組件

在js文件中的component中的組件屬性列表中注冊(cè)組件

Component({
  properties: {
    // 這里定義了innerText屬性，屬性值可以在組件使用時(shí)指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 這里是一些組件內(nèi)部數(shù)據(jù)
    someData: {}
  },
  methods: {
    // 這里是一個(gè)自定義方法
    customMethod: function(){}
  }
})

3.使用自定義組件

3.1使用組件tabs

將組件配置添加到要使用的模塊的json中

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

?3.2 在wxml中進(jìn)行使用

這里默認(rèn)在meeting/list.wxml中使用

<!--pages/meeting/list/list.wxml-->
<text>pages/meeting/list/list.wxml</text>
<tabs inner-text="YU"></tabs>

微信小程序之自定義組件（OA項(xiàng)目個(gè)人主頁(yè)及投票）,微信小程序,微信小程序,小程序 ?

注：

因?yàn)?WXML 節(jié)點(diǎn)標(biāo)簽名只能是小寫字母、中劃線和下劃線的組合，所以自定義組件的標(biāo)簽名也只能包含這些字符。

自定義組件也是可以引用自定義組件的，引用方法類似于頁(yè)面引用自定義組件的方式（使用?usingComponents?字段）。

自定義組件和頁(yè)面所在項(xiàng)目根目錄名不能以“wx-”為前綴，否則會(huì)報(bào)錯(cuò)。

注意，是否在頁(yè)面文件中使用?usingComponents?會(huì)使得頁(yè)面的?this?對(duì)象的原型稍有差異，包括：

使用?usingComponents?頁(yè)面的原型與不使用時(shí)不一致，即?Object.getPrototypeOf(this)?結(jié)果不同。

使用?usingComponents?時(shí)會(huì)多一些方法，如?selectComponent?。

出于性能考慮，使用?usingComponents?時(shí)，?setData?內(nèi)容不會(huì)被直接深復(fù)制，即?this.setData({ field: obj })?后?this.data.field === obj?。（深復(fù)制會(huì)在這個(gè)值被組件間傳遞時(shí)發(fā)生。）

如果頁(yè)面比較復(fù)雜，新增或刪除?usingComponents?定義段時(shí)建議重新測(cè)試一下。

4.自定義組件實(shí)戰(zhàn)（OA項(xiàng)目）

4.1 分別定義好模板和樣式

<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 {
    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;
}

4.2 在組件屬性中定義屬性和屬性方法

properties: {
    tabList:Object 
  },
methods: {
    handleItemTap(e){
      // 獲取索引
      const {index} = e.currentTarget.dataset;
      // 觸發(fā) 父組件的事件
      this.triggerEvent("tabsItemChange",{index})
      this.setData({
          tabIndex:index
      })
    }
  }

4.3在list.wxml中進(jìn)行使用

<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>

4.4 頁(yè)面切換所需數(shù)據(jù)?

tabs:['會(huì)議中','已完成','已取消','全部會(huì)議'],lists: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '對(duì)話產(chǎn)品總監(jiān) | 深圳·北京PM大會(huì) 【深度對(duì)話小米/京東/等產(chǎn)品總監(jiān)】',
        'num':'304',
        'state':'進(jìn)行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山區(qū)'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大會(huì)',
        'num':'380',
        'state':'已結(jié)束',
        'time': '10月09日 17:39',
        'address': '北京市·朝陽(yáng)區(qū)'
      },
      {
        'id': '1',
        'image': '/static/persons/3.jpg',
        'title': 'H100太空商業(yè)大會(huì)',
        'num':'500',
        'state':'進(jìn)行中',
        'time': '10月09日 17:31',
        'address': '大連市'
      },
      {
        'id': '1',
        'image': '/static/persons/4.jpg',
        'title': '報(bào)名年度盛事，大咖云集！2016鳳凰國(guó)際論壇邀您“與世界對(duì)話”',
        'num':'150',
        'state':'已結(jié)束',
        'time': '10月09日 17:21',
        'address': '北京市·朝陽(yáng)區(qū)'
      },
      {
        'id': '1',
        'image': '/static/persons/5.jpg',
        'title': '新質(zhì)生活 · 品質(zhì)時(shí)代 2016消費(fèi)升級(jí)創(chuàng)新大會(huì)',
        'num':'217',
        'state':'進(jìn)行中',
        'time': '10月09日 16:59',
        'address': '北京市·朝陽(yáng)區(qū)'
      }
    ],
    lists1: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '對(duì)話產(chǎn)品總監(jiān) | 深圳·北京PM大會(huì) 【深度對(duì)話小米/京東/等產(chǎn)品總監(jiān)】',
        'num':'304',
        'state':'進(jìn)行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山區(qū)'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大會(huì)',
        'num':'380',
        'state':'已結(jié)束',
        'time': '10月09日 17:39',
        'address': '北京市·朝陽(yáng)區(qū)'
      },
      {
        'id': '1',
        'image': '/static/persons/3.jpg',
        'title': 'H100太空商業(yè)大會(huì)',
        'num':'500',
        'state':'進(jìn)行中',
        'time': '10月09日 17:31',
        'address': '大連市'
      }
    ],
    lists2: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '對(duì)話產(chǎn)品總監(jiān) | 深圳·北京PM大會(huì) 【深度對(duì)話小米/京東/等產(chǎn)品總監(jiān)】',
        'num':'304',
        'state':'進(jìn)行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山區(qū)'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大會(huì)',
        'num':'380',
        'state':'已結(jié)束',
        'time': '10月09日 17:39',
        'address': '北京市·朝陽(yáng)區(qū)'
      }
    ],
    lists3: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '對(duì)話產(chǎn)品總監(jiān) | 深圳·北京PM大會(huì) 【深度對(duì)話小米/京東/等產(chǎn)品總監(jiān)】',
        'num':'304',
        'state':'進(jìn)行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山區(qū)'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大會(huì)',
        'num':'380',
        'state':'已結(jié)束',
        'time': '10月09日 17:39',
        'address': '北京市·朝陽(yáng)區(qū)'
      },
      {
        'id': '1',
        'image': '/static/persons/3.jpg',
        'title': 'H100太空商業(yè)大會(huì)',
        'num':'500',
        'state':'進(jìn)行中',
        'time': '10月09日 17:31',
        'address': '大連市'
      },
      {
        'id': '1',
        'image': '/static/persons/4.jpg',
        'title': '報(bào)名年度盛事，大咖云集！2016鳳凰國(guó)際論壇邀您“與世界對(duì)話”',
        'num':'150',
        'state':'已結(jié)束',
        'time': '10月09日 17:21',
        'address': '北京市·朝陽(yáng)區(qū)'
      },
      {
        'id': '1',
        'image': '/static/persons/5.jpg',
        'title': '新質(zhì)生活 · 品質(zhì)時(shí)代 2016消費(fèi)升級(jí)創(chuàng)新大會(huì)',
        'num':'217',
        'state':'進(jìn)行中',
        'time': '10月09日 16:59',
        'address': '北京市·朝陽(yáng)區(qū)'
      }
    ]

4.5?頁(yè)面切換

通過tabsItemChange的方法進(jìn)行一個(gè)頁(yè)面的頂部導(dǎo)航欄切換

tabsItemChange(e){
    let tolists;
    if(e.detail.index==1){
        tolists = this.data.lists1;
    }else if(e.detail.index==2){
        tolists = this.data.lists2;
    }else{
        tolists = this.data.lists3;
    }
    this.setData({
        lists: tolists
    })
},

?4.5 頁(yè)面布局

<view style="height: 60px;"></view>
<block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
  <view class="list" data-id="{{item.id}}">
    <view class="list-img">
      <image class="video-img" mode="scaleToFill" src="{{item.image}}"></image>
    </view>
    <view class="list-detail">
      <view class="list-title"><text>{{item.title}}</text></view>
      <view class="list-tag">
        <view class="state">{{item.state}}</view>
        <view class="join"><text class="list-num">{{item.num}}</text>人報(bào)名</view>
      </view>
      <view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view>
    </view>
  </view>
</block>
<view class="section">
  <text>到底啦</text>
</view>

頁(yè)面樣式

/* pages/meeting/list/list.wxss */
/* pages/meeting/list/list.wxss */
.section{
  color: #aaa;
  display: flex;
  justify-content: center;
}
 
.list-info {
  color: #aaa;
}
 
.list-num {
  color: #e40909;
  font-weight: 700;
}
 
.join {
  padding: 0px 0px 0px 10px;
  color: #aaa;
}
 
.state {
  margin: 0px 6px 0px 6px;
  border: 1px solid #93b9ff;
  color: #93b9ff;
}
 
.list-tag {
  padding: 3px 0px 10px 0px;
  display: flex;
  align-items: center;
}
 
.list-title {
  display: flex;
  justify-content: space-between;
  font-size: 11pt;
  color: #333;
  font-weight: bold;
 
 
}
 
.list-detail {
  display: flex;
  flex-direction: column;
  margin: 0px 0px 0px 15px;
}
 
.video-img {
  width: 80px;
  height: 80px;
}
 
.list {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #6b6e74;
  padding: 10px;
}
 
.mobi-text {
  font-weight: 700;
  padding: 15px;
}
 
.mobi-icon {
  border-left: 5px solid #e40909;
}
 
.mobi-title {
  background-color: rgba(158, 158, 142, 0.678);
  margin: 10px 0px 10px 0px;
}
 
.swiper-item {
  height: 300rpx;
  width: 100%;
  border-radius: 10rpx;
}
 
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #aaa;
}
 
.userinfo-avatar {
  overflow: hidden;
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
 
.usermotto {
  margin-top: 200px;
}

?效果展示

微信小程序之自定義組件（OA項(xiàng)目個(gè)人主頁(yè)及投票）,微信小程序,微信小程序,小程序

二.OA項(xiàng)目布局

1.個(gè)人主頁(yè)

1.1 頁(yè)面布局

<!--pages/ucenter/index/index.wxml-->
<view class="userInfo">
  <image class="userInfo-head" src="/static/persons/1.png"></image>
  <view class="userInfo-login">ChatYU</view>
  <text class="userInfo-set">修改></text>
</view>
 
<view class="cells">
  <view class="cell-items">
    <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
    <text class="cell-items-title">我發(fā)布的會(huì)議</text>
    <view class="cell-items-num">1</view>
    <text class="cell-items-detail">＞</text>
  </view>
  <hr />
  <view class="cell-items">
    <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
    <text class="cell-items-title">我主持的會(huì)議</text>
    <view class="cell-items-num">1</view>
    <text class="cell-items-detail">＞</text>
  </view>
</view>
<view class="cells">
  <view class="cell-items">
    <image src="/static/tabBar/coding.png" class="cell-items-icon"></image>
    <text class="cell-items-title">投票的會(huì)議</text>
    <view class="cell-items-num">2</view>
    <text class="cell-items-detail">＞</text>
  </view>
  <hr />
  <view class="cell-items">
    <image src="/static/tabBar/coding.png" class="cell-items-icon"></image>
    <text class="cell-items-title">未投票的會(huì)議</text>
    <view class="cell-items-num">2</view>
    <text class="cell-items-detail">＞</text>
  </view>
</view>
<view class="cells">
  <view class="cell-items">
    <image src="/static/tabBar/template.png" class="cell-items-icon"></image>
    <text class="cell-items-title">我參與的會(huì)議</text>
    <view class="cell-items-num">5</view>
    <text class="cell-items-detail">＞</text>
  </view>
  <hr />
  <view class="cell-items">
    <image src="/static/tabBar/template.png" class="cell-items-icon"></image>
    <text class="cell-items-title">我審核的會(huì)議</text>
    <view class="cell-items-num">4</view>
    <text class="cell-items-detail">＞</text>
  </view>
</view>
 
<view class="cells">
  <view class="cell-items">
    <image src="/static/tabBar/coding.png" class="cell-items-icon"></image>
    <text class="cell-items-title">消息</text>
  </view>
  <hr />
  <view class="cell-items">
    <image src="/static/tabBar/component.png" class="cell-items-icon"></image>
    <text class="cell-items-title">設(shè)置</text>
 
  </view>
</view>

1.2?頁(yè)面樣式

/* pages/ucenter/index/index.wxss */
.userInfo{
  padding: 5px 0px 20px 10px;
  display: flex;
  align-items: center;
}
.userInfo-head{
  height: 80px;
  width: 80px;
  border: 5px solid rgb(194, 141, 26);
}
.userInfo-login{
  width: 245px;
  padding-left: 10px;
  font-weight: 700;
}
.userInfo-set{
  margin-right:20rpx ;
  color: rgb(196, 170, 56);
}
.cells{
  border-top: 8px solid rgb(238, 238, 238);
}
.cell-items{
  
  display: flex;
  align-items: center;
  border-top: 1px solid rgb(238, 238, 238);
  padding-top: 20px;
  padding-bottom: 20px;
}
.cell-items-icon{
  height: 25px;
  width: 25px;
  padding: 0px 10px 0px 5px;
}
.cell-items-title{
  width: 340px;
}
.cell-items-num{
  width: 30px;
  font-weight: 700;
  color: rgb(218, 31, 31);
}
.cell-items-detail{
  color: rgb(146, 151, 155);
}

1.3 效果展示

?

2.投票

2.1 頁(yè)面布局

<!--pages/vote/list/list.wxml-->
<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>
<view class="head">會(huì)議投票</view>
<view>
  <swiper indicator-dots="true" autoplay="true">
          <swiper-item>
            <image src="/static/meeting/2.png"></image>
          </swiper-item>
          <swiper-item>
            <image src="/static/meeting/會(huì)議.jpg"></image>
          </swiper-item>
      </swiper>
</view>
<view class="container">
  <!-- 左邊部分，會(huì)議投票 -->
  <view class="left-section">
    <view class="weui-view1">會(huì)議投票</view>
    <!-- 這里放置會(huì)議投票的內(nèi)容 -->
  </view>

  <!-- 右邊部分，包括會(huì)議標(biāo)題、投票事件、會(huì)議內(nèi)容 -->
  <view class="right-section">
    <!-- 會(huì)議標(biāo)題 -->
    <view class="item">
      <input class="weui-input1" auto-focus placeholder="會(huì)議標(biāo)題"/>
      <!-- 這里放置會(huì)議標(biāo)題的內(nèi)容 -->
    </view>

    <!-- 投票事件 -->
    <view class="item">
      <input class="weui-input2" auto-focus placeholder="投票事件"/>
      <!-- 這里放置投票事件的內(nèi)容 -->
    </view>

    <!-- 會(huì)議內(nèi)容 -->
    <view class="item">
      <input class="weui-input3" auto-focus placeholder="會(huì)議內(nèi)容"/>
      <!-- 這里放置會(huì)議內(nèi)容的內(nèi)容 -->
    </view>
  </view>
</view>
<view class="container">
  <!-- 左邊部分，會(huì)議投票 -->
  <view class="left-section1">
    <view class="weui-view2">會(huì)議投票</view>
    <!-- 這里放置會(huì)議投票的內(nèi)容 -->
  </view>

  <!-- 右邊部分，包括會(huì)議標(biāo)題、投票事件、會(huì)議內(nèi)容 -->
  <view class="right-section">
    <!-- 會(huì)議標(biāo)題 -->
    <view class="item">
      <input class="weui-input1" auto-focus placeholder="投票選項(xiàng)1"/>
      <!-- 這里放置會(huì)議標(biāo)題的內(nèi)容 -->
    </view>

    <!-- 投票事件 -->
    <view class="item">
      <input class="weui-input2" auto-focus placeholder="投票選項(xiàng)2"/>
      <!-- 這里放置投票事件的內(nèi)容 -->
    </view>

  </view>
</view>
<view class="to_metting">發(fā)起投票</view>

2.2 頁(yè)面樣式

/* pages/vote/list/list.wxss */
.head{
  text-align: center;
  width: 313px;
  border:3px solid rgb(46, 133, 155);
  background-color: aqua

}
.container {
  padding: 0;
  display: flex;
  flex-direction: row;
}

.left-section {
  border: 2px solid rgb(10, 216, 231);
  width: 100px;
  height: 155px;
  text-align: center;
  background-color: #13bb91; /* 左邊部分的背景顏色 */
}
.left-section1 {
  border: 2px solid rgb(22, 221, 128);
  width: 100px;
  height: 100px;
  text-align: center;
  background-color: #10d9f3; /* 左邊部分的背景顏色 */
}

.right-section {
  flex: 1; /* 長(zhǎng)占一份 */
  padding: 20rpx; /* 右邊部分的內(nèi)邊距 */
}

.item {
  
  margin-bottom: 10rpx; /* 項(xiàng)目之間的下邊距 */
}

.weui-view1{
  margin-top: 60px;
}

.weui-view2{
  margin-top: 35px;
}

.weui-input1{
  height: 45px;
  border: 2px solid rgb(38, 196, 207);
}
.weui-input2{
  height: 45px;
  border: 2px solid rgb(218, 170, 14);
}
.weui-input3{
  height: 45px;
  border: 2px solid rgb(21, 167, 40);
}
.to_metting{
  border: 2px solid rgb(10, 216, 231);
  display: flex;
  justify-content: center; /* 水平居中 */
  background-color: rgb(21, 167, 40);
}

2.3 效果演示

微信小程序之自定義組件（OA項(xiàng)目個(gè)人主頁(yè)及投票）,微信小程序,微信小程序,小程序

今天的分享到這里就結(jié)束了，感謝各位大大的觀看，各位大大的三連是博主更新的動(dòng)力，感謝謝謝謝謝謝謝謝謝各位的支持?。。。?！?

微信小程序之自定義組件（OA項(xiàng)目個(gè)人主頁(yè)及投票）,微信小程序,微信小程序,小程序文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-743312.html

到了這里，關(guān)于微信小程序之自定義組件（OA項(xiàng)目個(gè)人主頁(yè)及投票）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！