AI 助理
文档备案控制台
开发者社区 大数据 文章 正文

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

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

一.自定义组件及会议效果编写

在页面中创建一个以components命名的项目来存放组件

再在components文件夹中创建一个组件，名为 :tabs ，创建操作如图所示

刚刚创建好会报一个编码错误我们需要在项目的 project.config.json 文件中的setting属性中进行配置，增加以下两个配置 :

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

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

如下图所示

 

在 tabs.json 中编写:  

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

在 tabs.wxml 中进行编写模板: 

<!--components/tabs/tabs.wxml-->
<!-- <text>components/tabs/tabs.wxml</text> -->
<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
var App = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabList:Object
  },
  /**
   * 组件的初始数据
   */
  data: {
    tabIndex:0
  },
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemTap(e){
      // 获取索引
      const {index} = e.currentTarget.dataset;
      // 触发 父组件的事件
      this.triggerEvent("tabsItemChange",{index})
      this.setData({
          tabIndex:index
      })
    }
  }
})

在 tabs.wxss 中进行编写样式:

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

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

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

在 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 */
.mobi-title{
  background-color: green;
  padding: 10px;
}
.mobi-icon{
  border: 1rpx solid red;
  margin-right: 5px;
}
.mobi-title text{
  font-weight: 700;
  color: aqua;
}
.list{
 display: flex;
 align-items: center;
 /* background-color: yellowgreen; */
 border-bottom: 3px solid yellowgreen;
}
.list-img{
padding: 0 10px;
}
.video-img{
  height: 80px;
  width: 80px;
}
.list-detail{
}
.list-title{
font-weight: 700;
margin: 3px 0;
}
.list-tag{
display: flex;
align-items: center;
}
.state{
border: 2px solid red;
padding: 3px 6px;
color: red;
margin:0   5px 10px 0;
}
.join{
color: yellowgreen;
}
.list-num{
  color: aqua;
  font-weight: 700;
}
.list-info{
  color: yellowgreen;
  font-size: 12px;
}

到这里自定义组件将会议的页面搭建以及效果显示完成

效果显示

二.个人中心布局

在 ucenter/index/index.wxml进行页面显示编写

<!--pages/ucenter/index/index.wxml-->
<!-- <text>pages/ucenter/index/index.wxml</text> -->
<view class="user">
    <image class="user-img"  src="/static/persons/2.jpg"></image>
    <view class="user-name">Fithe.</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>

在index.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;
}
编写结果

156fe0e4c2ca4c8f8d00f578d144bf9d.png

文章标签：
小程序
数据格式
JSON
关键词：
微信开发
微信小程序开发
微信页面
微信小程序页面
微信自定义组件
bing人
目录
相关文章
邹荣乐
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
邹荣乐
4307 7
邹荣乐
|
小程序 JavaScript 前端开发
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
邹荣乐
4991 1
游客ib7xsk7hcucuo
|
12月前
微信封号脚本插件，全自动批量投诉工具， vx隔空抓包封号思路【仅供学习参考用途】
这是一款针对微信投诉自动化处理的工具插件，通过模拟点击操作实现批量投诉功能。相比手动投诉，该插件效率更高、成功率更有保障。
游客ib7xsk7hcucuo
3572 0
阿里云开发者
|
人工智能 自然语言处理 小程序
技术小白如何利用DeepSeek半小时开发微信小程序？
通过通义灵码的“AI程序员”功能，即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型，用户只需用自然语言描述需求，就能自动生成代码并优化程序。例如，一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外，通义灵码还提供智能问答模式，帮助用户解决开发中的各种问题，极大简化了开发流程，让普通人的开发体验更加顺畅。
阿里云开发者
4011 11
技术小白如何利用DeepSeek半小时开发微信小程序？
开心工作室V(kaic_kaic)
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端，使用MySQL数据库进行数据存储，前端以微信小程序为载体，支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等，而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性，通过SSM框架优化开发流程，确保高效稳定运行，满足用户便捷交易的需求，推动校园资源共享与循环利用。
开心工作室V(kaic_kaic)
1244 12
1786310562865821
|
小程序 JavaScript 前端开发
微信小程序开发全流程：从注册到上线的完整指南
这篇文章详细记录了微信小程序的完整开发到最终上线的每一个步骤。适合对小程序开发感兴趣的个人开发者或希望了解完整流程的学习者，涵盖了云开发、事件绑定、生命周期管理、组件使用等关键内容。
1786310562865821
22479 14
开心工作室V(kaic_kaic)
|
小程序 关系型数据库 Java
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用，旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库，实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节，确保技术可行、操作简便且经济合理。最终，该小程序可优化活动发布、学生信息管理和心得交流等功能，降低管理成本并提高工作效率。
开心工作室V(kaic_kaic)
395 5
探索云世界动手实践
|
JSON 缓存 小程序
微信小程序组件封装与复用：提升开发效率
本文深入探讨了微信小程序的组件封装与复用，涵盖组件的意义、创建步骤、属性与事件处理，并通过自定义弹窗组件的案例详细说明。组件封装能提高代码复用性、开发效率和可维护性，确保UI一致性。掌握这些技能有助于构建更高质量的小程序。
探索云世界动手实践
823 1
yxybox
|
缓存 移动开发 小程序
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
yxybox
636 9
疯狂的猿
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
疯狂的猿
824 0

热门文章

最新文章

  • 1
    企业OA产品怎么选 看完这篇横评就懂了
  • 2
    泛微OA系统后台连接数据库的文件
  • 3
    2018年OA系统深度解析：OA办公系统都应该具有哪些功能模块
  • 4
    FineReport和泛微OA(Ecology)的单点登录集成方案
  • 5
    比较全的OA系统功能模块列表
  • 6
    OA系统门户是什么？全面解析信息门户的类别、难点和关键点
  • 7
    预警| 通达OA系统0day漏洞，阿里云WAF支持免费应急服务
  • 8
    移动OA系统车辆管理解决方案
  • 9
    温氏股份用OA系统让几万名员工实现统一办公，提升集团精细化管理
  • 10
    PHP+Mysql实现协同办公OA系统源码演示下载
  • 1
    基于微信小程序的企业职工薪资查询系统+ssm+vue.js附带文章和源代码设计说明文档ppt
    363
  • 2
    基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
    512
  • 3
    基于微信小程序的民宿短租系统+ssm+vue.js附带文章和源代码设计说明文档ppt
    439
  • 4
    基于微信小程序的家政服务预约系统的+php+vue.js附带文章和源代码设计说明文档ppt
    356
  • 5
    基于微信小程序的大学生科技竞赛管理系统的+springboot+vue.js附带文章和源代码设计说明文档ppt
    342
  • 6
    基于微信小程序的宠物寄养平台的+ssm+vue.js附带文章和源代码设计说明文档ppt
    333
  • 7
    基于SSM框架的童装购买平台微信小程序+vue.js附带文章和源代码设计说明文档ppt
    216
  • 8
    基于微信小程序校园订餐的设计与开发+ssm+vue.js附带文章和源代码设计说明文档ppt
    295
  • 9
    游戏账号交易微信小程序+ssm+vue.js附带文章和源代码设计说明文档ppt
    342
  • 10
    基于微信小程序的场地预约+ssm+vue.js附带文章和源代码设计说明文档ppt
    269

    • 相关课程

    更多
  • IoT小程序框架课程

    • 相关电子书

    更多
  • 《使用Serverless服务快速开发小程序》
  • 《云市场-小程序》
  • 数字乡村建设方案
    • 下一篇
    阿里云数据库产品支持免费试用吗？最新可试用数据库规格信息、配置及可试用人群参考