备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

会议OA小程序【会议管理，个人中心页面布局】

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

一. 自定义组件介绍

1.1 概念

从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

1.2 创建自定义组件

类似于页面，一个自定义组件由 json，wxml ，wxss ，js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：

{
  "component": true
}

同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。

代码示例：

<!--components/tabs/tabs.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>
/* components/tabs/tabs.wxss */
.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;
}

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。

在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。

组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的。

代码示例：

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

更多详细内容参见微信小程序自定义组件

二. 会议管理页面布局

在project.config.json中添加以下代码防止项目出现报错 

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

使用自定义组件

list.json

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

页面布局及样式

list.wxml

<!--pages/meeting/list/list.wxml-->
<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>

list.wxss

/* pages/meeting/list/list.wxss */
.mobi-title {
  font-size: 12pt;
  color: #777;
  line-height: 110%;
  font-weight: bold;
  width: 100%;
  padding: 15rpx;
  background-color: #f3f3f3;
}
.mobi-icon {
  padding: 0rpx 3rpx;
  border-radius: 3rpx;
  background-color: #ff7777;
  position: relative;
  margin-right: 10rpx;
}
/*list*/
.list {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0 20rpx 0 0;
  border-top: 1px solid #eeeeee;
  background-color: #fff;
  margin-bottom: 5rpx;
  /* border-radius: 20rpx;
  box-shadow: 0px 0px 10px 6px rgba(0,0,0,0.1); */
}
.list-img {
  display: flex;
  margin: 10rpx 10rpx;
  width: 150rpx;
  height: 220rpx;
  justify-content: center;
  align-items: center;
}
.list-img .video-img {
  width: 120rpx;
  height: 120rpx;
}
.list-detail {
  margin: 10rpx 10rpx;
  display: flex;
  flex-direction: column;
  width: 600rpx;
  height: 220rpx;
}
.list-title text {
  font-size: 11pt;
  color: #333;
  font-weight: bold;
}
.list-detail .list-tag {
  display: flex;
  height: 70rpx;
}
.list-tag .state {
  font-size: 9pt;
  color: #81aaf7;
  width: 120rpx;
  border: 1px solid #93b9ff;
  border-radius: 2px;
  margin: 10rpx 0rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list-tag .join {
  font-size: 11pt;
  color: #bbb;
  margin-left: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list-tag .list-num {
  font-size: 11pt;
  color: #ff6666;
}
.list-info {
  font-size: 9pt;
  color: #bbb;
  margin-top: 20rpx;
}
.bottom-line{
  display: flex;
  height: 60rpx;
  justify-content: center;
  align-items: center;
  background-color: #f3f3f3;
}
.bottom-line text{
  font-size: 9pt;
  color: #666;
}

list.js

// 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
      })
  }
})

效果展示

三. 个人中心页面布局

index.wxml

<!--pages/ucenter/index/index.wxml-->
<!-- <text>pages/ucenter/index/index.wxml</text> -->
<view class="userInfo">
    <image class="userInfo-head" src="/static/images/avatar.png"></image>
    <text class="userInfo-login">用户登录</text>
    <text class="userInfo-set">修改</text>
</view>
<view class="cells">
    <view class="cell-items1">
        <image src="/static/tabBar/sdk.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-items2">
        <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
        <text class="cell-items-title2">我参与的会议</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
</view>
<view class="cells">
    <view class="cell-items1">
        <image src="/static/tabBar/sdk.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-items2">
        <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
        <text class="cell-items-title2">我参与的投票</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
</view>
<view class="cells">
    <view class="cell-items1">
        <image src="/static/tabBar/sdk.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-items2">
        <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
        <text space="ensp" class="cell-items-title2">设        置</text>
        <text class="cell-items-num">1</text>
        <text class="cell-items-detail">＞</text>
    </view>
</view>

index.wxss

/* pages/ucenter/index/index.wxss */
Page{
  background-color: rgba(135, 206, 250, 0.075);
}
.userInfo{
  display: flex;
  height: 300rpx;
  width: 100%;
  background-color: #fff;
  border-bottom: 15px solid lightgray;
}
.userInfo-head{
  height: 250rpx;
  width: 250rpx;
  margin: 20rpx;
}
.userInfo-login{
  width: 400rpx;
  margin:150rpx 20rpx;
}
.userInfo-set{
  /* height: 100rpx; */
  width: 100rpx;
  margin:150rpx 20rpx;
}
.cells{
  background-color: #fff;
  height: 270rpx;
}
.cell-items1,.cell-items2{
  height: 120rpx;
  display: flex;
  /* margin: 30rpx 0 0 0; */
  /* border-bottom: 1px solid lightskyblue; */
}
.cell-items2{
  /* height: 120rpx;
  display: flex;
  margin: 20rpx 0 0 0; */
  border-bottom: 15px solid lightgray;
}
.cell-items-icon{
  height: 80rpx;
  width: 80rpx;
  margin: 15rpx;
}
.cell-items-title{
  display: flex;
  font-weight: 700;
  font-size: 15px;
  /* margin: 20rpx 0 0 50rpx; */
  margin-top: 10rpx;
  padding: 15rpx;
}
.cell-items-title2{
  display: flex;
  font-weight: 700;
  font-size: 15px;
  margin-top: 10rpx;
  /* align-items: center; */
  padding: 15rpx;
  /* border-top: 20rpx; */
}
.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);
}

效果展示

