会议网页设计首页 第1篇
轮播图我们已经弄好了，接下来就是会议信息等代码了，如下：
先在中加入以下代码：
然后在中加入以下样式代码，如下：
最后模拟器演示效果如下：
最后微信小程序进阶——Flex弹性布局&轮播图&会议OA项目（首页）就到这里，祝大家在敲代码的路上一路通畅!
感谢大家的观看 !
会议网页设计首页 第2篇
思路：用Mock模拟后台给前台响应数据
新建一个名为config的文件夹，文件夹下新建专门放接口地址， 如下：
建好之后在中加入以下代码：
然后在中加入以下代码：
加入之后我们重新编译代码，发现报错了，错误信息如下：
这样的问题是因为微信开发者程序默认是校验合法域名的，所以我们需要设置以下，如下：
但是在此后，我们发现它又报了另一个错误，如下：
这个问题是因为我们请求后台服务器时出现错误，但是我们并没有启动后台服务器，因为是用Mock模拟后台给前台响应数据，所以这里我们启用一下Mock就可以了，具体操作如下：
JSON数据包代码如下：
然后我们重新编译代码，控制器效果图如下：
到这里就算拿到我们的后台数据了。接着继续优化我们的代码，如下：
在中加入以下代码：
模拟器展示效果如下：
会议网页设计首页 第3篇
Flex 弹性布局是一种用于网页布局的现代 CSS 技术，旨在更灵活地管理容器内的元素排列和分布，以实现响应式设计和更好的页面布局控制。Flex 布局基于弹性盒子模型，通过使用 display: flex 属性，你可以将一个容器转变为一个弹性容器，从而控制其内部子元素的排列方式。
在进行Flex弹性布局属性的代码预演前，我们需进行小程序会议OA项目大致架子的搭建，具体操作如下：
先建立一个新的Js项目模板，把pages下的所有目录清空，然后在中加入以下代码：
接着把static静态资源复制到存放代码的区间中，如下：
然后我们的微信开发者工具中就会自动生成目标目录，如下：
到这里我们的会议OA项目架子就搭建好了，效果展示如下：
架子搭好之后我们需要在tab上(一级菜单)演示一下弹性布局到底是什么来帮助大家理解，我们在投票界面来给大家展示一下，首先在中插入以下代码：
然后在中加入样式来帮助大家更直观的看到效果，代码如下：
模拟器展示页面如下：
紧接着我们在页面中.box样式代码块下加入关键代码（Flex弹性布局），如下：
display: flex;
然后我们接着打开模拟器观察页面，如下：
在没有加入flex的时候view块状元素是超出了我们的box盒范围的。但是加入了之后，就可以非常直观的看到我们每一个块状元素设置的大小都是100rpx，12个view块状元素加起来就是1200rpx，但是页面的总宽高设置的是750rpx，但是意外的是750rpx的页面承载了12个view快状元素，这个就是Flex弹性布局的特点。
Flex 弹性布局（Flexbox，也称为弹性盒子布局）是一种用于网页布局的现代 CSS 技术，它引入了一些核心概念，以便更灵活地排列和分布页面上的元素。以下是 Flex 弹性布局的核心概念：
Flex 容器 (Flex Container):
Flex 项 (Flex Items):
主轴 (Main Axis):
交叉轴 (Cross Axis):
主轴起点和终点:
交叉轴起点和终点:
伸缩性 (Flexibility):
初始尺寸 (Flex Basis):
Flex 值 (Flex Value):
排列顺序 (Order):
这些核心概念使得 Flex 弹性布局非常有用，因为它提供了更灵活的布局方式，允许容器内的元素根据容器的大小和方向进行动态排列。这对于实现响应式设计和解决布局问题非常有帮助。
Flex 弹性布局常见属性包括：
display:
flex-direction:
flex-wrap:
justify-content:
align-items:
align-content:
flex:
flex-grow:
flex-shrink:
flex-basis:
order:
这些属性是使用 Flex 弹性布局时常用的一些关键属性，通过合理地组合和设置这些属性，可以实现各种不同的布局效果。
flex-direction属性决定主轴的方向（即项目的排列方向）。
在中.box样式代码块下加入以下代码：
加入后模拟器展示如下所示：
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
注：它可能取三个值。分别如下：
（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。
把flex-derection属性的代码注释后，在中加入以下代码：
模拟器效果演示：
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
跟前面一样，把上一个效果的代码注释掉之后，加入以下代码：
模拟器展示效果如下：
justify-content属性定义了项目在主轴上的对齐方式。
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
在中加入以下代码：
右对齐展示效果如下：
align-items属性定义项目在交叉轴上如何对齐。
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
在中加入以下代码：
模拟器展示效果如下：
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
该属性可能取6个值。分别如下：