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

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

2023-10-25 143
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序开发的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人
目录
相关文章
邹荣乐
|
3月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序：四大解决方案，轻松应对主包与vendor.js过大打包难题
邹荣乐
839 1
疯狂的猿
|
2月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
疯狂的猿
48 0
在线课堂+工具组件小程序uniapp移动端源码
邹荣乐
|
3月前
|
小程序
微信小程序动态tabBar实现：基于自定义组件，灵活支持不同用户角色与超过5个tab自由组合（更新版）
微信小程序动态tabBar实现：基于自定义组件，灵活支持不同用户角色与超过5个tab自由组合（更新版）
邹荣乐
722 1
yuanzhengme
|
3月前
|
存储 小程序 安全
微信的开发管理都需要配置什么？
【10月更文挑战第17天】微信的开发管理都需要配置什么？
yuanzhengme
44 0
邹荣乐
|
3月前
|
JavaScript 小程序 开发者
uni-app开发实战：利用Vue混入(mixin)实现微信小程序全局分享功能，一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战：利用Vue混入(mixin)实现微信小程序全局分享功能，一键发送给朋友、分享到朋友圈、复制链接
邹荣乐
605 0
clicksun
|
1天前
|
安全 BI
点晴免费OA系统对工作有哪些作用
点晴OA在企事业单位中所扮演的角色越来越重要，点晴免费OA的核心本质是帮助用户提高日常办公效率，所以我们日常工作的所有内容可以归入免费OA处理的范畴，我们的办公趋势是无纸化、移动化、社交化。
clicksun
14 5
clicksun
|
16天前
|
安全 数据安全/隐私保护
免费企业级OA办公系统，助力高效办公
拥有一套高效的免费OA办公自动化系统对于企业和机构来说至关重要。然而，对于许多中小型企业而言，购买一套全面的OA系统的成本又比较高。今天，我们为大家带来真正完全免费的点晴OA，让它成为您企业高效办公的得力助手！
clicksun
51 10
clicksun
|
23天前
|
安全 数据挖掘 BI
一款功能全面且免费的OA办公系统，下载即用
点晴免费OA办公系统是一款完全免费，不限使用时间，不限用户数，功能全面的免费OA办公系统，下载安装即用，使用点晴OA办公系统可以简单快速地建立办公自动化系统。
clicksun
62 5
clicksun
|
2月前
|
监控
点晴OA系统为企业的发展注入新的活力
点晴OA办公系统是真正完全免费的协同OA系统软件商，而且是不限使用时间，不限用户数，不限功能模块的免费OA办公系统，为企业全面实现行政办公一体化，深受众多企业的青睐。
clicksun
34 5
clicksun
|
2月前
|
安全 搜索推荐 数据安全/隐私保护
点晴免费OA办公系统：高效协同，安全易用
信息技术发展推动企业信息化，即企业利用现代技术提升生产、经营、管理效率，增强竞争力。点晴免费OA系统作为信息化管理的基础，是实现企业信息化的关键手段。
clicksun
50 2

热门文章

最新文章

  • 1
    POINTS 1.5：腾讯微信开源的多模态大模型，超越了业界其他的开源视觉语言模型，具备强大的视觉和语言处理能力
  • 2
    手撸了一个全自动微信清粉小工具（源码详解）
  • 3
    即时通讯技术文集（第45期）：微信、QQ技术精华合集(Part2) [共14篇]
  • 4
    通过标签清理微信好友：Python自动化脚本解析
  • 5
    微信native支付对接案例详解
  • 6
    即时通讯技术文集（第44期）：微信、QQ技术精华合集(Part1) [共14篇]
  • 7
    【一步步开发AI运动小程序】十五、AI运动识别中，如何判断人体站位的远近？
  • 8
    【一步步开发AI运动小程序】十六、AI运动识别中，如何判断人体站位？
  • 9
    uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订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
    UniApp与微信小程序介绍及区别
    643
  • 10
    微信小程序开发工具的使用，各个配置文件详解，小程序开发快速入门（二）
    647

    • 相关课程

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

    • 相关电子书

    更多
  • 微信广告引擎与播放节奏算法实践
  • 微信H5视频播放器在海量业务下的实践
  • 微信高效运维之路

    • 相关实验场景

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