AI 助理
备案控制台
开发者社区 大数据 文章 正文

微信小程序自定义组件及会议管理与个人中心界面搭建

2023-11-10 80
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序自定义组件及会议管理与个人中心界面搭建

一、自定义tabs组件


1.1 创建自定义组件

新建一个components文件夹 --> tabs文件夹 --> tabs文件

e0c2848211024c06ad15a41d04a8d97f.png

创建好之后win7 以上的系统会报个错误：提示代码分析错误，已经被其他模块引用，只需要在

在project.config.json文件里添加两行配置

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

48e8dddd04814faaa9a314c7fe093142.png

1.2 tabs.wxml 编写组件界面

<!--components/tabs/tabs.wxml-->
<!-- 这是自定义组件的内部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>


1.3 tabs.wxss 设计样式

/* components/tabs/tabs.wxss */
.tabs {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff;
  z-index: 99;
  border-bottom: 3px solid #efefef;
  padding-bottom: 20rpx;
}
.tabs_title {
  /* width: 400rpx; */
  width: 95%;
  display: flex;
  font-size: 13pt;
  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 tabs.js 定义组件的属性及事件

// components/tabs/tabs.js
var App = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabList:Object
  },
  /**
   * 组件的初始数据
   */
  data: {
    tabIndex:0
  },
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e){
      // 获取索引
      const {index} = e.currentTarget.dataset;
      // 触发 父组件的事件
      this.triggerEvent("tabsItemChange",{index})
      this.setData({
          tabIndex:index
      })
    }
  }
})


二、自定义组件使用


2.1 引用组件

在需要使用自定义组件的json中进行配置引用路径

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


2.2 编写会议界面内容

在界面使用组件并添加事件:

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


<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>
<view style="height: 100rpx;"></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 al-center">
            <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 al-center">{{item.state}}</view>
                <view class="join al-center"><text class="list-num">{{item.num}}</text>人报名</view>
            </view>
            <view class="list-info"><text>{{item.address}}</text>|<text>{{item.time}}</text></view>
        </view>
    </view>
</block>

2.3 设计样式

  .list{
    display: flex;
    border-bottom: rgb(233, 231, 231) solid 3px;
  }
  .list-img{
    display: flex;
    align-items: center;
   margin-right: 15px;
  }
  .video-img{
    width: 120rpx;
    height: 120rpx;
  }
  .list-title{
    font-weight: bold;
  }
  .list-tag{
    display: flex;
  }
  .state{
    border: rgb(35, 171, 224) solid 1px;
    color: rgb(35, 171, 224);
    align-items: center;
    width: 65px;
    display: flex;
    justify-content: center;
  }
  .join{
    margin-left: 8px;
    color: lightgray;
  }
  .list-num{
    color: red;
    font-weight: 600;
  }
  .list-info{
    display: flex;
    color: lightgray;
    margin-top: 10px;
  }
  .mysection{
    display: flex;
    justify-content: center;
  }
  .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;
  }


2.4 模拟数据并实现切换tabs方法

// pages/meeting/list/list.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs:['会议中','已完成','已取消','全部会议'],
    lists: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/3.jpg',
        'title': 'H100太空商业大会',
        'num':'500',
        'state':'进行中',
        'time': '10月09日 17:31',
        'address': '大连市'
      },
      {
        'id': '1',
        'image': '/static/persons/4.jpg',
        'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
        'num':'150',
        'state':'已结束',
        'time': '10月09日 17:21',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/5.jpg',
        'title': '新质生活 · 品质时代 2016消费升级创新大会',
        'num':'217',
        'state':'进行中',
        'time': '10月09日 16:59',
        'address': '北京市·朝阳区'
      }
    ],
    lists1: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/3.jpg',
        'title': 'H100太空商业大会',
        'num':'500',
        'state':'进行中',
        'time': '10月09日 17:31',
        'address': '大连市'
      }
    ],
    lists2: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      }
    ],
    lists3: [
      {
        'id': '1',
        'image': '/static/persons/1.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/2.jpg',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/3.jpg',
        'title': 'H100太空商业大会',
        'num':'500',
        'state':'进行中',
        'time': '10月09日 17:31',
        'address': '大连市'
      },
      {
        'id': '1',
        'image': '/static/persons/4.jpg',
        'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
        'num':'150',
        'state':'已结束',
        'time': '10月09日 17:21',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/5.jpg',
        'title': '新质生活 · 品质时代 2016消费升级创新大会',
        'num':'217',
        'state':'进行中',
        'time': '10月09日 16:59',
        'address': '北京市·朝阳区'
      }
    ]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  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
      })
  }
})


