• 微信小程序进阶——会议OA其他界面

    一、自定义tabs组件应用


    文档参考如下：

    自定义组件 | 微信开放文档
    微信开发者平台文档

    https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

    1.1 创建自定义组件

    首先新建一个components文件夹，然后在components文件夹下面新建一个tabs文件夹，再在tabs文件夹下新建名为tabs的Component，目录如下：

     

     1.1.2 工具检查报错解决

    如果你在创建自定义组件的时候出现以下问题,这是新版本微信开发者工具特带的检查效果（window7所使用的旧版本开发工具不会报此错误），

    可以将以下代码复制到project.config.json中的setting中即可

    1.     "ignoreDevUnusedFiles": false,
    2.     "ignoreUploadUnusedFiles": false,
    1.1.3 编写组件模板

    紧接着同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。即把以下代码加入tabs.wxml中，代码如下：

    1. <view class="inner">
    2.   {{innerText}}
    3. </view>
    4. <slot></slot>
    1.1.3 定义组件模板属性

    加入了之后我们需要到tabs.js文件中定义innerText属性值，在tabs.js中组件的属性列表代码块下properties加入以下代码，如下：

    1.  // 这里定义了innerText属性，属性值可以在组件使用时指定
    2.       innerText: {
    3.         type: String,
    4.         value: 'default value',
    5.       }
    1.1.4 加入组件样式

    最后在tabs.wxss中加入样式代码即可，wxss文件内代码如下：

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

    2.使用自定义组件


    使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径

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


     这样，在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

    <tabs></tabs>

    效果图：

     

    3.自定义组件传值

     自定义组件传值需要注意的一个点就是不能以驼峰命名如果遇见是大写的字母要变成小写并在中间加一个“-”，例如我们的自定义组件属性值“innerText”，就要变成“inner-text”。

    <tabs inner-text="ar.小白"></tabs>

    效果图：



     

     

    二、其他界面的布局

    2.1 会议管理主页布局

    2.1.1 编写组件模板

    在meeting文件夹下list.wxml中加入以下代码：

    1. <!--pages/meeting/list/list.wxml-->
    2. <!-- <text>pages/meeting/list/list.wxml</text> -->
    3. <tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
    4. </tabs>
    5. <view style="height: 40px;"></view>
    6. <block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id">
    7.     <view class="list" data-id="{{item.id}}">
    8.         <view class="list-img">
    9.             <image class="video-img" mode="scaleToFill" src="{{item.image}}"></image>
    10.         </view>
    11.         <view class="list-detail">
    12.             <view class="list-title"><text>{{item.title}}</text></view>
    13.             <view class="list-tag">
    14.                 <view class="state">{{item.state}}</view>
    15.                 <view class="join"><text class="list-num">{{item.num}}</text>人报名</view>
    16.             </view>
    17.             <view class="list-info"><text>{{item.location}}</text>|<text>{{item.starttime}}</text></view>
    18.         </view>
    19.     </view>
    20. </block>
    2.1.2 完成样式设计

    在meeting文件夹下list.wxss中加入以下代码，如下：

    1. /* pages/meeting/list/list.wxss */
    2. .list{
    3.   display: flex;
    4.   align-items: center;
    5.   border-bottom: 3px solid lightgray;
    6. }
    7. .list-img{
    8.   padding: 0 10px;
    9. }
    10. .video-img{
    11.   height: 80px;
    12.   width: 80px;
    13. }
    14. .list-title{
    15.   font-weight: 700;
    16.   margin: 3px 0;
    17. }
    18. .list-tag{
    19.   display: flex;
    20.   align-items: center;
    21. }
    22. .state{
    23.   border: 2px solid lightblue;
    24.   padding: 1px 1px;
    25.   color: lightblue;
    26.   margin: 0 15px 2px 0;
    27.   border-radius: 10px;
    28. }
    29. .join{
    30.   color: lightgray;
    31. }
    32. .list-num{
    33.   color: red;
    34.   font-weight: 700;
    35. }
    36. .list-info{
    37.   color: lightgray;
    38.   font-size: 12px;
    39. }
    40. .section bottom-line{
    41.   display: flex;
    42.   justify-content:center;
    43. }

     

    2.1.3 定义组件属性

    用于接收数据

    meeting文件夹下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/1.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/2.jpg',
    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/3.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/4.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/5.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/1.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/2.jpg',
    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/3.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/1.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/2.jpg',
    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/1.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/2.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/3.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/4.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/5.jpg',
    145.         'title': '新质生活 · 品质时代 2016消费升级创新大会',
    146.         'num':'217',
    147.         'state':'进行中',
    148.         'time': '10月09日 16:59',
    149.         'address': '北京市·朝阳区'
    150.       }
    151.     ]
    152.   },
    153.   tabsItemChange(){
    154.     debugger;
    155.     let tolists;
    156.     if(e.detail.index==1){
    157.         tolists = this.data.lists1;
    158.     }else if(e.detail.index==2){
    159.         tolists = this.data.lists2;
    160.     }else{
    161.         tolists = this.data.lists3;
    162.     }
    163.     this.setData({
    164.         lists: tolists
    165.     })
    166.   },
    167.  
    168.   /**
    169.    * 生命周期函数--监听页面加载
    170.    */
    171.   onLoad(options) {
    172.  
    173.   },
    174.  
    175.   /**
    176.    * 生命周期函数--监听页面初次渲染完成
    177.    */
    178.   onReady() {
    179.  
    180.   },
    181.  
    182.   /**
    183.    * 生命周期函数--监听页面显示
    184.    */
    185.   onShow() {
    186.  
    187.   },
    188.  
    189.   /**
    190.    * 生命周期函数--监听页面隐藏
    191.    */
    192.   onHide() {
    193.  
    194.   },
    195.  
    196.   /**
    197.    * 生命周期函数--监听页面卸载
    198.    */
    199.   onUnload() {
    200.  
    201.   },
    202.  
    203.   /**
    204.    * 页面相关事件处理函数--监听用户下拉动作
    205.    */
    206.   onPullDownRefresh() {
    207.  
    208.   },
    209.  
    210.   /**
    211.    * 页面上拉触底事件的处理函数
    212.    */
    213.   onReachBottom() {
    214.  
    215.   },
    216.  
    217.   /**
    218.    * 用户点击右上角分享
    219.    */
    220.   onShareAppMessage() {
    221.  
    222.   }
    223. })
    2.1.4 引用声明

    list.json中代码如下：

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

    效果图：

     

    2.2 个人中心布局

    2.2.1 页面源码

    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. <view class="user">
    6.   <image class="user-img" src="/static/persons/CSDN.jpg"></image>
    7.   <text class="user-name">Ar.小白</text>
    8.   <text class="user-oper">修改</text>
    9. </view>
    10. <view class="info">
    11.   <view class="item1">
    12.     <image class="item-icon" src="/static/tabBar/sdk.png"></image>
    13.     <view class="item-title">我主持的会议</view>
    14.     <view class="item-num">1</view>
    15.     <view class="item-oper">＞</view>
    16.   </view>
    17.   <view class="item2">
    18.     <image class="item-icon" src="/static/tabBar/sdk.png"></image>
    19.     <view class="item-title">我参与的会议</view>
    20.     <view class="item-num">10</view>
    21.     <view class="item-oper">＞</view>
    22.   </view>
    23. </view>
    24. <view class="info">
    25.   <view class="item1">
    26.     <image class="item-icon" src="/static/tabBar/sdk.png"></image>
    27.     <view class="item-title">我发布的投票</view>
    28.     <view class="item-num">1</view>
    29.     <view class="item-oper">＞</view>
    30.   </view>
    31.   <view class="item2">
    32.     <image class="item-icon" src="/static/tabBar/sdk.png"></image>
    33.     <view class="item-title">我参与的投票</view>
    34.     <view class="item-num">10</view>
    35.     <view class="item-oper">＞</view>
    36.   </view>
    37. </view>
    38. <view class="info">
    39.   <view class="item1">
    40.     <image class="item-icon" src="/static/tabBar/template.png"></image>
    41.     <view class="item-title">消息</view>
    42.   </view>
    43.   <view class="item2">
    44.     <image class="item-icon" src="/static/tabBar/component.png"></image>
    45.     <view class="item-title">设置</view>
    46.   </view>
    47. </view>

    index.wxss：

    1. /* pages/ucenter/index/index.wxss */
    2. .user{
    3.   display: flex;
    4.   align-items: center;
    5.   border-bottom: 6px solid rgb(238, 235, 235);
    6. }
    7. .user-img{
    8.   width: 65px;
    9.   height: 65px;
    10.   margin: 10px;
    11. }
    12. .user-name{
    13.   font-weight: 700;
    14.   margin: 0 250rpx 0 50rpx;
    15. }
    16. .user-oper{
    17.   color: lightgray;
    18. }
    19. .info{
    20.  
    21. }
    22. .item1,.item2{
    23.   padding: 5px;
    24.   display: flex;
    25.   align-items: center;
    26. }
    27. .item1{
    28.   border-bottom: 2px solid rgb(238, 235, 235);
    29. }
    30. .item2{
    31.   border-bottom: 6px solid rgb(238, 235, 235);
    32. }
    33. .item-icon{
    34.   width: 40px;
    35.   height: 40px;
    36. }
    37. .item-title{
    38.   width:500rpx;
    39. }
    40. .item-num{
    41.   width:60rpx;
    42. }
    43. .item-oper{
    44.   color: rgb(221, 216, 216);
    45. }

    效果图：

  • 相关阅读:
    国内 11 家通过备案的 AI 大模型产品
    事件总线--EvenBus
    [架构之路-59]：目标系统 - 平台软件 - 基础中间件 - POSIX（可移植操作系统接口）与标准库函数libc
    react中获取dom元素的高度(table铺满屏幕剩余高度)
    前端学习笔记——第三天
    IoC 思想和实现
    jupyter notebook 调整深色背景与单元格宽度与自动换行
    Spring Boot 日志文件 ——打印日志和日志持久化详解
    Unity2021+VS2022调试
    数据资产入表，给企业带来的机遇和挑战
  • 原文地址：https://blog.csdn.net/liaozhixiangjava/article/details/133935923