• 微信小程序开发的OA会议之会议，个人中心的页面搭建及模板以及自定义组件

    目录

    自定义组件

    是什么

    创建

    定义

    编写

    使用

    会议

    数据

     显示

    样式

     效果展示

    个人中心

     页面

    样式

    效果展示

    自定义组件

    是什么

    自定义组件允许开发者将页面中的一部分代码封装成一个可重用的组件，方便在不同的页面中复用。自定义组件可以使用自己的WXML模板、WXSS样式和JS逻辑，实现更加清晰的代码分离和组件化开发。

    创建

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

    定义

    自定义组件的目录结构类似于页面的结构，但组件和页面是有区别的，组件没有自己的生命周期和Page实例，它是由页面进行引用和使用的。 

     在 tabs.json 中编写

    1. {
    2.   "component": true,
    3.   "usingComponents": {}
    4. }

    编写

    在 tabs.wxml 中进行编写代码

    4. <view class="tabs">
    5.     <view class="tabs_title">
    6.         <view wx:for="{{tabList}}" wx:key="id" class="title_item  {{index==tabIndex?'item_active':''}}" bindtap="handleItemTap" data-index="{{index}}">
    7.             <view style="margin-bottom:5rpx">{{item}}view>
    8.             <view style="width:30px" class="{{index==tabIndex?'item_active1':''}}">view>
    9.         view>
    10.     view>
    11.     <view class="tabs_content">
    12.         <slot>slot>
    13.     view>
    14. view>

    在 tabs.js 中进行编写

    1. // components/tabs/tabs.js
    2. Component({
    3.  
    4.   /**
    5.    * 组件的属性列表
    6.    */
    7.   properties: {
    8.  // 这里定义了innerText属性，属性值可以在组件使用时指定
    9.  innerText: {
    10.   type: String,
    11.   value: 'default value'
    12. },
    13. tabList:Object
    14.   },
    15.  
    16.   /**
    17.    * 组件的初始数据
    18.    */
    19.   data: {
    20.     tabIndex:1
    21.   },
    22.  
    23.   /**
    24.    * 组件的方法列表
    25.    */
    26.   methods: {
    27.     handleItemTap(e){
    28.       // 获取索引
    29.       const {index} = e.currentTarget.dataset;
    30.       
    31.       // 触发 父组件的事件
    32.       this.triggerEvent("tabsItemChange",{index})
    33.       this.setData({
    34.           tabIndex:index
    35.       })
    36.     }
    37.   }
    38. })

    在 tabs.wxss 中进行编写样式

    1. .tabs {
    2.   position: fixed;
    3.   top: 0;
    4.   width: 100%;
    5.   background-color: #fff;
    6.   z-index: 99;
    7.   border-bottom: 1px solid #efefef;
    8.   padding-bottom: 20rpx;
    9. }
    10.  
    11. .tabs_title {
    12.   /* width: 400rpx; */
    13.   width: 90%;
    14.   display: flex;
    15.   font-size: 9pt;
    16.   padding: 0 20rpx;
    17. }
    18.  
    19. .title_item {
    20.   color: #999;
    21.   padding: 15rpx 0;
    22.   display: flex;
    23.   flex: 1;
    24.   flex-flow: column nowrap;
    25.   justify-content: center;
    26.   align-items: center;
    27. }
    28.  
    29. .item_active {
    30.   /* color:#ED8137; */
    31.   color: #000000;
    32.   font-size: 11pt;
    33.   font-weight: 800;
    34. }
    35.  
    36. .item_active1 {
    37.   /* color:#ED8137; */
    38.   color: #000000;
    39.   font-size: 11pt;
    40.   font-weight: 800;
    41.   border-bottom: 6rpx solid #333;
    42.   border-radius: 2px;
    43. }

    使用

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

    1. "ignoreDevUnusedFiles": false,
    2. "ignoreUploadUnusedFiles": false,

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

    议页面.json (meeting/list/list.json)中增加以下设置

    1. {
    2.   "usingComponents": {
    3.     "tabs": "../../../components/tabs/tabs"
    4.   }
    5. }

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

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

    在 list.wxml中使用 

    2. <tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
    3. tabs>

    会议

    数据

    在会议的 list.js 中进行初始化数据进行页面显示效果

    1. // pages/meeting/list/list.js
    2. Page({
    3.  
    4.   /**
    5.    * 页面的初始数据
    6.    */
    7.   data: {
    8.     tabs:['会议中','已完成','已取消','全部会议'],
    9.     lists: [
    10.       {
    11.         'id': '1',
    12.         'image': '/static/persons/16.jpg',
    13.         'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    14.         'num':'304',
    15.         'state':'进行中',
    16.         'time': '10月09日 17:59',
    17.         'address': '深圳市·南山区'
    18.       },
    19.       {
    20.         'id': '1',
    21.         'image': '/static/persons/15.gif',
    22.         'title': 'AI WORLD 2016世界人工智能大会',
    23.         'num':'380',
    24.         'state':'进行中',
    25.         'time': '10月09日 17:39',
    26.         'address': '北京市·朝阳区'
    27.       },
    28.       {
    29.         'id': '1',
    30.         'image': '/static/persons/14.jpg',
    31.         'title': 'H100太空商业大会',
    32.         'num':'500',
    33.         'state':'进行中',
    34.         'time': '10月09日 17:31',
    35.         'address': '大连市'
    36.       },
    37.       {
    38.         'id': '1',
    39.         'image': '/static/persons/13.jpg',
    40.         'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
    41.         'num':'150',
    42.         'state':'进行中',
    43.         'time': '10月09日 17:21',
    44.         'address': '北京市·朝阳区'
    45.       },
    46.       {
    47.         'id': '1',
    48.         'image': '/static/persons/8.jpg',
    49.         'title': '新质生活 · 品质时代 2016消费升级创新大会',
    50.         'num':'217',
    51.         'state':'进行中',
    52.         'time': '10月09日 16:59',
    53.         'address': '北京市·朝阳区'
    54.       }
    55.     ],
    56.     lists1: [
    57.       {
    58.         'id': '1',
    59.         'image': '/static/persons/7.jpg',
    60.         'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    61.         'num':'304',
    62.         'state':'已结束',
    63.         'time': '10月09日 17:59',
    64.         'address': '深圳市·南山区'
    65.       },
    66.       {
    67.         'id': '1',
    68.         'image': '/static/persons/15.gif',
    69.         'title': 'AI WORLD 2016世界人工智能大会',
    70.         'num':'380',
    71.         'state':'已结束',
    72.         'time': '10月09日 17:39',
    73.         'address': '北京市·朝阳区'
    74.       },
    75.       {
    76.         'id': '1',
    77.         'image': '/static/persons/14.jpg',
    78.         'title': 'H100太空商业大会',
    79.         'num':'500',
    80.         'state':'已结束',
    81.         'time': '10月09日 17:31',
    82.         'address': '大连市'
    83.       }
    84.     ],
    85.     lists2: [
    86.       {
    87.         'id': '1',
    88.         'image': '/static/persons/16.jpg',
    89.         'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    90.         'num':'304',
    91.         'state':'进行中',
    92.         'time': '10月09日 17:59',
    93.         'address': '深圳市·南山区'
    94.       },
    95.       {
    96.         'id': '1',
    97.         'image': '/static/persons/15.gif',
    98.         'title': 'AI WORLD 2016世界人工智能大会',
    99.         'num':'380',
    100.         'state':'已结束',
    101.         'time': '10月09日 17:39',
    102.         'address': '北京市·朝阳区'
    103.       }
    104.     ],
    105.     lists3: [
    106.       {
    107.         'id': '1',
    108.         'image': '/static/persons/8.jpg',
    109.         'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    110.         'num':'304',
    111.         'state':'进行中',
    112.         'time': '10月09日 17:59',
    113.         'address': '深圳市·南山区'
    114.       },
    115.       {
    116.         'id': '1',
    117.         'image': '/static/persons/7.jpg',
    118.         'title': 'AI WORLD 2016世界人工智能大会',
    119.         'num':'380',
    120.         'state':'已结束',
    121.         'time': '10月09日 17:39',
    122.         'address': '北京市·朝阳区'
    123.       },
    124.       {
    125.         'id': '1',
    126.         'image': '/static/persons/13.jpg',
    127.         'title': 'H100太空商业大会',
    128.         'num':'500',
    129.         'state':'进行中',
    130.         'time': '10月09日 17:31',
    131.         'address': '大连市'
    132.       },
    133.       {
    134.         'id': '1',
    135.         'image': '/static/persons/14.jpg',
    136.         'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
    137.         'num':'150',
    138.         'state':'已结束',
    139.         'time': '10月09日 17:21',
    140.         'address': '北京市·朝阳区'
    141.       },
    142.       {
    143.         'id': '1',
    144.         'image': '/static/persons/15.gif',
    145.         'title': '新质生活 · 品质时代 2016消费升级创新大会',
    146.         'num':'217',
    147.         'state':'进行中',
    148.         'time': '10月09日 16:59',
    149.         'address': '北京市·朝阳区'
    150.       }
    151.     ]
    152.   },
    153.   tabsItemChange(e){
    154.     let tolists;
    155.     if(e.detail.index==1){
    156.         tolists = this.data.lists1;
    157.     }else if(e.detail.index==2){
    158.         tolists = this.data.lists2;
    159.     }else{
    160.         tolists = this.data.lists3;
    161.     }
    162.     this.setData({
    163.         lists: tolists
    164.     })
    165. },
    166.   /**
    167.    * 生命周期函数--监听页面加载
    168.    */
    169.   onLoad(options) {
    170.  
    171.   },
    172.  
    173.   /**
    174.    * 生命周期函数--监听页面初次渲染完成
    175.    */
    176.   onReady() {
    177.  
    178.   },
    179.  
    180.   /**
    181.    * 生命周期函数--监听页面显示
    182.    */
    183.   onShow() {
    184.  
    185.   },
    186.  
    187.   /**
    188.    * 生命周期函数--监听页面隐藏
    189.    */
    190.   onHide() {
    191.  
    192.   },
    193.  
    194.   /**
    195.    * 生命周期函数--监听页面卸载
    196.    */
    197.   onUnload() {
    198.  
    199.   },
    200.  
    201.   /**
    202.    * 页面相关事件处理函数--监听用户下拉动作
    203.    */
    204.   onPullDownRefresh() {
    205.  
    206.   },
    207.  
    208.   /**
    209.    * 页面上拉触底事件的处理函数
    210.    */
    211.   onReachBottom() {
    212.  
    213.   },
    214.  
    215.   /**
    216.    * 用户点击右上角分享
    217.    */
    218.   onShareAppMessage() {
    219.  
    220.   }
    221. })

     显示

     在会议的 list.wxml  中进行编写

    1. <!--pages/meeting/list/list.wxml-->
    2. <tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
    3. </tabs>
    4. <view style="height: 100rpx;"></view>
    5. <block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    6.     <view class="list" data-id="{{item.id}}">
    7.         <view class="list-img al-center">
    8.             <image class="video-img" mode="scaleToFill" src="{{item.image}}"></image>
    9.         </view>
    10.         <view class="list-detail">
    11.             <view class="list-title"><text>{{item.title}}</text></view>
    12.             <view class="list-tag">
    13.                 <view class="state al-center">{{item.state}}</view>
    14.                 <view class="join al-center"><text class="list-num">{{item.num}}</text>人报名</view>
    15.             </view>
    16.             <view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view>
    17.         </view>
    18.     </view>
    19. </block> 
    20. <view class="section bottom-line">
    21. 		<text>到底啦</text>
    22. </view>

    样式

    1. /* pages/meeting/list/list.wxss */
    2. .list {
    3.   display: flex;
    4.   flex-direction: row;
    5.   width: 100%;
    6.   padding: 0 20rpx 0 0;
    7.   border-top: 1px solid #eeeeee;
    8.   background-color: #fff;
    9.   margin-bottom: 5rpx;
    10.   /* border-radius: 20rpx;
    11.   box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
    12. }
    13.  
    14. .list-img {
    15.   display: flex;
    16.   margin: 10rpx 10rpx;
    17.   width: 150rpx;
    18.   height: 220rpx;
    19.   justify-content: center;
    20.   align-items: center;
    21. }
    22.  
    23. .list-img .video-img {
    24.   width: 120rpx;
    25.   height: 120rpx;
    26.   
    27. }
    28.  
    29. .list-detail {
    30.   margin: 10rpx 10rpx;
    31.   display: flex;
    32.   flex-direction: column;
    33.   width: 600rpx;
    34.   height: 220rpx;
    35. }
    36.  
    37. .list-title text {
    38.   font-size: 11pt;
    39.   color: #333;
    40.   font-weight: bold;
    41. }
    42.  
    43. .list-detail .list-tag {
    44.   display: flex;
    45.   height: 70rpx;
    46. }
    47.  
    48. .list-tag .state {
    49.   font-size: 9pt;
    50.   color: #81aaf7;
    51.   width: 120rpx;
    52.   border: 1px solid #93b9ff;
    53.   border-radius: 2px;
    54.   margin: 10rpx 0rpx;
    55.   display: flex;
    56.   justify-content: center;
    57.   align-items: center;
    58. }
    59.  
    60. .list-tag .join {
    61.   font-size: 11pt;
    62.   color: #bbb;
    63.   margin-left: 20rpx;
    64.   display: flex;
    65.   justify-content: center;
    66.   align-items: center;
    67. }
    68.  
    69. .list-tag .list-num {
    70.   font-size: 11pt;
    71.   color: #ff6666;
    72. }
    73.  
    74. .list-info {
    75.   font-size: 9pt;
    76.   color: #bbb;
    77.   margin-top: 20rpx;
    78. }
    79. .bottom-line{
    80.   display: flex;
    81.   height: 60rpx;
    82.   justify-content: center;
    83.   align-items: center;
    84.   background-color: #f3f3f3;
    85. }
    86. .bottom-line text{
    87.   font-size: 9pt;
    88.   color: #666;
    89. }

     效果展示

    个人中心

     页面

    在个人中心页面中编写 .wxml 文件(如 : ucenter/index/index.wxml) 进行页面显示

    1. <!--pages/ucenter/index/index.wxml-->
    2. <!-- <text>pages/ucenter/index/index.wxml</text> -->
    3. <!--pages/ucenter/index/index.wxml-->
    4. <!-- <text>pages/ucenter/index/index.wxml</text> -->
    5. <!--pages/ucenter/index/index.wxml-->
    6. <!-- <text>pages/ucenter/index/index.wxml</text> -->
    7. <view class="user">
    8.     <image class="user-img"  src="/static/persons/1.jpg"></image>
    9.     <view class="user-name">小徐</view>
    10.     <text class="user-up">修改</text>
    11. </view>
    12. <view class="cells">
    13.     <view class="cell-items">
    14.         <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
    15.         <text class="cell-items-title">我主持的会议</text>
    16.         <text class="cell-items-num">1</text>
    17.         <text class="cell-items-detail">🫰</text>
    18.     </view>
    19.     <view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
    20.     <view class="cell-items">
    21.         <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
    22.         <text class="cell-items-title">我参与的会议</text>
    23.         <text class="cell-items-num">10</text>
    24.         <text class="cell-items-detail">🫰</text>
    25.     </view>
    26. </view>
    27. <view style="height: 27rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
    28. <view class="cells">
    29.     <view class="cell-items">
    30.         <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
    31.         <text class="cell-items-title">我发布的投票</text>
    32.         <text class="cell-items-num">1</text>
    33.         <text class="cell-items-detail">🫰</text>
    34.     </view>
    35.     <view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
    36.     <view class="cell-items">
    37.         <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
    38.         <text class="cell-items-title">我参与的投票</text>
    39.         <text class="cell-items-num">10</text>
    40.         <text class="cell-items-detail">🫰</text>
    41.     </view>
    42. </view>
    43. <view style="height: 27rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
    44. <view class="cells">
    45.     <view class="cell-items">
    46.         <image src="/static/tabBar/template.png" class="cell-items-icon"></image>
    47.         <text class="cell-items-title">信息</text>
    48.         <text class="cell-items-ion">🫰</text>
    49.     </view>
    50.     <view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
    51.     <view class="cell-items">
    52.         <image src="/static/tabBar/component.png" class="cell-items-icon"></image>
    53.         <text class="cell-items-title">设置</text>
    54.         <text class="cell-items-ion">🫰</text>
    55.     </view>
    56. </view>

    样式

    在个人中心的 .wxss 样式文件 中进行编写样式，来美化布局的页面效果

    1. /* pages/ucenter/index/index.wxss */
    2. Page{
    3.   background-color: rgba(135, 206, 250, 0.075);
    4. }
    5. .user{
    6.   display: flex;
    7.   width: 100%;
    8.   align-items:center;
    9.   background-color: white;
    10.   margin-bottom: 28rpx;
    11. }
    12. .user-img{
    13. height: 170rpx;
    14. width: 170rpx;
    15. margin: 30rpx;
    16. border: 1px solid #cdd7ee;
    17. border-radius: 6px;
    18. }
    19. .user-name{
    20. width: 380rpx;
    21. margin-left: 20rpx;
    22. font-weight: 550;
    23. }
    24. .user-up{
    25. color: rgb(136, 133, 133);
    26. }
    27. .cells{
    28.   background-color: white;
    29. }
    30. .cell-items{
    31.   display: flex;
    32.   align-items:center; 
    33.   height: 110rpx;
    34. }
    35. .cell-items-title{
    36.   width: 290rpx;
    37. }
    38. .cell-items-icon{
    39.   width: 50rpx;
    40.   height: 50rpx;
    41.   margin: 20rpx;
    42. }
    43. .cell-items-num{
    44.   padding-left: 30rpx;
    45.   margin-left: 200rpx;
    46.   width: 70rpx;
    47. }
    48. .cell-items-ion{
    49.   margin-left: 295rpx;
    50. }

    效果展示

    okok，今天就到这里了，下班下班！！！！！！！！！！！！！！！ 

  • 相关阅读:
    高性能MySQL实战开篇寄语：建立完整的MySQL知识体系
    内衣洗衣机什么牌子好又便宜？实力非凡机型深度测评
    链表经典面试题(四)
    MVCC版本并发控制、bufferpool缓存机制
    12.cuBLAS开发指南中文版--cuBLAS中的Level-1函数asum()和axpy()
    WPF中使用WinForm Chart控件(1)----实时曲线
    Jaya算法在电力系统最优潮流计算中的应用（创新点）【Matlab代码实现】
    「实用场景教程」如何用日程控件DHTMLX Scheduler制作酒店预订日历？（一）
    【Netty】TCP拆包黏包问题讲解_基础概念介绍
    管理者的三抓三放
  • 原文地址：https://blog.csdn.net/m0_74934282/article/details/133936149