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

最新推荐文章于 2023-10-21 11:20:20 发布
最新推荐文章于 2023-10-21 11:20:20 发布
阅读量466 收藏 2
点赞数 5
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/djssubddbj/article/details/133937558
版权
前言：

及上一文章：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
        })
    }
})

 

 设置代码

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;
}

Alone秋
关注
业务“小程序化”或许是OA数字化升级突破口
m0_72622669的博客
12-01 498
据悉，疫情促进了远程办公软件普及，数字化办公系列产品的需求迎来井喷式的增长，全民数字化办公将成为常态。数据显示，数字化办公2021年的市场规模达到973.89亿元，预计于2022年突破千亿大关达到1135.23亿元，至2025年将达到1768.16亿元，整体增速保持平稳。如果说新冠疫情引起的需求给数字化办公厂商提供了契机，那么企业数字化转型的渴望，则是数字化办公赛道持续火热的根本原因。这一大趋势是毋庸置疑的。
微信小程序会议OA系统
djssubddbj的博客
10-17 1325
align-content: 用来定义多行排列间的对齐方式，可以设置的值包括：flex-start, flex-end, center, space-between, space-around, stretch。flex: 项目的综合属性，包括flex-grow, flex-shrink, flex-basis三个属性，用来控制项目在容器中的尺寸和自适应性。总之，Flex弹性布局是现代网页设计中非常流行的一种布局方式，具有强大的控制能力和灵活的布局特性，可以帮助开发者实现各种复杂的排版和布局需求。
企业OA系统小程序
03-26
企业OA系统小程序，微信小程序（wei xin xiao cheng xu），简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
安创安全OA——小程序
luoyingqhw的博客
07-31 1069
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。 安创安全OA小程序对于用户来说功能丰富，场景丰富；安全稳定、保密性强；成本更低、维护简便；方便快捷，即用即走； 在小程序上主要分为两类，一类是个人中心部分，包括个人考勤，个人排...
微信小程序：会议OA项目-首页
weixin_62735525的博客
01-09 1654
快速上手小程序之会议OA项目-首页
求职小程序开发制作对接OA系统功能需求
hanlin1888的博客
11-30 364
求职小程序开发制作对接OA系统功能需求 最近有位上海人力资源公司粉丝朋友找我们开发制作招聘求职小程序并将数据对接到公司的oax系统里面。目前该项目正在对接工作中。 求职小程序开发制作对接OA系统主要功能： 1.收集候选人信息 1）候选人进入小程序需绑定微信，登入后选择城市、品牌、商圈录入个人信息，录制完毕后跳出对话框提示“会有专业顾问和你联系+手机号码” 2）候选人信息对接OA系统：从OA系统简历中抓取字段显示在小程序的候选人简历填写页面上 3）所有候选人录入简历时的信息都尽量用下拉菜单实现
106-微信小程序-企业OA系统小程序.zip
最新发布
06-11
在"106-微信小程序-企业OA系统小程序.zip"这个压缩包中，我们可以推测包含了一个完整的微信小程序项目，用于构建企业级别的办公自动化（OA）系统。企业OA系统通常包括考勤管理、任务分配、文档共享、流程审批、会议...
微信小程序开发之会议OA项目首页搭建
10-17
在微信小程序开发中，"会议OA项目首页搭建"是一个关键环节，它涉及到用户与应用的初次交互，因此设计和实现必须注重用户体验。本项目旨在创建一个功能完备、易用的会议办公自动化（OA）系统首页，让用户能够方便地...
微信小程序OA会议系统数据交互
djssubddbj的博客
10-21 1116
微信小程序会议OA系统其他页面-CSDN博客在我们的是基础面板上面，可以看到出来我们的数据是死数据，今天我们就完善我们的是数据。
微信小程序会议OA首页开发与图片资源搭建
资源摘要信息:"微信小程序开发之会议OA项目首页搭建" 知识点一：微信小程序概述 微信小程序是一种不需要下载安装...掌握这些知识点，对于成功开发出一个用户体验良好、功能完善的微信小程序会议OA项目首页至关重要。
微信小程序-开发的企业OA系统源代码.zip
12-24
微信小程序-开发的企业OA系统源代码，能用微信开发工具打开，但涉及数据库知识，有些数据源不能轻易更改，需要有相应的开发知识，可以下来研究
OA系统微信小程序源码
08-24
OA系统微信小程序源码 包含签到签退，日常审批、用户绑定、信息发布等
微信小程序OA系统源代码
08-21
微信小程序OA系统源代码，有打卡考勤，pki功能，企业管理公告，门禁卡等.
企业OA系统小程序.rar
09-09
企业OA系统小程序.rar
企业应用_企业OA系统小程序.zip
09-07
企业应用_企业OA系统小程序
“小程序化”成OA数字化升级突破口
凡泰极客Blog
09-23 829
如果说新冠疫情引发了在线办公需求的激增，那么企业对数字化转型的渴望，则是数字化办公赛道持续火热的根本原因。2020年新冠疫情爆发，远程办公成为了大部分企业无奈又必然的选择，三年以来，随着疫情的持续蔓延和常态化管控，在线办公逐渐成为刚需，企业对于在线办公软件、协同办公OA系统的使用需求也日益增强，中国数字化办公市场规模增长迅猛。数据显示，数字化办公2021年的市场规模达到973.89亿元，预计于2022年突破千亿大关达到1135.23亿元，至2025年将达到1768.16亿元，整体增速保持平稳。
会议OA小程序【会议管理，个人中心页面布局】
lijie1025的博客
10-20 584
会议OA小程序【会议管理，个人中心页面布局】
（小程序）会议OA项目-首页
weixin_67465673的博客
01-01 578
1) Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。2) 任何一个容器都可以指定为Flex布局。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
小程序：会议OA项目首页
weixin_65808248的博客
12-27 255
布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性1) Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。2) 任何一个容器都可以指定为Flex布局。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Alone秋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值