2.5 效果展示

b16d0b629e404bdda7ebe3a8d383539a.gif


三、个人中心界面搭建


3.1 WXML

<!--pages/ucenter/index/index.wxml-->
<!-- <text>pages/ucenter/index/index.wxml</text> -->
<view class="userInfo">
    <image class="userInfo-head" src="/static/persons/1.jpg"></image>
    <text class="userInfo-login">用户登录</text>
    <image class="userInfo-set" src="/static/tabBar/component.png"></image>
</view>
<view class="cells">
    <view class="cell-items">
        <image src="/static/tabBar/coding-active.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我主持的会议</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
    <hr/>
    <view class="cell-items">
        <image src="/static/tabBar/component-active.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我参与的会议</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
</view>
<view class="cells">
    <view class="cell-items">
        <image src="/static/tabBar/component-active.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我发布的投票</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
    <hr/>
    <view class="cell-items">
        <image src="/static/tabBar/component-active.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我参与的投票</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
</view>
<view class="cells">
    <view class="cell-items">
        <image src="/static/tabBar/component-active.png" class="cell-items-icon"></image>
        <text space="ensp" class="cell-items-title">消        息</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
    <hr/>
    <view class="cell-items">
        <image src="/static/tabBar/component-active.png" class="cell-items-icon"></image>
        <text space="ensp" class="cell-items-title">设        置</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
</view>


3.2 WXSS

/* pages/ucenter/index/index.wxss */
Page{
  background-color: rgba(135, 206, 250, 0.075);
}
.userInfo{
  display: flex;
  height: 400rpx;
  width: 100%;
  background-color: #fff;
  margin-bottom: 20rpx;
}
.userInfo-head{
  height: 300rpx;
  width: 300rpx;
  margin: 20rpx;
}
.userInfo-login{
  width: 400rpx;
  margin:150rpx 20rpx;
}
.userInfo-set{
  height: 100rpx;
  width: 100rpx;
  margin:120rpx 20rpx;
}
.cells{
  background-color: #fff;
  height: 270rpx;
}
.cell-items{
  height: 120rpx;
  display: flex;
  margin: 30rpx 0 0 0;
  /* border-bottom: 1px solid lightskyblue; */
}
.cell-items-icon{
  height: 100rpx;
  width: 100rpx;
}
.cell-items-title{
  font-weight: 700;
  font-size: 18px;
  margin: 20rpx 0 0 50rpx;
}
.cell-items-num{
  margin: 20rpx 0 0 300rpx;
}
.cell-items-detail{
  margin: 20rpx 0 0 20rpx;
}
.cells > hr{
  display: block;
  height: 1px;
  background-color: rgba(135, 206, 250, 0.075);
}


ca0d772189364cedb7549b409cd00d2a.png

