• 微信小程序之自定义组件（OA项目个人主页及投票）

    前言

    本期为大家带来微信小程序自定义组件及OA项目的个人主页布局和投票

    一.自定义组件

    1.学习官网

    自定义组件 / 介绍 (qq.com)

    2.如何自定义组件

     2.1 创建目录

    在根目录下依次创建components/tabs，然后在tabs中新建Component

    创建好后会自动为我们生成对应的文件

    2.2添加配置文件(关闭检查)

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

    在根目录下的project.config.json中的setting中添加上面的代码 

    2.3 添加组件内容

    在 wxml 文件中编写组件模板

    1. <view class="inner">
    2.   {{innerText}}
    3. view>
    4. <slot>slot>

    2.4 设置组件样式

    在wxss中设置样式

    1. .inner {
    2.   color: red;
    3. }

    2.5 在component中注册组件

    在js文件中的component中的组件属性列表中注册组件

    1. Component({
    2.   properties: {
    3.     // 这里定义了innerText属性，属性值可以在组件使用时指定
    4.     innerText: {
    5.       type: String,
    6.       value: 'default value',
    7.     }
    8.   },
    9.   data: {
    10.     // 这里是一些组件内部数据
    11.     someData: {}
    12.   },
    13.   methods: {
    14.     // 这里是一个自定义方法
    15.     customMethod: function(){}
    16.   }
    17. })

    3.使用自定义组件

    3.1使用组件tabs

    将组件配置添加到要使用的模块的json中

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

     3.2 在wxml中进行使用

    这里默认在meeting/list.wxml中使用

    2. <text>pages/meeting/list/list.wxmltext>
    3. <tabs inner-text="YU">tabs>

     

    注：

    • 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
    • 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。
    • 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。

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

    • 使用 usingComponents 页面的原型与不使用时不一致，即 Object.getPrototypeOf(this) 结果不同。
    • 使用 usingComponents 时会多一些方法，如 selectComponent 。
    • 出于性能考虑，使用 usingComponents 时， setData 内容不会被直接深复制，即 this.setData({ field: obj }) 后 this.data.field === obj 。（深复制会在这个值被组件间传递时发生。）

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

    4.自定义组件实战（OA项目）

    4.1 分别定义好模板和样式

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

    4.2 在组件属性中定义属性和属性方法

    1. properties: {
    2.     tabList:Object 
    3.   },
    4. methods: {
    5.     handleItemTap(e){
    6.       // 获取索引
    7.       const {index} = e.currentTarget.dataset;
    8.       // 触发 父组件的事件
    9.       this.triggerEvent("tabsItemChange",{index})
    10.       this.setData({
    11.           tabIndex:index
    12.       })
    13.     }
    14.   }

    4.3在list.wxml中进行使用

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

    4.4 页面切换所需数据 

    1. tabs:['会议中','已完成','已取消','全部会议'],lists: [
    2.       {
    3.         'id': '1',
    4.         'image': '/static/persons/1.jpg',
    5.         'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    6.         'num':'304',
    7.         'state':'进行中',
    8.         'time': '10月09日 17:59',
    9.         'address': '深圳市·南山区'
    10.       },
    11.       {
    12.         'id': '1',
    13.         'image': '/static/persons/2.jpg',
    14.         'title': 'AI WORLD 2016世界人工智能大会',
    15.         'num':'380',
    16.         'state':'已结束',
    17.         'time': '10月09日 17:39',
    18.         'address': '北京市·朝阳区'
    19.       },
    20.       {
    21.         'id': '1',
    22.         'image': '/static/persons/3.jpg',
    23.         'title': 'H100太空商业大会',
    24.         'num':'500',
    25.         'state':'进行中',
    26.         'time': '10月09日 17:31',
    27.         'address': '大连市'
    28.       },
    29.       {
    30.         'id': '1',
    31.         'image': '/static/persons/4.jpg',
    32.         'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
    33.         'num':'150',
    34.         'state':'已结束',
    35.         'time': '10月09日 17:21',
    36.         'address': '北京市·朝阳区'
    37.       },
    38.       {
    39.         'id': '1',
    40.         'image': '/static/persons/5.jpg',
    41.         'title': '新质生活 · 品质时代 2016消费升级创新大会',
    42.         'num':'217',
    43.         'state':'进行中',
    44.         'time': '10月09日 16:59',
    45.         'address': '北京市·朝阳区'
    46.       }
    47.     ],
    48.     lists1: [
    49.       {
    50.         'id': '1',
    51.         'image': '/static/persons/1.jpg',
    52.         'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    53.         'num':'304',
    54.         'state':'进行中',
    55.         'time': '10月09日 17:59',
    56.         'address': '深圳市·南山区'
    57.       },
    58.       {
    59.         'id': '1',
    60.         'image': '/static/persons/2.jpg',
    61.         'title': 'AI WORLD 2016世界人工智能大会',
    62.         'num':'380',
    63.         'state':'已结束',
    64.         'time': '10月09日 17:39',
    65.         'address': '北京市·朝阳区'
    66.       },
    67.       {
    68.         'id': '1',
    69.         'image': '/static/persons/3.jpg',
    70.         'title': 'H100太空商业大会',
    71.         'num':'500',
    72.         'state':'进行中',
    73.         'time': '10月09日 17:31',
    74.         'address': '大连市'
    75.       }
    76.     ],
    77.     lists2: [
    78.       {
    79.         'id': '1',
    80.         'image': '/static/persons/1.jpg',
    81.         'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    82.         'num':'304',
    83.         'state':'进行中',
    84.         'time': '10月09日 17:59',
    85.         'address': '深圳市·南山区'
    86.       },
    87.       {
    88.         'id': '1',
    89.         'image': '/static/persons/2.jpg',
    90.         'title': 'AI WORLD 2016世界人工智能大会',
    91.         'num':'380',
    92.         'state':'已结束',
    93.         'time': '10月09日 17:39',
    94.         'address': '北京市·朝阳区'
    95.       }
    96.     ],
    97.     lists3: [
    98.       {
    99.         'id': '1',
    100.         'image': '/static/persons/1.jpg',
    101.         'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
    102.         'num':'304',
    103.         'state':'进行中',
    104.         'time': '10月09日 17:59',
    105.         'address': '深圳市·南山区'
    106.       },
    107.       {
    108.         'id': '1',
    109.         'image': '/static/persons/2.jpg',
    110.         'title': 'AI WORLD 2016世界人工智能大会',
    111.         'num':'380',
    112.         'state':'已结束',
    113.         'time': '10月09日 17:39',
    114.         'address': '北京市·朝阳区'
    115.       },
    116.       {
    117.         'id': '1',
    118.         'image': '/static/persons/3.jpg',
    119.         'title': 'H100太空商业大会',
    120.         'num':'500',
    121.         'state':'进行中',
    122.         'time': '10月09日 17:31',
    123.         'address': '大连市'
    124.       },
    125.       {
    126.         'id': '1',
    127.         'image': '/static/persons/4.jpg',
    128.         'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
    129.         'num':'150',
    130.         'state':'已结束',
    131.         'time': '10月09日 17:21',
    132.         'address': '北京市·朝阳区'
    133.       },
    134.       {
    135.         'id': '1',
    136.         'image': '/static/persons/5.jpg',
    137.         'title': '新质生活 · 品质时代 2016消费升级创新大会',
    138.         'num':'217',
    139.         'state':'进行中',
    140.         'time': '10月09日 16:59',
    141.         'address': '北京市·朝阳区'
    142.       }
    143.     ]

    4.5 页面切换

    通过tabsItemChange的方法进行一个页面的顶部导航栏切换

    1. tabsItemChange(e){
    2.     let tolists;
    3.     if(e.detail.index==1){
    4.         tolists = this.data.lists1;
    5.     }else if(e.detail.index==2){
    6.         tolists = this.data.lists2;
    7.     }else{
    8.         tolists = this.data.lists3;
    9.     }
    10.     this.setData({
    11.         lists: tolists
    12.     })
    13. },

     4.5 页面布局

    1. <view style="height: 60px;">view>
    2. <block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    3.   <view class="list" data-id="{{item.id}}">
    4.     <view class="list-img">
    5.       <image class="video-img" mode="scaleToFill" src="{{item.image}}">image>
    6.     view>
    7.     <view class="list-detail">
    8.       <view class="list-title"><text>{{item.title}}text>view>
    9.       <view class="list-tag">
    10.         <view class="state">{{item.state}}view>
    11.         <view class="join"><text class="list-num">{{item.num}}text>人报名view>
    12.       view>
    13.       <view class="list-info"><text>{{item.address}}text>|<text>{{item.time}}text>view>
    14.     view>
    15.   view>
    16. block>
    17. <view class="section">
    18.   <text>到底啦text>
    19. view>

    页面样式

    1. /* pages/meeting/list/list.wxss */
    2. /* pages/meeting/list/list.wxss */
    3. .section{
    4.   color: #aaa;
    5.   display: flex;
    6.   justify-content: center;
    7. }
    8.  
    9. .list-info {
    10.   color: #aaa;
    11. }
    12.  
    13. .list-num {
    14.   color: #e40909;
    15.   font-weight: 700;
    16. }
    17.  
    18. .join {
    19.   padding: 0px 0px 0px 10px;
    20.   color: #aaa;
    21. }
    22.  
    23. .state {
    24.   margin: 0px 6px 0px 6px;
    25.   border: 1px solid #93b9ff;
    26.   color: #93b9ff;
    27. }
    28.  
    29. .list-tag {
    30.   padding: 3px 0px 10px 0px;
    31.   display: flex;
    32.   align-items: center;
    33. }
    34.  
    35. .list-title {
    36.   display: flex;
    37.   justify-content: space-between;
    38.   font-size: 11pt;
    39.   color: #333;
    40.   font-weight: bold;
    41.  
    42.  
    43. }
    44.  
    45. .list-detail {
    46.   display: flex;
    47.   flex-direction: column;
    48.   margin: 0px 0px 0px 15px;
    49. }
    50.  
    51. .video-img {
    52.   width: 80px;
    53.   height: 80px;
    54. }
    55.  
    56. .list {
    57.   display: flex;
    58.   flex-direction: row;
    59.   border-bottom: 1px solid #6b6e74;
    60.   padding: 10px;
    61. }
    62.  
    63. .mobi-text {
    64.   font-weight: 700;
    65.   padding: 15px;
    66. }
    67.  
    68. .mobi-icon {
    69.   border-left: 5px solid #e40909;
    70. }
    71.  
    72. .mobi-title {
    73.   background-color: rgba(158, 158, 142, 0.678);
    74.   margin: 10px 0px 10px 0px;
    75. }
    76.  
    77. .swiper-item {
    78.   height: 300rpx;
    79.   width: 100%;
    80.   border-radius: 10rpx;
    81. }
    82.  
    83. .userinfo {
    84.   display: flex;
    85.   flex-direction: column;
    86.   align-items: center;
    87.   color: #aaa;
    88. }
    89.  
    90. .userinfo-avatar {
    91.   overflow: hidden;
    92.   width: 128rpx;
    93.   height: 128rpx;
    94.   margin: 20rpx;
    95.   border-radius: 50%;
    96. }
    97.  
    98. .usermotto {
    99.   margin-top: 200px;
    100. }

     效果展示

    二.OA项目布局

    1.个人主页

    1.1 页面布局

    2. <view class="userInfo">
    3.   <image class="userInfo-head" src="/static/persons/1.png">image>
    4.   <view class="userInfo-login">ChatYUview>
    5.   <text class="userInfo-set">修改>text>
    6. view>
    7.  
    8. <view class="cells">
    9.   <view class="cell-items">
    10.     <image src="/static/tabBar/sdk.png" class="cell-items-icon">image>
    11.     <text class="cell-items-title">我发布的会议text>
    12.     <view class="cell-items-num">1view>
    13.     <text class="cell-items-detail">＞text>
    14.   view>
    15.   <hr />
    16.   <view class="cell-items">
    17.     <image src="/static/tabBar/sdk.png" class="cell-items-icon">image>
    18.     <text class="cell-items-title">我主持的会议text>
    19.     <view class="cell-items-num">1view>
    20.     <text class="cell-items-detail">＞text>
    21.   view>
    22. view>
    23. <view class="cells">
    24.   <view class="cell-items">
    25.     <image src="/static/tabBar/coding.png" class="cell-items-icon">image>
    26.     <text class="cell-items-title">投票的会议text>
    27.     <view class="cell-items-num">2view>
    28.     <text class="cell-items-detail">＞text>
    29.   view>
    30.   <hr />
    31.   <view class="cell-items">
    32.     <image src="/static/tabBar/coding.png" class="cell-items-icon">image>
    33.     <text class="cell-items-title">未投票的会议text>
    34.     <view class="cell-items-num">2view>
    35.     <text class="cell-items-detail">＞text>
    36.   view>
    37. view>
    38. <view class="cells">
    39.   <view class="cell-items">
    40.     <image src="/static/tabBar/template.png" class="cell-items-icon">image>
    41.     <text class="cell-items-title">我参与的会议text>
    42.     <view class="cell-items-num">5view>
    43.     <text class="cell-items-detail">＞text>
    44.   view>
    45.   <hr />
    46.   <view class="cell-items">
    47.     <image src="/static/tabBar/template.png" class="cell-items-icon">image>
    48.     <text class="cell-items-title">我审核的会议text>
    49.     <view class="cell-items-num">4view>
    50.     <text class="cell-items-detail">＞text>
    51.   view>
    52. view>
    53.  
    54. <view class="cells">
    55.   <view class="cell-items">
    56.     <image src="/static/tabBar/coding.png" class="cell-items-icon">image>
    57.     <text class="cell-items-title">消息text>
    58.   view>
    59.   <hr />
    60.   <view class="cell-items">
    61.     <image src="/static/tabBar/component.png" class="cell-items-icon">image>
    62.     <text class="cell-items-title">设置text>
    63.  
    64.   view>
    65. view>

    1.2 页面样式

    1. /* pages/ucenter/index/index.wxss */
    2. .userInfo{
    3.   padding: 5px 0px 20px 10px;
    4.   display: flex;
    5.   align-items: center;
    6. }
    7. .userInfo-head{
    8.   height: 80px;
    9.   width: 80px;
    10.   border: 5px solid rgb(194, 141, 26);
    11. }
    12. .userInfo-login{
    13.   width: 245px;
    14.   padding-left: 10px;
    15.   font-weight: 700;
    16. }
    17. .userInfo-set{
    18.   margin-right:20rpx ;
    19.   color: rgb(196, 170, 56);
    20. }
    21. .cells{
    22.   border-top: 8px solid rgb(238, 238, 238);
    23. }
    24. .cell-items{
    25.   
    26.   display: flex;
    27.   align-items: center;
    28.   border-top: 1px solid rgb(238, 238, 238);
    29.   padding-top: 20px;
    30.   padding-bottom: 20px;
    31. }
    32. .cell-items-icon{
    33.   height: 25px;
    34.   width: 25px;
    35.   padding: 0px 10px 0px 5px;
    36. }
    37. .cell-items-title{
    38.   width: 340px;
    39. }
    40. .cell-items-num{
    41.   width: 30px;
    42.   font-weight: 700;
    43.   color: rgb(218, 31, 31);
    44. }
    45. .cell-items-detail{
    46.   color: rgb(146, 151, 155);
    47. }

    1.3 效果展示

     

    2.投票

    2.1 页面布局

    2. <tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
    3. tabs>
    4. <view class="head">会议投票view>
    5. <view>
    6.   <swiper indicator-dots="true" autoplay="true">
    7.           <swiper-item>
    8.             <image src="/static/meeting/2.png">image>
    9.           swiper-item>
    10.           <swiper-item>
    11.             <image src="/static/meeting/会议.jpg">image>
    12.           swiper-item>
    13.       swiper>
    14. view>
    15. <view class="container">
    16.   
    17.   <view class="left-section">
    18.     <view class="weui-view1">会议投票view>
    19.     
    20.   view>
    21.  
    22.   
    23.   <view class="right-section">
    24.     
    25.     <view class="item">
    26.       <input class="weui-input1" auto-focus placeholder="会议标题"/>
    27.       
    28.     view>
    29.  
    30.     
    31.     <view class="item">
    32.       <input class="weui-input2" auto-focus placeholder="投票事件"/>
    33.       
    34.     view>
    35.  
    36.     
    37.     <view class="item">
    38.       <input class="weui-input3" auto-focus placeholder="会议内容"/>
    39.       
    40.     view>
    41.   view>
    42. view>
    43. <view class="container">
    44.   
    45.   <view class="left-section1">
    46.     <view class="weui-view2">会议投票view>
    47.     
    48.   view>
    49.  
    50.   
    51.   <view class="right-section">
    52.     
    53.     <view class="item">
    54.       <input class="weui-input1" auto-focus placeholder="投票选项1"/>
    55.       
    56.     view>
    57.  
    58.     
    59.     <view class="item">
    60.       <input class="weui-input2" auto-focus placeholder="投票选项2"/>
    61.       
    62.     view>
    63.  
    64.   view>
    65. view>
    66. <view class="to_metting">发起投票view>

    2.2 页面样式

    1. /* pages/vote/list/list.wxss */
    2. .head{
    3.   text-align: center;
    4.   width: 313px;
    5.   border:3px solid rgb(46, 133, 155);
    6.   background-color: aqua
    7.  
    8. }
    9. .container {
    10.   padding: 0;
    11.   display: flex;
    12.   flex-direction: row;
    13. }
    14.  
    15. .left-section {
    16.   border: 2px solid rgb(10, 216, 231);
    17.   width: 100px;
    18.   height: 155px;
    19.   text-align: center;
    20.   background-color: #13bb91; /* 左边部分的背景颜色 */
    21. }
    22. .left-section1 {
    23.   border: 2px solid rgb(22, 221, 128);
    24.   width: 100px;
    25.   height: 100px;
    26.   text-align: center;
    27.   background-color: #10d9f3; /* 左边部分的背景颜色 */
    28. }
    29.  
    30. .right-section {
    31.   flex: 1; /* 长占一份 */
    32.   padding: 20rpx; /* 右边部分的内边距 */
    33. }
    34.  
    35. .item {
    36.   
    37.   margin-bottom: 10rpx; /* 项目之间的下边距 */
    38. }
    39.  
    40. .weui-view1{
    41.   margin-top: 60px;
    42. }
    43.  
    44. .weui-view2{
    45.   margin-top: 35px;
    46. }
    47.  
    48. .weui-input1{
    49.   height: 45px;
    50.   border: 2px solid rgb(38, 196, 207);
    51. }
    52. .weui-input2{
    53.   height: 45px;
    54.   border: 2px solid rgb(218, 170, 14);
    55. }
    56. .weui-input3{
    57.   height: 45px;
    58.   border: 2px solid rgb(21, 167, 40);
    59. }
    60. .to_metting{
    61.   border: 2px solid rgb(10, 216, 231);
    62.   display: flex;
    63.   justify-content: center; /* 水平居中 */
    64.   background-color: rgb(21, 167, 40);
    65. }

    2.3 效果演示

    今天的分享到这里就结束了，感谢各位大大的观看，各位大大的三连是博主更新的动力，感谢谢谢谢谢谢谢谢谢各位的支持！！！！！ 

  • 相关阅读:
    【C++】了解模板--泛型编程基础
    Netty高级应用及聊天室实战
    一天吃透Java并发面试八股文
    ubuntu 20.04 qemu u-boot-2022.10 开发环境搭建
    Linux源码——目录作用
    为了大厂得码住学起来~Java架构师进阶之路：Java核心框架指导
    Transformer之Layer Normalization
    板块概念相关(五)
    【精品】Spring2.7 采用easysdk方式 整合 aplipay
    【代码源每日一题Div1】好序列/BZOJ4059「启发式分治」
  • 原文地址：https://blog.csdn.net/weixin_73320743/article/details/133902731