微信小程序-会议OA项目03

最新推荐文章于 2024-10-22 22:41:48 发布
最新推荐文章于 2024-10-22 22:41:48 发布
阅读量1.1k 收藏 3
点赞数 1
文章标签： 微信小程序 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_67338832/article/details/128472671
版权

目录

1.Flex布局简介

        1.1 什么是flex布局

        1.2 flex属性

2.轮播图--组件的使用

3.会议OA项目-首页

1.Flex布局简介

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性

        1.1 什么是flex布局

1) Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

2) 任何一个容器都可以指定为Flex布局。

3) display: ‘flex’

 

 

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

 

        1.2 flex属性

  • flex-direction 主轴的方向 默认为row

  • flex-wrap 如果一条轴线排不下，如何换行

  • flex-flow 是flex-direction属性和flex-wrap属性的简写形式

  • justify-content 定义了项目在主轴上的对齐方式

  • align-items 定义项目在交叉轴上如何对齐

  • align-content 属性定义了多根轴线的对齐方式

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

学习地址：

Flex 布局语法教程 | 菜鸟教程网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex布局将成为未来布..http://www.runoob.com/w3cnote/flex-grammar.html

 

 

2.轮播图--组件的使用

 点击在开发者工具中查看效果

选择导入即可： 

 

拷取其中需要的代码并可进行修改： 

 

 index.wxml:

<view>
    <swiper autoplay="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="#00f">
        <block wx:for="{{imgSrcs}}" wx:key="text">
            <swiper-item>
                <view>
                    <image src="{{item.img}}" class="swiper-item" />
                </view>
            </swiper-item>
        </block>
    </swiper>
</view>

在没有后台的情况下会使用mokcjs：

新建一个接口：

json数据包：

{
  "data": {
    "images":[
  {
    "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png",
    "text": "1"
  },
  {
    "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png",
    "text": "2"
  },
  {
    "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png",
    "text": "3"
  },
  {
    "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png",
    "text": "4"
  },
  {
    "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png",
    "text": "5"
  },
  {
    "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner6.png",
    "text": "6"
  }
]
  },
  "statusCode": "200",
  "header": {
    "content-type":"applicaiton/json;charset=utf-8"
  }
}

 index/index.js界面

// pages/index/index.js
const api = require("../../config/app")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgSrcs:[]//需要调用：http://localhost:8080/demo/wx/swiperImgs接口地主数据
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
      this.loadSwiperImgs();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
  loadSwiperImgs(){
    let that=this;
    wx.request({
        url: api.SwiperImgs,
        dataType: 'json',
        success(res) {
          console.log(res)
          that.setData({
              imgSrcs:res.data.images
          })
        }
      })
  }
})

轮播图效果：

3.会议OA项目-首页

 

"list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/static/tabBar/coding.png",
      "selectedIconPath": "/static/tabBar/coding-active.png"
    },
      {
        "pagePath": "pages/meeting/list/list",
        "iconPath": "/static/tabBar/sdk.png",
        "selectedIconPath": "/static/tabBar/sdk-active.png",
        "text": "会议"
      },
      {
        "pagePath": "pages/vote/list/list",
        "iconPath": "/static/tabBar/template.png",
        "selectedIconPath": "/static/tabBar/template-active.png",
        "text": "投票"
      },
      {
        "pagePath": "pages/ucenter/index/index",
        "iconPath": "/static/tabBar/component.png",
        "selectedIconPath": "/static/tabBar/component-active.png",
        "text": "设置"
      }]

 

copy入static文件： 

 

 static文件：

        persons文件:

 

tabBar文件：

 

看一下基础的布局：

弹性布局：不会随着屏幕变化而使画面失帧

 

<!--pages/vote/list/list.wxml-->
<!-- <text>pages/vote/list/list.wxml</text> -->
<view class="box">
    <view>1</view>
    <view>2</view>
    <view>3</view>
    <view>4</view>
    <view>5</view>
    <view>6</view>
    <view>7</view>
</view>

 

/* pages/vote/list/list.wxss */
.box{
  height: 750rpx;
  width: 750rpx;
  background-color: aqua;
  display: flex;
}
view{
  height: 100rpx;
  width: 100rpx;
  border: 1px solid rebeccapurple;
}

效果：

 

/* pages/vote/list/list.wxss */
.box{
  height: 750rpx;
  width: 750rpx;
  background-color: aqua;
  display: flex;
  flex-direction: column-reverse;/*竖型排列*/
}
view{
  height: 100rpx;
  width: 100rpx;
  border: 1px solid rebeccapurple;
}

