AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

微信小程序会议OA系统其他页面

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

及上一文章：https://blog.csdn.net/djssubddbj/article/details/133895170?spm=1001.2014.3001.5501我们所写的会议OA的首页，在这个上面我们继续完成我们的会议OA系统，这是我们的本期所要完成的页面

自定义组件

微信小程序自定义组件是指开发者可以将一些功能和样式封装成独立的组件，然后在不同的页面中使用这些组件，从而提高开发效率和代码复用性。自定义组件可以包含模板、样式和行为逻辑，可以由开发者自主定义组件的属性和事件，使得组件更加灵活、可定制化。


自定义组件的使用方式类似于小程序原生组件，可以通过标签名引用，也可以通过自定义属性传递参数和设置组件状态。自定义组件还支持向外暴露属性、方法和事件，方便开发者在使用组件时进行交互和控制。


易于维护和扩展：自定义组件具备良好的封装性，内部的实现细节对外部是隐藏的，这样可以避免代码耦合和冲突。当需要修改或扩展某个功能时，只需要修改自定义组件的代码，而不会影响其他部分。


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


{

 "component": true

}


同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式，它们的写法与页面的写法类似。具体细节和注意事项参见 组件模板和样式 。


自定义组件开发需要使用小程序提供的Component构造器，通过编写wxml、wxss和js文件来定义组件的结构、样式和行为逻辑。在编写组件时，需要考虑组件的可复用性和可定制化，同时也需要注意组件的兼容性和性能问题。


我们的微信小程序需要创建自定义组件的原因有以下几个：


1.提高开发效率和代码复用性：自定义组件可以将一些常用的功能和样式封装成独立的组件，方便在不同的页面中进行调用，从而减少代码的重复编写，提高开发效率和代码复用性。


2.实现组件化开发：自定义组件可以将一个页面拆分成多个独立的组件，每个组件都有自己的结构、样式和行为逻辑，从而实现组件化开发，方便团队协作，提高代码的可维护性和可拓展性。


3.实现定制化需求：自定义组件可以根据不同的需求进行定制化开发，自由定义组件的属性、方法和事件，使得组件更加灵活、可定制化。


4.提高用户体验：自定义组件可以使得小程序的界面更加丰富和生动，提高用户的体验和满意度。


在新的版本里面我们会出现报错，但是在win7的一些旧版本里面是不会出现这些问题的，我们需要在project.config.json文件里面添加以下代码：


"ignoreDevUnusedFiles": false,

"ignoreUploadUnusedFiles": false,


综上，创建自定义组件是微信小程序开发中的常见需求和实践，对于提高开发效率和代码质量、提高用户体验等方面都具有重要的意义。

代码案例

会议代码：
list.wxml
<!--pages/meeting/list/list.wxml-->
<!-- <text>pages/meeting/list/list.wxml</text> -->
<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 */
page{
  height: 100%;
  background-color:#efeff4;
}
.swiper-item {
  height: 350rpx;
  width: 100%;
  border-radius: 10rpx;
}
.mobi-title{
font-size: 18px;
margin: 10rpx;
}
.mobi-icon{
    margin:0 0 200px 0 ;
  background-color: red;
  padding: 3rpx;
}
.mobi-title text{
  margin-left: 10rpx;
}
.list{
background-color: #fff;
display: flex;
margin:10rpx;
padding:10rpx;
}
.list-img,.video-img{
height: 150rpx;
width: 150rpx;
}
.list-img{
  margin:30rpx 0 0 0 ;
}
.list-detail{
margin:0 0 0 10rpx;
}
.list-title{
font-weight: 700;
}
.list-tag{
display: flex;
margin: 10px 0 ;
}
.state{
border: 3px  solid lightblue;
padding: 2px;
color: lightblue;
}
.join{
  border: 3px  solid #fff;
  padding: 2px;
  margin: 0 0 0 20rpx;
  color:gray;
}
.list-num{
color: red;
}
.list-info{
  color:gray;
}
.bottom-line{
  text-align: center;
margin-bottom: 10px;
}

list.json 

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

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) {
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {
    },
    tabsItemChange(e){
        // debugger
        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
        })
    }
})

4f2e8925a5344583bcb485e05c6e8027.png

设置代码

index.wxml
<!--pages/ucenter/index/index.wxml-->
<!-- <text>pages/ucenter/index/index.wxml</text> -->
<!--pages/ucenter/index/index.wxml-->
<!-- <text>pages/ucenter/index/index.wxml</text> -->
<view class="userInfo">
    <image  class="user-head" src="/static/images/avatar.png"></image>
    <text class="user-name">立即登录</text>
    <text class="user-edit">修改</text>