文章标签：
小程序
JavaScript
数据格式
JSON
开发者
关键词：
OA管理
OA会议
会议OA
OA小程序
会议小程序
不念那年晚春
目录
相关文章
低代码布道师
|
2月前
|
存储 小程序 JavaScript
电商小程序09活动管理
电商小程序09活动管理
低代码布道师
37 0
编程千纸鹤
|
4月前
|
人工智能 小程序 前端开发
小程序模版｜报名管理服务源码
小程序模版｜报名管理服务源码
编程千纸鹤
34 0
clicksun
|
3月前
点晴免费OA系统助理企业高效管理
随着信息时代的发展，企业管理正迎来一场数字化变革的风暴。点晴OA系统作为真正免费OA办公系统，成为企业构建免费OA办公系统的青睐。
clicksun
20 2
源码星辰
|
3月前
|
小程序 Java 数据挖掘
Java校园智慧管理云平台源码 小程序+android电子班牌系统
智慧校园技术架构 ❀后端：Java ❀框架：springboot ❀前端页面：vue +element-ui ❀小程序：小程序原生开发 ❀电子班牌：Java Android
源码星辰
36 0
源码星辰
|
4月前
|
小程序 Java 大数据
智慧校园管理平台源码（含教师端、家长端、学生端小程序）
智慧校园以互联网为基础，“大数据+云服务+云计算”为核心，融合校园教学、管理、生活软硬件平台，定义智慧校园新生活。智慧校园管理平台管理者、教师、学生、家长提供一站式智慧校园解决方案，实现校园管理智能、.校园生活一体化、校园设施数字化、课堂教学生动化、家校沟通无缝化。集成智能硬件及第三方服务，面向学校、教师、家长、学生，将校内外管理、教学等信息资源进行整合，利用微信端的交互系统实现家校互联。
源码星辰
112 1
源码星辰
|
4月前
|
存储 人工智能 小程序
Java智慧校园小程序+电子班牌+人脸识别管理系统源码
移动教师端、家长端，可完成校级信息向家长端推送，家长阅读通知、通知等实时显示，解决学校与家长之间的信息沟通问题，实现家校互通。
源码星辰
29 1
clicksun
|
4月前
免费OA办公系统实现企业智能办公管理
随着互联网技术的快速发展，企业纷纷加入信息平台建设的大军。免费OA系统的实施不仅能加强高效的流程管理体系和层次沟通合作，还能有效提高完善的组织管理体系和执行力。
clicksun
45 1
现在是571
|
5月前
|
SQL 存储 JavaScript
Layui之OA会议增删改查
Layui之OA会议增删改查
现在是571
39 0
朱琳均
|
5月前
|
开发框架 JavaScript 前端开发
J2EE项目部署与发布（Windows版本）-＞会议OA单体项目Windows部署,spa前后端分离项目Windows部署
J2EE项目部署与发布（Windows版本）-＞会议OA单体项目Windows部署,spa前后端分离项目Windows部署
朱琳均
32 0
朱琳均
|
5月前
会议OA项目-其它页面-＞自定义组件应用,其它界面的布局
会议OA项目-其它页面-＞自定义组件应用,其它界面的布局
朱琳均
25 0

热门文章

最新文章

  • 1
    微信小程序全栈开发之性能优化策略
  • 2
    小程序全栈开发中的跨域问题及其解决方案
  • 3
    基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
  • 4
    微信小程序全栈开发中的身份认证与授权机制
  • 5
    基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
  • 6
    小程序全栈开发中的多端适配与响应式布局
  • 7
    微信小程序全栈开发中的PWA技术应用
  • 8
    深入解析微信小程序全栈开发流程
  • 9
    基于SpringBoot+Vue+uniapp微信小程序的教师管理系统的详细设计和实现
  • 10
    探索微信小程序全栈开发的安全性问题
  • 1
    企业都是用谁家的OA办公系统？
    21
  • 2
    OA办公自动化系统设计与实现(论文+源码)_kaic
    88
  • 3
    四款OA办公系统快速提高企业效率
    31
  • 4
    免费OA办公系统，提升工作效率与协作的智能选择
    34
  • 5
    点晴免费OA系统助理企业高效管理
    20
  • 6
    点晴OA流程让企业管理更加流畅
    15
  • 7
    点晴OA系统助力企业轻松管理工作
    23
  • 8
    点晴OA办公系统，提高工作效率，降低企业成本的好选择
    34
  • 9
    点晴OA专注免费OA系统20年
    20
  • 10
    在钉钉开放平台中，创建或更新OA审批表单模板需要通过API接口进行操作
    52

    • 相关课程

    更多
  • IoT小程序框架课程
  • 云计算工程师解析与实战-网络专家篇（体验版）
  • 场景实践- 新手玩转云计算-创建炫酷的简历网页
  • 2020版大数据实战项目之DMP广告系统（第四阶段）
  • 云上建站快速入门-博客、论坛、CMS、电子商务网站统统搞定
  • 2020版大数据实战项目之DMP广告系统（第六阶段）

    • 相关电子书

    更多
  • 阿里小程序繁星计划-高德小程序
  • 5.18阿里小程序云生态及实践分享 - 阿里小程序的一云多端
  • 《云市场-心选OA解决方案》

    • 相关实验场景

    更多
  • 配置流程编排实现根据天气情况播放歌曲
  • 1分钟SAE部署PHP商城小程序
  • 收银台的场景化界面实践
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • 专属钉底座交付培训课程
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考