效果：

 其余的效果可以在官网中查找：

 
 

会议信息：

 

index.js:

// pages/index/index.js
const api = require("../../config/app")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgSrcs:[],//需要调用：http://localhost:8080/demo/wx/swiperImgs接口地主数据
    lists:[
      {
        "id": "1",
        "image": "/static/persons/1.jpg",
        "title": "对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】",
        "num":"304",
        "state":"进行中",
        "starttime": "2022-03-13 00:00:00",
        "location": "深圳市·南山区"
      },
      {
        "id": "1",
        "image": "/static/persons/2.jpg",
        "title": "AI WORLD 2016世界人工智能大会",
        "num":"380",
        "state":"已结束",
        "starttime": "2022-03-15 00:00:00",
        "location": "北京市·朝阳区"
      },
      {
        "id": "1",
        "image": "/static/persons/3.jpg",
        "title": "H100太空商业大会",
        "num":"500",
        "state":"进行中",
        "starttime": "2022-03-13 00:00:00",
        "location": "大连市"
      },
      {
        "id": "1",
        "image": "/static/persons/4.jpg",
        "title": "报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”",
        "num":"150",
        "state":"已结束",
        "starttime": "2022-03-13 00:00:00",
        "location": "北京市·朝阳区"
      },
      {
        "id": "1",
        "image": "/static/persons/5.jpg",
        "title": "新质生活 · 品质时代 2016消费升级创新大会",
        "num":"217",
        "state":"进行中",
        "starttime": "2022-03-13 00:00:00",
        "location": "北京市·朝阳区"
      }
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
      this.loadSwiperImgs();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  },
  loadSwiperImgs(){
    let that=this;
    wx.request({
        url: api.SwiperImgs,
        dataType: 'json',
        success(res) {
          console.log(res)
          that.setData({
              imgSrcs:res.data.images
          })
        }
      })
  }
})

index.wxml:

<!--pages/index/index.wxml-->
<!-- <text>pages/index/index.wxml</text> -->
<view>
    <swiper autoplay="true" indicator-dots="true" indicator-color="#fff" indicator-active-color="#00f">
        <block wx:for="{{imgSrcs}}" wx:key="text">
            <swiper-item>
                <view>
                    <image src="{{item.img}}" class="swiper-item" />
                </view>
            </swiper-item>
        </block>
    </swiper>
</view>
<view class="mobi-title">
    <text class="mobi-icon"></text>
    <text>会议信息</text>
</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">
            <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">{{item.state}}</view>
                <view class="join"><text class="list-num">{{item.num}}</text>人报名</view>
            </view>
            <view class="list-info"><text>{{item.location}}</text>|<text>{{item.starttime}}</text></view>
        </view>
    </view>
</block>
<view class="section bottom-line">
		<text>到底啦</text>
</view>

 index.wxss:

.mobi-title {
  font-size: 12pt;
  color: #777;
  line-height: 110%;
  font-weight: bold;
  width: 100%;
  padding: 15rpx;
  background-color: #f3f3f3;
}

.mobi-icon {
  padding: 0rpx 3rpx;
  border-radius: 3rpx;
  background-color: #ff7777;
  position: relative;
  margin-right: 10rpx;
}

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

 效果展示：

 

