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

微信小程序开发的OA会议之会议，个人中心的页面搭建及模板以及自定义组件

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

自定义组件

是什么

自定义组件允许开发者将页面中的一部分代码封装成一个可重用的组件，方便在不同的页面中复用。自定义组件可以使用自己的WXML模板、WXSS样式和JS逻辑，实现更加清晰的代码分离和组件化开发。

创建

在项目中创建一个名为 : components 的文件，来存放组件，再在components文件夹中创建一个组件，名为 : tabs

定义

自定义组件的目录结构类似于页面的结构，但组件和页面是有区别的，组件没有自己的生命周期和Page实例，它是由页面进行引用和使用的。

在 tabs.json 中编写

{
  "component": true,
  "usingComponents": {}
}

编写

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

在 tabs.js 中进行编写

// components/tabs/tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
 // 这里定义了innerText属性，属性值可以在组件使用时指定
 innerText: {
  type: String,
  value: 'default value'
},
tabList:Object
  },
  /**
   * 组件的初始数据
   */
  data: {
    tabIndex:1
  },
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e){
      // 获取索引
      const {index} = e.currentTarget.dataset;
      // 触发 父组件的事件
      this.triggerEvent("tabsItemChange",{index})
      this.setData({
          tabIndex:index
      })
    }
  }
})

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

使用

在项目的 project.config.json 文件中的setting属性中进行配置，编写以下两个配置

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

需要在哪个页面中进行使用，就需要在哪个页面中进行引用配置

议页面.json (meeting/list/list.json)中增加以下设置

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

然后再 list.js 中进行初始化数据，在data属性中编写

 data: {
    tabs:['会议中','已完成','已取消','全部会议']
}

在 list.wxml中使用 

<!--pages/meeting/list/list.wxml-->
<tabs tabList="{{tabs}}"  bindtabsItemChange="tabsItemChange">
</tabs>

会议

数据

在会议的 list.js 中进行初始化数据进行页面显示效果

// pages/meeting/list/list.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs:['会议中','已完成','已取消','全部会议'],
    lists: [
      {
        'id': '1',
        'image': '/static/persons/16.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/15.gif',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'进行中',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/14.jpg',
        'title': 'H100太空商业大会',
        'num':'500',
        'state':'进行中',
        'time': '10月09日 17:31',
        'address': '大连市'
      },
      {
        'id': '1',
        'image': '/static/persons/13.jpg',
        'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
        'num':'150',
        'state':'进行中',
        'time': '10月09日 17:21',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/8.jpg',
        'title': '新质生活 · 品质时代 2016消费升级创新大会',
        'num':'217',
        'state':'进行中',
        'time': '10月09日 16:59',
        'address': '北京市·朝阳区'
      }
    ],
    lists1: [
      {
        'id': '1',
        'image': '/static/persons/7.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'已结束',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/15.gif',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/14.jpg',
        'title': 'H100太空商业大会',
        'num':'500',
        'state':'已结束',
        'time': '10月09日 17:31',
        'address': '大连市'
      }
    ],
    lists2: [
      {
        'id': '1',
        'image': '/static/persons/16.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/15.gif',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      }
    ],
    lists3: [
      {
        'id': '1',
        'image': '/static/persons/8.jpg',
        'title': '对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】',
        'num':'304',
        'state':'进行中',
        'time': '10月09日 17:59',
        'address': '深圳市·南山区'
      },
      {
        'id': '1',
        'image': '/static/persons/7.jpg',
        'title': 'AI WORLD 2016世界人工智能大会',
        'num':'380',
        'state':'已结束',
        'time': '10月09日 17:39',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/13.jpg',
        'title': 'H100太空商业大会',
        'num':'500',
        'state':'进行中',
        'time': '10月09日 17:31',
        'address': '大连市'
      },
      {
        'id': '1',
        'image': '/static/persons/14.jpg',
        'title': '报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”',
        'num':'150',
        'state':'已结束',
        'time': '10月09日 17:21',
        'address': '北京市·朝阳区'
      },
      {
        'id': '1',
        'image': '/static/persons/15.gif',
        'title': '新质生活 · 品质时代 2016消费升级创新大会',
        'num':'217',
        'state':'进行中',
        'time': '10月09日 16:59',
        'address': '北京市·朝阳区'
      }
    ]
  },
  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
    })
},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})

显示

 在会议的 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> 
