青海休闲网站建设公司,wordpress 防注册,哪里有做效果图的网站,哪家公司建的沂南体育馆规划图14天阅读挑战赛如果世界上有奇迹#xff0c;那一定是努力的另一个名字。 目录 一、小程序布局 1.1 Flex布局 1.2 Flex属性 二、OA会议首页搭建 2.1 首页底部菜单 2.2 创建后端结口 2.3 Mock模拟数据 2.4 首页轮播图搭建 2.5 首页内容搭建 一、小程序布局 1.1 Flex布…14天阅读挑战赛如果世界上有奇迹那一定是努力的另一个名字。 目录 一、小程序布局 1.1 Flex布局 1.2 Flex属性 二、OA会议首页搭建 2.1 首页底部菜单 2.2 创建后端结口 2.3 Mock模拟数据 2.4 首页轮播图搭建 2.5 首页内容搭建  一、小程序布局 1.1 Flex布局 布局的传统解决方案基于盒状模型依赖 display属性 position属性 float属性 Flex是Flexible Box的缩写意为”弹性布局”用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。display: ‘flex’ 容器默认存在两根轴水平的主轴main axis和垂直的交叉轴cross axis。主轴的开始位置与边框的交叉点叫做main start结束位置叫做main end交叉轴的开始位置叫做cross start结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size占据的交叉轴空间叫做cross size。 1.2 Flex属性 flex-direction 主轴的方向 默认为rowflex-wrap 如果一条轴线排不下如何换行flex-flow 是flex-direction属性和flex-wrap属性的简写形式justify-content 定义了项目在主轴上的对齐方式align-items 定义项目在交叉轴上如何对齐align-content 属性定义了多根轴线的对齐方式 注意设为Flex布局以后子元素的float、clear和vertical-align属性将失效。 更多详情Flex 布局语法教程 | 菜鸟教程 二、OA会议首页搭建 2.1 首页底部菜单 在该项目资源管理器创建以下路径用来存放图标 /static/tabBar/coding-active.png 创建新的小程序项目之后在app.json里面pages新建页面和绑定tabBer。 {pages: [pages/index/index,pages/meeting/list/list,pages/vote/list/list,pages/ucenter/index/index,pages/logs/logs],window: {backgroundTextStyle: light,navigationBarBackgroundColor: #fff,navigationBarTitleText: Weixin,navigationBarTextStyle: black},tabBar: {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: 设置}]},style: v2,sitemapLocation: sitemap.json } 2.2 创建后端结口 在该项目资源管理器创建config/api.js文件 // 以下是业务服务器API地址// 本机开发API地址var WxApiRoot http://localhost:8080/ycxw/wx/;// 测试环境部署api地址// var WxApiRoot http://192.168.0.101:8070/ycxw/wx/;// 线上平台api地址//var WxApiRoot https://www.oa-mini.com/ycxw/wx/;module.exports {IndexUrl: WxApiRoot home/index, //首页数据接口SwiperImgs: WxApiRootswiperImgs, //轮播图MettingInfos: WxApiRootmeeting/list, //会议信息}; 2.3 Mock模拟数据 本次没有连接后端利用小程序Mock模拟假数据。 打开调试器按照一下示例进行操作 {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;charsetutf-8} } 2.4 首页轮播图搭建 首先打开不校验合法域名设置 编写轮播图页面 //index.wxml viewswiper autoplaytrue indicator-dotstrue indicator-color#fff indicator-active-color#00fblock wx:for{{imgSrcs}} wx:keytextswiper-itemviewimage src{{item.img}} classswiper-item //view/swiper-item/block/swiper /view 编写js // index.js // 获取应用实例 const app getApp() const api require(../../config/api) Page({data: {imgSrcs: [],lists: []},// 事件处理函数bindViewTap() {wx.navigateTo({url: ../logs/logs})},// 轮播图的方法loadSwiperImgs() {let that this;wx.request({url: api.SwiperImgs,dataType: json,success(res) {console.log(res)that.setData({imgSrcs: res.data.images})}})},onLoad() {if (wx.getUserProfile) {this.setData({canIUseGetUserProfile: true})}// 一进来就调用轮播图的方法this.loadSwiperImgs();this.loadMeetingInfos();},getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息开发者每次通过该接口获取用户个人信息均需用户确认开发者妥善保管用户快速填写的头像昵称避免重复弹窗wx.getUserProfile({desc: 展示用户信息, // 声明获取用户个人信息后的用途后续会展示在弹窗中请谨慎填写success: (res) {console.log(res)this.setData({userInfo: res.userInfo,hasUserInfo: true})}})},getUserInfo(e) {// 不推荐使用getUserInfo获取用户信息预计自2021年4月13日起getUserInfo将不再弹出弹窗并直接返回匿名的用户个人信息console.log(e)this.setData({userInfo: e.detail.userInfo,hasUserInfo: true})} }) 效果图 2.5 首页内容搭建  1. 利用Mack模拟数据 JSON数据包 {data: {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: 北京市·朝阳区}]},statusCode: 200,header: {content-type:applicaiton/json;charsetutf-8} } 2. 添加js方法 index.js//首页会议信息的ajaxloadMeetingInfos() {let that this;wx.request({url: api.MettingInfos,dataType: json,success(res) {console.log(res),that.setData({lists: res.data.lists})}})}, 3. 首页界面 view classindexbgswiper autoplaytrue indicator-dotstrue indicator-color#fff indicator-active-color#00fblock wx:for{{imgSrcs}} wx:keytextswiper-itemviewimage src{{item.img}} classswiper-item //view/swiper-item/block/swiperview classmobi-titletext classmobi-text会议信息/text/viewblock wx:for-items{{lists}} wx:for-itemitem wx:keyitem.id classbgview classlist data-id{{item.id}}view classlist-imgimage classvideo-img modescaleToFill src{{item.image}}/image/viewview classlist-detailview classlist-titletext{{item.title}}/text/viewview classlist-tagview classstate{{item.state}}/viewview classjointext classlist-num{{item.num}}/text人报名/view/viewview classlist-infotext{{item.location}}/text|text{{item.starttime}}/text/view/view/view/blockview classsectiontext到底啦/text/view /view 4. 界面样式 /**index.wxss**/ .userinfo {display: flex;flex-direction: column;align-items: center;color: #aaa; }.userinfo-avatar {overflow: hidden;width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%; }.usermotto {margin-top: 200px; }/**index.wxss**/ .section {color: #aaa;display: flex;justify-content: center; }.list-info {color: #aaa; }.list-num {color: red;/* font-weight: 700; */ }.join {padding: 0px 0px 0px 10px;color: #aaa; }.state {margin: 0px 6px 0px 6px;border: 1px solid #4083ff;color: #4083ff;padding: 3px 5px 3px 5px; }.list-tag {padding: 3px 0px 10px 0px;display: flex;align-items: center; }.list-title {display: flex;justify-content: space-between;font-size: 11pt;color: #333;font-weight: bold;}.list-detail {display: flex;flex-direction: column;margin: 0px 0px 0px 15px; }.video-img {margin-top: 5px;width: 80px;height: 80px; }.list {display: flex;flex-direction: row;background-color: seashell;border-bottom: 1px solid #cecece;padding: 10px; }.mobi-text {font-weight: 700;padding: 15px; }/* .mobi-icon {border-left: 5px solid #57f564; } */ .indexbg{background-color: rgba(219, 219, 219, 0.678); }.mobi-title {/* background-color: rgba(219, 219, 219, 0.678); */margin: 10px 0px 10px 0px; }.swiper-item {height: 300rpx;width: 100%;border-radius: 10rpx; }.userinfo {display: flex;flex-direction: column;align-items: center;color: #aaa; }.userinfo-avatar {overflow: hidden;width: 128rpx;height: 128rpx;margin: 20rpx;border-radius: 50%; }.usermotto {margin-top: 200px; } 5. 效果展示