</view>
<view class="list">
    <view class="list-item">
        <image class="item-icon" src="/static/tabBar/sdk.png"></image>
        <text class="item-title">我主持的会议</text>
        <text space="nbsp" class="item-num">1  </text>
        <text class="item-detail">＞</text>
    </view>
    <view class="hr"></view>
    <view class="list-item">
        <image class="item-icon" src="/static/tabBar/sdk.png"></image>
        <text class="item-title">我参与的会议</text>
        <text class="item-num">10</text>
        <text class="item-detail">＞</text>
    </view>
</view>
<view class="list">
    <view class="list-item">
        <image class="item-icon" src="/static/tabBar/sdk.png"></image>
        <text class="item-title">我发布的投票</text>
        <text space="nbsp" class="item-num">1  </text>
        <text class="item-detail">＞</text>
    </view>
    <view class="hr"></view>
    <view class="list-item">
        <image class="item-icon" src="/static/tabBar/sdk.png"></image>
        <text class="item-title">我参与的投票</text>
        <text class="item-num">10</text>
        <text class="item-detail">＞</text>
    </view>
</view>
<view class="list">
    <view class="list-item">
        <image class="item-icon" src="/static/tabBar/sdk.png"></image>
        <text class="item-title">消息</text>
        <text class="item-num"></text>
        <text  space="nbsp" class="item-detail">   ＞</text>
    </view>
    <view class="hr"></view>
    <view class="list-item">
        <image class="item-icon" src="/static/tabBar/sdk.png"></image>
        <text class="item-title">设置</text>
        <text space="emsp" class="item-num"></text>
        <text  space="nbsp"  class="item-detail">   ＞</text>
    </view>
</view>

index.wxss 

/* pages/ucenter/index/index.wxss */
/* pages/ucenter/index/index.wxss */
Page{
  background-color: #fff;
}
.userInfo{
  display: flex;
  background-color: antiquewhite;
  border: 1px solid red;
  padding: 20rpx;
}
.user-head{
  width: 150rpx;
  height: 150rpx;
}
.user-name,.user-edit{
  display: flex;
  align-items: center;
  margin: 0 0 0 20rpx;
}
.user-name{
  /* display: inline-block; */
  width: 450rpx;
  font-weight: 700;
}
.user-edit{
  color: gray;
}
.list{
  height: 280rpx;
  width: 750rpx;
  display: flex;
  flex-direction: column;
}
.list-item{
  height: 130rpx;
}
.item-icon{
  height: 60rpx;
  width: 60rpx;
  margin-top: 20px; 
  /* border: 1px solid red; */
}
.item-title,.item-num,.item-detail{
  /* border: 1px solid red; */
  position: relative;
  top:-10px;
  display: inline-block;
}
.item-title{
  font-size: 18px;
  width: 520rpx;
  height: 25px;    
  margin-left: 10px;
}
.item-num{
  margin-right: 10px;
}
.item-detail{
  color: gray;
}
.list .hr{
  background-color: lightgray;
  height: 1px;
  width: 400px;
  display: inline-block;
}

75d17f863c4547e58608e105043ff73f.png

