微信小程序首页-----布局（详细教程赶快收藏吧）-阿里云开发者社区

🎬 艳艳耶✌️：个人主页

🔥 个人专栏：《Spring与Mybatis集成整合》《Vue.js使用》

⛺️ 越努力，越幸运。

1.flex弹性布局

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

网址：

flex属性：

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

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

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

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

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

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

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

1.1 display: flex 弹性布局属性

前端代码：

<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>8</view>
<view>9</view>
<view>10</view>
<view>11</view>
<view>12</view>
</view>

样式添加：

给每一个view设置了宽高为100rpx,众所周知小程序的手机端的宽度是750rpx

.box{
    height: 750rpx;
    width: 750rpx;
    background-color: pink;
    display: flex;
}
view{
    height: 100rpx;
    width: 100rpx;
    border: 1px solid greenyellow;
}

添加display: flex之前与之后的对比：

1.2 flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

flex-direction: row | row-reverse | column | column-reverse;

1.3 flex-wrap属性

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap: nowrap (不换行) | wrap | wrap-reverse;

2.4 flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，就是将两者结合起来了，默认值为row nowrap。

2.5 justify-content属性

justify-content: flex-start（居右对齐） | flex-end（居左对齐） | center（居中对齐） | space-between（两端对齐，项目之间的间隔都相等） | space-around（每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。）

2.首页轮播图

2.1 我们先把一级菜单底座打好

在app.json里面：

"pages":[
    "pages/index/index",
    "pages/meeting/list/list",
    "pages/vote/list/list",
    "pages/ucenter/index/index",
    "pages/logs/logs"
  ],

"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": "设置"
        }]
  },

效果展示：

2.2 mockJS模拟数据

定义接口：

右击新建立一个文件---->在建立一个js文件：

在app.js里面定义接口：

// 以下是业务服务器API地址
 // 本机开发API地址
 var WxApiRoot = 'http://localhost:8080/demo/wx/';
 // 测试环境部署api地址
 // var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/';
 // 线上平台api地址
 //var WxApiRoot = 'https://www.oa-mini.com/demo/wx/';
 module.exports = {
   IndexUrl: WxApiRoot + 'home/index', //首页数据接口
   SwiperImgs: WxApiRoot+'swiperImgs', //轮播图
   MettingInfos: WxApiRoot+'meeting/list', //会议信息
 };

前端轮播图代码：index.wxml

这段代码可以从官网拿的，里面的属性官网中可以看到：

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>

样式：index.wxss页面

.swiper-item {
    height: 300rpx;
    width: 100%;
    border-radius: 10rpx;
}

在index.js里面添加轮播图方法：

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

在index.js的onload方法中调用：

onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
    this.loadSwiperImgs();
  },

在index.js里面接口mockjs

// 轮播图 mockjs
const api = require("../config/app.js");

注意：在这里用的是http的网址，不是https所以会报错，需要修改.

接着点开调式器的mock,在里面新增接口：

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"
  }
}

2.3轮播图效果展示：

3.首页布局

在静态资源文件夹 ( static ) 中创建一个放首页会议用户头像图片的文件夹 : persons

注 : 需要在项目的本地路径下进行创建和增加

3.1. 视图

找到 index.wxml 将所有代码修改为以下代码 :

3.2. 数据

找到 index.js 将所有代码修改为以下代码 :

// index.js
// 获取应用实例
const app = getApp()
const api = require("../config/app")
Page({
  //初始化数据
  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/1.jpg",
        "title": "新质生活 · 品质时代 2016消费升级创新大会",
        "num":"217",
        "state":"进行中",
        "starttime": "2022-03-13 00:00:00",
        "location": "北京市·朝阳区"
      }
    ]
  },"statusCode": "200",
  "header": {
    "content-type":"applicaiton/json;charset=utf-8"
  },
  // 事件处理函数
  // 获取轮播图的方法
  loadSwiperImgs(){
    let that=this;
    wx.request({
        url: api.SwiperImgs,
        dataType: 'json',
        success(res) {
          console.log(res)
          that.setData({
              imgSrcs:res.data.images
          })
        }
      })
  },
//  获取首页会议信息的方法
  loadMeetingInfos(){
    let that=this;
    wx.request({
        url: api.MettingInfos,
        dataType: 'json',
        success(res) {
          console.log(res)
          that.setData({
              lists:res.data.lists
          })
        }
      })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
    this.loadSwiperImgs();
  },
  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
    })
  }
})

3.3. 样式

在 index.wxss 中编写样式，进行美化页面，以下是样式的所有代码 :

/**index.wxss**/
.swiper-item {
  height: 300rpx;
  width: 100%;
  border-radius: 10rpx;
}
.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;
}

效果展示：

今日分享结束！！！！！

微信小程序首页-----布局（详细教程赶快收藏吧）

1.flex弹性布局

1.1 display: flex 弹性布局属性

1.2 flex-direction属性

1.3 flex-wrap属性

2.4 flex-flow属性

2.5 justify-content属性

2.首页轮播图

2.1 我们先把一级菜单底座打好

2.2 mockJS模拟数据

3.首页布局

3.1. 视图

3.2. 数据

3.3. 样式

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

微信小程序首页-----布局（详细教程赶快收藏吧）

1.flex弹性布局

1.1 display: flex 弹性布局属性

1.2 flex-direction属性

1.3 flex-wrap属性

2.4 flex-flow属性

2.5 justify-content属性

2.首页轮播图

2.1 我们先把一级菜单底座打好

2.2 mockJS模拟数据

3.首页布局

3.1. 视图

3.2. 数据

3.3. 样式

热门文章

最新文章

相关课程

相关电子书

相关实验场景