三、小程序框架

本节主要学习使用flex布局和wx:for属性分别创建列表布局和九宫格布局。

一、列表布局界面：

主要代码：

<!--pages/index/index.wxml-->

<view class='container'>

  <view class='listGroup' wx:for='{{list}}' wx:for-item='group' wx:key='group{{index}}'>

    <view class='listItem' wx:for='{{group}}' wx:for-item='row' wx:key='row{{index}}'>

      <image src='{{row.icon}}'></image>

<!-- 上面的wx:for-item='group'是给当前遍历对象起了个别名叫group，因为是双重循环，两层循环的当前对象都叫item，起个别名以示区别；wx:key='group{{index}}'是唯一标识当前的键值，不拘泥于形式，只要引号里的整个字符串是唯一的就行。-->

      <text>{{row.text}}</text>

      <image src='/images/arrow.png'></image>

    </view>

  </view>

</view>

 

/* pages/index/index.wxss */

/*背景容器样式*/

.container{

  height: 100vh;/*高度为100视窗，写成100%无效*/

  background-color: silver;/*背景颜色为银色*/

  display: flex;/*flex布局模型*/

  flex-direction: column; /*垂直布局*/

}

/*列表组样式*/

.listGroup{

  background-color: white;/*背景颜色为白色*/

  margin: 20rpx 0;/*上下外边距20rpx，左右0*/

}

/*列表项单行样式*/

.listItem{

  display: flex;/*flex布局模型*/

  flex-direction: row; /*水平布局*/

  align-items: center; /*垂直方向居中*/

  border: 1rpx solid silver;/*1rpx宽的银色实线边框*/

  padding: 10rpx;/*内边距10rpx*/

}

/*图标的尺寸*/

image{

  width: 80rpx;/*宽度*/

  height: 80rpx;/*高度*/

  margin: 0 15rpx;/*上下外边距0，左右外边距15rpx*/

}

/*文本样式*/

text{

  font-size: 40rpx;/*字体大小40rpx*/

  flex-grow: 1;/*扩张多余空间宽度*/

}

 

// pages/index/index.js

Page({

/**
* 页面的初始数据
*/
data: {
list: [
//第1组列表
[{ text: '朋友圈', icon: '/images/moments.png' }],
//第2组列表
[
{ text: '扫一扫', icon: '/images/scan.png' },
{ text: '摇一摇', icon: '/images/shake.png' }
],
//第3组列表
[
{ text: '看一看', icon: '/images/topStories.png' },
{ text: '搜一搜', icon: '/images/search.png' }
],
//第4组列表
[
{ text: '购物', icon: '/images/shopping.png' },
{ text: '游戏', icon: '/images/games.png' }
],
//第5组列表
[{ text: '小程序', icon: '/images/miniProgram.png' }]
]
}

})

其他代码略。

二、九宫格布局界面：

 

主要代码：

<!--pages/index/index.wxml-->

<view class='container'>

 <view class='topPanel'>

   <view class='box1' wx:for='{{array1}}'wx:key='array1_{{index}}'>

     <image src="{{item.icon}}"></image>

     <text>{{item.text}}</text>

   </view>

 </view>

 <view class='servicePanel'>

   <view class='serviceTitle'>腾讯服务</view>

   <view class='serviceBlocks'>

     <view class='box2' wx:for='{{array2}}'wx:key='array2_{{index}}'>

       <image src="{{item.icon}}"></image>

       <text>{{item.text}}</text>

     </view>

   </view>

 </view>

</view>

 

/* pages/index/index.wxss */

.container{

height: 100vh;
background-color: silver;
display: flex;
flex-direction: column;
}
.topPanel{
height: 300rpx;
background-color: #686F79;
display: flex;
flex-direction:row;
}
.servicePanel{
min-height: 600rpx;
background-color: white;
margin: 20rpx 0;
}
.serviceTitle{
padding:20rpx;
border: 1rpx solid silver;
font-size: 30rpx;
color: gray;
}
.serviceBlocks{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box1{
display: flex;
flex-direction: column;
align-items: center;
width: 33%;
height: 250rpx;

}
.box1 image{
width: 110rpx;
height: 110rpx;
margin: 20rpx;
}
.box1 text{
text-align: center;
color: white;
font-size: 35rpx;
}
.box2{
border:1rpx solid silver;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
width:33%;
height:230rpx;
box-sizing: border-box ;
}
.box2 image{
width: 90rpx;
height: 90rpx;
}
.box2 text {
font-size: 30rpx;
}

 

// pages/index/index.js
Page({

/**
* 页面的初始数据
*/
data: {
//面板1的九宫格数组
array1: [
{ icon: '/images/top/money.png', text: '收付款' },
{ icon: '/images/top/balance.png', text: '零钱\n0.00' },
{ icon: '/images/top/cards.png', text: '银行卡' },
],
//面板2的九宫格数组
array2: [
{ icon: '/images/service/cardRepay.png', text: '信用卡还款' },
{ icon: '/images/service/mobileTopup.png', text: '手机充值' },
{ icon: '/images/service/wealth.png', text: '理财通' },
{ icon: '/images/service/utilities.png', text: '生活缴费' },
{ icon: '/images/service/qqCoins.png', text: 'Q币充值' },
{ icon: '/images/service/publicService.png', text: '城市服务' },
{ icon: '/images/service/charity.png', text: '腾讯公益' },
{ icon: '/images/service/insurance.png', text: '保险服务' }
]
}

})

其他代码略。