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

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

2023-11-09 57
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序会议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秋
目录
相关文章
小暖的遇见
|
16天前
|
运维 小程序 前端开发
结合圈层营销策略，打造稳定可靠的圈子app系统，圈子小程序！
圈子系统是一种社交平台，用户可按兴趣、职业等创建或加入“圈子”，进行内容发布、讨论和资源共享。开发时需考虑需求分析、技术选型（如PHP、MySQL）、页面设计、功能实现（注册、登录、发布、评论等）、测试优化及运维管理。圈层营销则通过精准化、高端化的方式传递品牌信息，增强客户归属感。圈子小程序基于微信等平台，具备跨平台、便捷性和社交性，开发过程中需明确需求、选择技术框架、设计页面并确保稳定性和流畅性。
小暖的遇见
100 9
小暖的遇见
|
3天前
|
小程序 数据挖掘
圈子系统兴趣讨论群组的创建，社群运营的重要性及策略制定，同城交友app、小程序方式的创新
### 圈子系统与社群运营简介 圈子系统是社交平台中的功能模块，允许用户创建和管理兴趣小组，设置名称、规则等，吸引志同道合者加入。通过浏览不同圈子，用户可以选择感兴趣的群体参与。社群运营则通过对具有共同需求或兴趣的用户进行组织和管理，提升品牌影响力和商业价值。有效的社群运营策略包括明确定位、制定策略、持续输出有价值内容、定期举办活动、合理分配角色及数据监测优化，从而增强用户粘性和活跃度。 **圈子系统源码获取：** [链接](https://gitee.com/multi-customer-software/qz)
小暖的遇见
26 9
小暖的遇见
|
6天前
|
移动开发 小程序 前端开发
超详细攻略！uniapp陪玩系统，打包陪玩小程序、H5需要注意什么？
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具，配置项目信息并选择云打包；小程序打包需在微信公众平台注册账号并提交审核；H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试，确保应用稳定性和兼容性。
小暖的遇见
21 2
DK方方
|
17天前
|
移动开发 小程序 前端开发
几千怎么部署搭建校园服务平台,校园圈子论坛系统小程序搭建,校园系统源码，多种功能一体的综合性校园平台
校园圈子论坛是一款集交友、二手市场、聊天等多功能于一体的校园社交平台，支持App、小程序和H5三端交付。学生可处理闲置物品、结识新朋友，通过算法匹配兴趣相投的用户。平台提供分享邀请机制，支持自动绑定推荐关系，并设有奖励机制。开发过程中需注重数据安全与系统稳定性，确保功能兼容及性能优化。
DK方方
60 5
DK九月
|
17天前
|
移动开发 小程序 前端开发
使用php开发圈子系统特点，如何获取圈子系统源码，社交圈子运营以及圈子系统的功能特点，圈子系统，允许二开，免费源码，APP 小程序 H5
开发一个圈子系统（也称为社交网络或社群系统）可以是一个复杂但非常有趣的项目。以下是一些关键特点和步骤，帮助你理解如何开发、获取源码以及运营一个圈子系统。
DK九月
92 3
yxybox
|
1月前
|
缓存 移动开发 小程序
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
yxybox
76 8
小暖的遇见
|
17天前
|
小程序 安全 网络安全
清晰易懂！陪玩系统源码搭建的核心功能，陪玩小程序、陪玩app的搭建步骤！
陪玩系统源码包含多种约单方式、实时语音互动、直播间与聊天室、大神申请与抢单、动态互动与社交及在线支付与评价等核心功能。搭建步骤包括环境准备、源码上传与解压、数据库配置、域名与SSL证书绑定、伪静态配置及后台管理。注意事项涵盖源码安全性、二次开发、合规性和技术支持。确保平台安全、合规并提供良好用户体验是关键。
小暖的遇见
57 0
DK方方
|
17天前
|
小程序 前端开发 数据挖掘
圈子论坛社区交友系统开源版小程序源码，自定义小程序管理社区圈子软件开发，打造受欢迎社交圈
通过获取开源版小程序源码、进行自定义小程序管理社区圈子软件开发以及注重用户体验和功能模块的设计，可以打造一个受欢迎的社交圈。同时，需要不断优化和完善系统，以满足用户不断变化的需求和期望。
DK方方
59 0
疯狂的猿
|
2月前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
疯狂的猿
76 3
上海龙兵兵数字科技有限公司成都分公司
|
2月前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统，都有哪些功能？
在快节奏的现代生活中，家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题，如服务质量不稳定、价格不透明等，我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式，解决了私单、复购、推广和盈利四大痛点，全面提升了服务质量和用户体验，旨在成为家政行业的领导者。
上海龙兵兵数字科技有限公司成都分公司
71 1

热门文章

最新文章

  • 1
    一款功能全面且免费的OA办公系统，下载即用
  • 2
    免费企业级OA办公系统，助力高效办公
  • 3
    钉钉OA审批bpms_instance_change无法获取finish消息
  • 4
    【一步步开发AI运动小程序】十五、AI运动识别中，如何判断人体站位的远近？
  • 5
    【一步步开发AI运动小程序】十六、AI运动识别中，如何判断人体站位？
  • 6
    uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
  • 7
    【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态？
  • 8
    【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
  • 9
    为什么不加盟线下陪玩APP小程序平台，而是自建平台？
  • 1
    微信小程序用户登陆和获取用户信息功能实现
    147
  • 2
    uniapp-微信小程序-上拉和下拉触底刷新
    164
  • 3
    微信小程序和springboot实现微信支付
    275
  • 4
    微信小程序-微信支付
    88
  • 5
    微信小程序调试、断点调试
    226
  • 6
    微信小程序-分包
    82
  • 7
    开发uniapp过程中对app、微信小程序与h5的webview调试
    1278
  • 8
    微信小程序echart图片不显示 问题解决
    79
  • 9
    【DevOps】（五）Jenkins构建给企业微信推送消息
    310
  • 10
    UniApp与微信小程序介绍及区别
    643

    • 相关课程

    更多
  • IoT小程序框架课程
  • 云上建站快速入门-博客、论坛、CMS、电子商务网站统统搞定
  • 软件用户使用服务及供应商进阶管理
  • 软件供应商进阶管理实操
  • 场景实践 - 云上建站博客、论坛、CMS、电子商务网站
  • 软件供应商发布服务实操

    • 相关电子书

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

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 1分钟SAE部署PHP商城小程序
  • 收银台的场景化界面实践
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • 星轨-钉钉APP分发实训
    • 下一篇
    开通oss服务