不知道999
关注
OA系统微信小程序源码
08-24
OA系统微信小程序源码 包含签到签退，日常审批、用户绑定、信息发布等
微信小程序OA系统源代码
08-21
微信小程序OA系统源代码，有打卡考勤，pki功能，企业管理公告，门禁卡等.
微信小程序：会议OA项目-首页
weixin_62735525的博客
01-09 1720
快速上手小程序之会议OA项目-首页
基于微信小程序的多人协同OA自动化办公系统(源码+lw+部署文档+讲解等)
QQ3359892174的博客
10-15 1472
以下是关于基于小程序的多人协同 OA 自动化办公系统的概述： 系统核心功能 文档协作：支持多人同时在线编辑文档，实时同步更新内容。例如，团队成员可以共同撰写项目方案、报告等，每个人的修改都能即时显示在文档中，提高协作效率。还能对文档进行版本管理，方便追溯历史版本。 任务分配与跟踪：管理者可在系统中创建任务，并分配给相应成员。成员接收任务后，能在小程序上查看任务详情、截止日期等。任务执行过程中可实时更新进度，管理者能随时掌握任务动态，确保项目按计划推进。 日程管理：员工可在小程序上创建个人日程，如会议、拜访客
微信小程序 企业应用 企业OA系统小程序 （源代码+截图）
06-21
微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企业应用 企业OA系统小程序 （源代码+截图）微信小程序 企
106-微信小程序-企业OA系统小程序.zip
06-11
在"106-微信小程序-企业OA系统小程序.zip"这个压缩包中，我们可以推测包含了一个完整的微信小程序项目，用于构建企业级别的办公自动化（OA）系统。企业OA系统通常包括考勤管理、任务分配、文档共享、流程审批、会议...
微信小程序-开发的企业OA系统源代码.zip
12-24
在这个名为“微信小程序-开发的企业OA系统源代码.zip”的压缩包中，包含了用于构建一个企业级办公自动化（OA）系统的小程序源代码。这个系统能够帮助企业管理日常工作流程，提高工作效率，实现信息化办公。 源代码...
微信小程序之开发会议OA项目
02-18
"微信小程序之开发会议OA项目"是一个具体的应用实例，旨在帮助用户通过微信小程序实现办公自动化（OA）的功能，例如会议安排、通知、审批等。 在这个项目中，开发者可能使用了以下关键知识点： 1. **微信小程序...
微信小程序开发之会议OA项目首页搭建
10-17
在微信小程序开发中，"会议OA项目首页搭建"是一个关键环节，它涉及到用户与应用的初次交互，因此设计和实现必须注重用户体验。本项目旨在创建一个功能完备、易用的会议办公自动化（OA）系统首页，让用户能够方便地...
企业OA系统微信小程序源码.rar
06-11
"企业OA系统微信小程序源码.rar"则是一份包含完整开发源代码的压缩文件，旨在帮助开发者或企业构建自己的企业级办公应用。 这个压缩包中可能包含以下内容： 1. **源代码**：开发者可以查看和修改的程序源文件，...
微信小程序精选源码亲测可用_企业OA系统小程序.zip
06-29
微信小程序精选源码亲测可用_企业OA系统小程序.zip
企业OA系统小程序
03-26
企业OA系统小程序，微信小程序（wei xin xiao cheng xu），简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
微信小程序源码-合集5
09-26
微信小程序源码，包含：汤总便利、茶铺门店、滴滴拼车、同城拼车(带后台)、企业OA系统、房地产公司展示、华云智慧园区、汽车维修、评测、停车等源码。
Uni-App基于微信小程序的自动化办公OA系统
最新发布
QQ860234001的专栏
10-22 2225
在信息技术日新月异的今天，企业办公自动化（Office Automation，OA）已经成为提升工作效率、优化管理流程的重要手段。OA系统通过集成各种办公软件、数据库和通讯技术，实现了日常工作流程的电子化、信息化和智能化，极大地提高了企业内部信息交流的速度和质量，降低了管理成本，提升了决策效率。随着移动互联网技术的普及，人们开始追求更加便捷、高效的办公方式，传统的OA系统逐渐难以满足这一需求。因此，基于微信小程序的移动办公系统应运而生，它以其易用性和普及性，迅速成为企业办公的新选择。
微信小程序 会议OA项目-其它页面04
weixin_67338832的博客
12-28 377
目录1.会议管理 1.1 自定义tabs组件 1.2 会议管理2.投票管理3.个人中心文档参考:自定义组件 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 新建一个文件夹： tabs.json tabs.wxml tabs.wxss tabs.js list.json： list.wxml: list.wx
（小程序）会议OA项目-其它页面
weixin_67465673的博客
01-02 238
文档参考:自定义组件 | 微信开放文档微信开发者平台文档定义一个组件的文件夹生成这四个文件是右键---》新建components ---》输入tabs 就出来了。我们可以按照官方文档演示一下效果如图所示：这是默认的。
了解微信弹性布局--简单搭建一个页面
qq_62898618的博客
01-04 1303
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。flex-flow 是flex-direction属性和flex-wrap属性的简写形式。定义了项目在主轴上的对齐方式。
微信小程序的OA会议之首页搭建
m0_74915426的博客
10-20 380
具体来说，可以通过设置父容器的flex-direction属性来指定子元素的排列方向（水平或垂直），通过设置父容器的justify-content属性来指定子元素在主轴上的对齐方式，通过设置父容器的align-items属性来指定子元素在交叉轴上的对齐方式，通过设置子元素的flex属性来指定子元素占据父容器剩余空间的比例等。使用Flex布局，你可以更轻松地控制和调整容器中子元素的位置和大小，以实现响应式设计和更复杂的布局结构。在微信小程序中，flex布局是一种弹性盒子布局，用于实现页面元素的自适应和排列。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值