文章标签：
小程序
数据格式
JSON
关键词：
微信自定义
微信组件
微信小程序自定义
微信自定义组件
微信小程序组件
Java_文昊
目录
相关文章
chnjames
|
25天前
|
小程序 数据可视化 JavaScript
微信小程序：轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点，帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能，并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法，以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
chnjames
54 1
微信小程序：轻松实现时间轴组件
邹荣乐
|
24天前
|
小程序
微信小程序动态tabBar实现：基于自定义组件，灵活支持不同用户角色与超过5个tab自由组合（更新版）
微信小程序动态tabBar实现：基于自定义组件，灵活支持不同用户角色与超过5个tab自由组合（更新版）
邹荣乐
326 1
chnjames
|
25天前
|
小程序 搜索推荐 API
微信小程序：自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改，但产品经理的需求却需要个性化的定制。在这种情况下，我们需要寻找解决方案，以满足这些特殊需求，尽管这可能有点棘手。
chnjames
54 0
微信小程序：自定义关注公众号组件样式
邹荣乐
|
28天前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器：ECharts组件的使用与技巧
微信小程序图表制作利器：ECharts组件的使用与技巧
邹荣乐
48 1
邹荣乐
|
28天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
邹荣乐
153 1
Codelinghu
|
1月前
|
小程序 JavaScript
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
Codelinghu
46 1
邹荣乐
|
24天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略（微信小程序、H5、APP全覆盖）
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略（微信小程序、H5、APP全覆盖）
邹荣乐
163 3
千寻简
|
1月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中，版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新，提示用户并提供立即更新选项，自动下载更新内容，并在更新完成后重启小程序以应用新版本。适用于微信小程序，确保用户始终使用最新版本。以下是实现步骤： ### 实现步骤 1. **创建更新方法**：在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**：添加编译模式并选择成功状态进行模拟测试。
千寻简
42 0
微信小程序更新提醒uniapp
胡东旭
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件，兼容 H5、小程序和 APP，提供丰富的注释和简洁代码，适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
胡东旭
102 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
胡东旭
|
3月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序，旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建，具备丰富的注释与简洁的代码结构，非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
胡东旭
95 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序

热门文章

最新文章

  • 1
    微信小程序使用export和import
  • 2
    解决微信小程序MQTT真机连接问题与合法域名配置SSL问题
  • 3
    微信小程序scroll-view组件设置 scroll-top无效问题解决
  • 4
    【微信小程序】页面tabBar切换、下拉刷新
  • 5
    【微信小程序】使用uni-app——开发首页搜索框导航栏（可同时兼容APP、H5、小程序）
  • 6
    微信小程序 安装依赖 vant
  • 7
    Java微信小程序开发_00_资源帖
  • 8
    微信小程序：获取不限制的小程序码后端Java实现
  • 9
    微信小程序把玩（三十五）Video API
  • 10
    微信小程序使用vant组件样式不生效的问题
  • 1
    高德地图实现-微信小程序地图导航
    294
  • 2
    微信小程序封装请求
    66
  • 3
    性能工具之JMeter 微信小程序 WebSocket 脚本入门
    211
  • 4
    html在线预览CAD（手机小程序浏览DWG）二次开发图层表的方法
    128
  • 5
    微信小程序用户登陆和获取用户信息功能实现
    109
  • 6
    uniapp-微信小程序-上拉和下拉触底刷新
    144
  • 7
    外卖小程序实战-接单后小票机自动打印订单
    161
  • 8
    微信小程序和springboot实现微信支付
    205
  • 9
    外卖小程序实战
    51
  • 10
    微信小程序-微信支付
    66

    • 相关课程

    更多
  • IoT小程序框架课程
  • 软件供应商进阶管理实操
  • 阿里云RPA（机器人流程自动化）- 初级入门（可视化）
  • 软件用户使用服务及供应商进阶管理
  • 软件供应商发布服务实操
  • 数据管理 DMS产品介绍及Data Copilot演示教程智能助手 DMS Data Copilot简介

    • 相关电子书

    更多
  • 《云市场-小程序》
  • 数字乡村建设方案
  • mPaaS 小程序新品发布

    • 相关实验场景

    更多
  • 配置流程编排实现根据天气情况播放歌曲
  • 1分钟SAE部署Web在线游戏
  • 搭建微信小程序
  • 快速搭建移动端可视化看板
  • DataV Board用户界面概览
  • DataV模版快速创建可视化看板
    • 下一篇
    无影云桌面