文章标签：
小程序
开发者
JavaScript
UED
JSON
关键词：
微信小程序系统
微信系统
OA系统
微信页面
微信小程序页面
Alone秋
目录
相关文章
Q一个好的名字容易让人记住你2483558220
|
8月前
|
小程序 Java 关系型数据库
基于微信小程序的智慧养老服务系统
本系统基于Java、MySQL和Spring Boot技术，构建高效、安全的养老院管理系统，提升信息处理速度与管理规范性，实现数据自动化备份与网络化管理，助力养老机构信息化升级。
Q一个好的名字容易让人记住你2483558220
510 9
游客noyzgfbbyqiwe
|
10月前
|
存储 缓存 数据库
如何开发人事及OA管理系统的全局基础设置板块？（附架构图+流程图+代码参考）
在企业数字化转型中，人事管理系统（HRM）与办公自动化系统（OA）已成为核心工具。本文详解全局基础设置的三大核心模块：部门岗位基础表、工作日历和工作地点基础表，涵盖功能设计、业务流程、开发技巧与代码示例，助力企业优化系统架构，提升管理效率与扩展性。
游客noyzgfbbyqiwe
463 1
游客eowof6ca4zztg
|
10月前
|
存储 Java 数据库
如何开发人事及OA管理系统的会议管理板块？（附架构图+流程图+代码参考）
人事及OA系统是现代企业管理的重要工具，整合人力资源与办公流程，提升效率。其会议管理板块可优化会议室预约、冲突检测、审批流程及数据统计，助力企业高效协作。本文详解功能设计、开发技巧与实现方案。
游客eowof6ca4zztg
478 1
Q一个好的名字容易让人记住你2483558220
|
8月前
|
JavaScript 小程序 Java
基于微信小程序的线上博物馆系统
线上博物馆系统利用互联网与数字技术，实现文化遗产的数字化保护与传播，打破时空限制，推动文化传承与教育创新。结合Java、Vue及Uniapp等技术，构建跨平台、高互动的在线展览平台，提升公众文化体验。
Q一个好的名字容易让人记住你2483558220
326 3
游客eowof6ca4zztg
|
10月前
|
存储 消息中间件 数据库
如何开发人事及OA管理系统的其他SSC板块？（附架构图+流程图+代码参考）
本文介绍了人事及OA管理系统中“其他SSC板块”的开发与实现，涵盖公告发文、公司资质文件管理、名片印制申请、用印申请、开具证明申请等功能模块。内容包括各模块的功能需求、业务流程、开发技巧及代码参考，帮助企业提升行政管理效率，优化信息流通，增强信息安全。适合企业管理人员及系统开发人员阅读参考。
游客eowof6ca4zztg
349 4
游客eowof6ca4zztg
|
10月前
|
JSON 前端开发 NoSQL
如何开发OA管理系统的日报、周报管理板块？（附架构图+流程图+代码参考）
本文详解如何将日报/周报模块深度集成至人事OA系统，涵盖需求分析、系统架构、数据模型、业务流程、开发技巧及运维部署等全流程方案。重点阐述结构化数据采集、自动化提醒、审批闭环设计等核心功能，并提供关键代码示例，助力企业高效落地日报/周报系统，提升组织协同效率。
游客eowof6ca4zztg
1055 1
游客eowof6ca4zztg
|
10月前
|
消息中间件 SQL 前端开发
如何开发人事及OA管理系统的考勤管理板块？（附架构图+流程图+代码参考）
考勤系统是企业HR管理的核心模块，涉及打卡、请假、加班、补卡等多项功能，支持多场景打卡方式，并与薪酬、绩效紧密关联。系统需具备数据自动统计、异常提醒、审批流程集成等功能，有效减少人工错误，提升管理效率。
游客eowof6ca4zztg
1194 2
游客eowof6ca4zztg
|
10月前
|
JavaScript 安全 前端开发
如何开发人事及OA管理系统的薪酬管理板块？（附架构图+流程图+代码参考）
本文介绍了如何构建一个高效、合规的企业薪酬管理系统，涵盖薪酬模块的重要性、核心功能、系统架构设计、数据模型、开发实现及安全合规要点。内容包括薪酬配置、数据导入、自动化计算、审批发放、工资条生成与安全分发、报表看板、权限审计等关键环节，并提供详细的业务流程、架构图、核心代码示例及落地开发技巧。适用于HR、财务及技术人员快速搭建薪酬管理系统，提升发薪效率，降低人工错误与合规风险。
游客eowof6ca4zztg
1129 0

热门文章

最新文章

  • 1
    vue仿微信界面聊天室项目|vue聊天案例
  • 2
    ESP8266固件SDK开发之微信配网(AIRKISS)原理(一)
  • 3
    小程序微信支付API？以及参数有哪些
  • 4
    Appium微信小程序自动化环境准备
  • 5
    微信扫码跳转小程序并传参
  • 6
    微信小游戏制作工具关于游戏屏幕适配，看这篇就够了！
  • 7
    Senparc.Weixin.MP SDK 微信公众平台开发教程（四）：Hello World
  • 8
    java实现微信公众号token验证
  • 9
    【Zabbix】Zabbix微信告警配置演示
  • 10
    独立集成QQ和微信分享的回调冲突问题
  • 1
    基于微信小程序的企业职工薪资查询系统+ssm+vue.js附带文章和源代码设计说明文档ppt
    350
  • 2
    基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
    496
  • 3
    基于微信小程序的民宿短租系统+ssm+vue.js附带文章和源代码设计说明文档ppt
    431
  • 4
    基于微信小程序的家政服务预约系统的+php+vue.js附带文章和源代码设计说明文档ppt
    347
  • 5
    基于微信小程序的大学生科技竞赛管理系统的+springboot+vue.js附带文章和源代码设计说明文档ppt
    332
  • 6
    基于微信小程序的宠物寄养平台的+ssm+vue.js附带文章和源代码设计说明文档ppt
    324
  • 7
    基于SSM框架的童装购买平台微信小程序+vue.js附带文章和源代码设计说明文档ppt
    213
  • 8
    基于微信小程序校园订餐的设计与开发+ssm+vue.js附带文章和源代码设计说明文档ppt
    286
  • 9
    游戏账号交易微信小程序+ssm+vue.js附带文章和源代码设计说明文档ppt
    334
  • 10
    基于微信小程序的场地预约+ssm+vue.js附带文章和源代码设计说明文档ppt
    260

    • 相关课程

    更多
  • IoT小程序框架课程

    • 相关电子书

    更多
  • 钉钉小程序——为工作方式插上翅膀
  • 5.18阿里小程序云生态及实践分享 - 阿里小程序的一云多端
  • 《云市场-心选OA解决方案》
    • 下一篇
    阿里云新品发布AI DeepSign，为AI生成作品赋予可信身份证