<view class="section bottom-line">
    <text>到底啦</text>
</view>

样式

/* pages/meeting/list/list.wxss */
.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;
}

效果展示

个人中心

页面

在个人中心页面中编写 .wxml 文件(如 : ucenter/index/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> -->
<!--pages/ucenter/index/index.wxml-->
<!-- <text>pages/ucenter/index/index.wxml</text> -->
<view class="user">
    <image class="user-img"  src="/static/persons/1.jpg"></image>
    <view class="user-name">小徐</view>
    <text class="user-up">修改</text>
</view>
<view class="cells">
    <view class="cell-items">
        <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>
    <view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
    <view class="cell-items">
        <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我参与的会议</text>
        <text class="cell-items-num">10</text>
        <text class="cell-items-detail">🫰</text>
    </view>
</view>
<view style="height: 27rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
<view class="cells">
    <view class="cell-items">
        <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>
    <view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
    <view class="cell-items">
        <image src="/static/tabBar/sdk.png" class="cell-items-icon"></image>
        <text class="cell-items-title">我参与的投票</text>
        <text class="cell-items-num">10</text>
        <text class="cell-items-detail">🫰</text>
    </view>
</view>
<view style="height: 27rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
<view class="cells">
    <view class="cell-items">
        <image src="/static/tabBar/template.png" class="cell-items-icon"></image>
        <text class="cell-items-title">信息</text>
        <text class="cell-items-ion">🫰</text>
    </view>
    <view style="height: 5rpx;background-color: rgba(135, 206, 250, 0.075);"></view>
    <view class="cell-items">
        <image src="/static/tabBar/component.png" class="cell-items-icon"></image>
        <text class="cell-items-title">设置</text>
        <text class="cell-items-ion">🫰</text>
    </view>
</view>

样式

在个人中心的 .wxss 样式文件 中进行编写样式，来美化布局的页面效果

/* pages/ucenter/index/index.wxss */
Page{
  background-color: rgba(135, 206, 250, 0.075);
}
.user{
  display: flex;
  width: 100%;
  align-items:center;
  background-color: white;
  margin-bottom: 28rpx;
}
.user-img{
height: 170rpx;
width: 170rpx;
margin: 30rpx;
border: 1px solid #cdd7ee;
border-radius: 6px;
}
.user-name{
width: 380rpx;
margin-left: 20rpx;
font-weight: 550;
}
.user-up{
color: rgb(136, 133, 133);
}
.cells{
  background-color: white;
}
.cell-items{
  display: flex;
  align-items:center; 
  height: 110rpx;
}
.cell-items-title{
  width: 290rpx;
}
.cell-items-icon{
  width: 50rpx;
  height: 50rpx;
  margin: 20rpx;
}
.cell-items-num{
  padding-left: 30rpx;
  margin-left: 200rpx;
  width: 70rpx;
}
.cell-items-ion{
  margin-left: 295rpx;
}

效果展示

okok，今天就到这里了，下班下班！！！！！！！！！！！！！！！


文章标签：
小程序
JavaScript
数据格式
开发者
JSON
关键词：
微信开发
微信小程序自定义
微信组件
微信自定义组件
微信小程序组件
懒大王o
目录
相关文章
邹荣乐
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
邹荣乐
693 7
邹荣乐
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
邹荣乐
747 1
yuanzhengme
|
2月前
|
存储 小程序 安全
微信的开发管理都需要配置什么？
【10月更文挑战第17天】微信的开发管理都需要配置什么？
yuanzhengme
36 0
邹荣乐
|
2月前
|
JavaScript 小程序 开发者
uni-app开发实战：利用Vue混入(mixin)实现微信小程序全局分享功能，一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战：利用Vue混入(mixin)实现微信小程序全局分享功能，一键发送给朋友、分享到朋友圈、复制链接
邹荣乐
464 0
clicksun
|
6天前
|
安全 数据挖掘 BI
一款功能全面且免费的OA办公系统，下载即用
点晴免费OA办公系统是一款完全免费，不限使用时间，不限用户数，功能全面的免费OA办公系统，下载安装即用，使用点晴OA办公系统可以简单快速地建立办公自动化系统。
clicksun
34 5
clicksun
|
1月前
|
监控
点晴OA系统为企业的发展注入新的活力
点晴OA办公系统是真正完全免费的协同OA系统软件商，而且是不限使用时间，不限用户数，不限功能模块的免费OA办公系统，为企业全面实现行政办公一体化，深受众多企业的青睐。
clicksun
27 5
clicksun
|
1月前
|
安全 搜索推荐 数据安全/隐私保护
点晴免费OA办公系统：高效协同，安全易用
信息技术发展推动企业信息化，即企业利用现代技术提升生产、经营、管理效率，增强竞争力。点晴免费OA系统作为信息化管理的基础，是实现企业信息化的关键手段。
clicksun
41 2
clicksun
|
2月前
|
数据安全/隐私保护
点晴OA办公系统让企业变得高效协同
随着企业信息化进程的加快，很多企业开始寻求使用企业管理免费OA办公系统来提高工作效率。然而，有些些企业可能缺乏信息化经验，对技术一无所知，甚至从未接触过OA办公系统。在这种情况下，企业需要寻求功能比较全面的OA办公系统，以满足企业的实际需求。
clicksun
51 1
yeye向阳而生
|
2月前
|
敏捷开发 数据可视化 数据挖掘
哪些OA任务管理系统值得推荐？4款高效办公工具介绍
在现代企业中，OA（办公自动化）任务管理系统是提升工作效率和团队协作的关键工具。本文介绍了4款备受推崇的OA任务管理系统：板栗看板、Trello、Asana和Monday.com，分别从提高工作效率、增强团队协作、优化资源分配和提升工作质量等方面进行了详细说明，为用户提供全面的参考和选择指南。
yeye向阳而生
98 0
clicksun
|
2月前
|
存储 安全 数据安全/隐私保护
如何明智选择免费OA系统的关键因素
在数字化办公日益普及的今天，选择一款合适的免费OA系统对于企业提升工作效率和管理水平至关重要。不管是办公的便捷方便，还是与其他平台的融合，免费OA系统的选择，需要看这几点，易用性、开放性、稳定性、服务性、实用性、安全性。
clicksun
26 0

热门文章

最新文章

  • 1
    小程序审核常见驳回类型
  • 2
    小程序自定义弹窗禁止底部内容滚动（滚动穿透问题）
  • 3
    小程序云开发联表数据查询以及云函数中的应用
  • 4
    小程序：开发者工具和真机调试能请求后台数据，手机预览请求不到数据，快速解决
  • 5
    【小程序开发框架选型】7大小程序开发框架，哪一个更适合你？
  • 6
    笑联 x mPaaS | 12 个模块，全面小程序化，如何打造真正的一次开发复用多端？
  • 7
    小程序-uniApp：区域滚动、下拉刷新、上拉加载更多
  • 8
    小程序根据返回值是否为空判断标签是否显示
  • 9
    小程序中加载html5地图界面链接
  • 10
    小程序动端组件库Vant Weapp的使用
  • 1
    看了致远OA的表单设计后的思考
    50
  • 2
    基于jeecg-boot的OA日程安排开发（五）
    147
  • 3
    基于jeecg-boot的OA日程安排开发（四）
    76
  • 4
    基于jeecgboot的OA日程安排开发（三）
    61
  • 5
    基于jeecgboot的OA日程安排开发（二）
    73
  • 6
    基于jeecgboot的OA日程安排开发（一）
    69
  • 7
    OA办公系统选购注意的事项
    108
  • 8
    企业为什么要用免费OA系统
    53
  • 9
    免费OA赋能企业管理建设专业化
    51
  • 10
    企业使用免费OA系统后竟然有如此变化
    41

    • 相关课程

    更多
  • IoT小程序框架课程
  • 阿里云RPA（机器人流程自动化）- 初级入门（可视化）
  • 软件供应商进阶管理实操
  • 云上建站快速入门-博客、论坛、CMS、电子商务网站统统搞定
  • 软件用户使用服务及供应商进阶管理
  • 天池大赛平台产品使用说明

    • 相关电子书

    更多
  • 微信广告引擎与播放节奏算法实践
  • 微信H5视频播放器在海量业务下的实践
  • 《云市场-心选OA解决方案》

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 快速搭建移动端可视化看板
  • 1分钟SAE部署PHP商城小程序
  • 前端开发基础2：VS Code和Edge的联动开发
  • 收银台的场景化界面实践
  • 阿里云IoT小程序应用开发和组件实践
    • 下一篇
    DataWorks售前咨询