简单页面制作

  

学习目标：1.学习margin与padding的区别。

1. 了解微信小程序的常见的页面制作思路。

1.1 margin与padding的区别

Margin和padding都有边距的含义。但是margin指的是外边距，即不同元素之间的距离；padding指的是内边距，即当前元素内容在文本的位置。将其可视化，如图1-1所示。

图1-1margin与padding平面示意图

2.1列表布局页面制作思路

（1）列表布局页面基本框架如下图2-1所示。

2-1列表布局页面基本框架示意图

1. 源码展示

App.json的完整代码如下：

{

  "pages":[

    "pages/index/index"

  ]

}

Pages/index/index.json的完整代码如下：

{

  "navigationBarTitleText": "发现"

}

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>

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

      <image src='/image/色.png'></image>

    </view>

  </view>

</view>

pages/index/index.wxss的完整代码如下：

/*背景容器样式*/

.container{

height: 100vh; /*高度为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; /*字体大小*/

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

}

1. 效果展示，如图2-2所示。

图2-2 列表布局页面效果图

2.2九宫格布局页面制作思路

1. 九宫格布局页面基本框架如下图2-3所示。

图2-3 九宫格布局页面基本框架示意图

1. 源码展示

App.json的完整代码如下：

{

  "pages":[

    "pages/index/index"

  ]

}

pages/index/index.json的完整代码如下：

{

  "navigationBarTitleText": "钱包",

  "navigationBarBackgroundColor": "#686F79"

}

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="array_{{index}}">

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

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

      </view>

    </view>

  </view>

</view>

Pages/index/index.wxss的完整代码如下：

/*背景容器样式*/

.container{                       

  height: 100vh;                /*高度为100%的视窗*/

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

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

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

}

/*面板1：顶端状态栏*/

.topPanel{

  height: 300rpx; /*高度*/

  background-color: #686F79; /*背景颜色为灰色*/

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

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

}

/*面板1：方格样式*/

.box1{

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

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

  align-items: center; /*项目水平居中*/

  width: 33%; /*宽度占比33%*/

  height: 250rpx; /*高度*/

}

/*面板1：方格内图标样式*/

.box1 image{

  width: 110rpx; /*宽度*/

  height: 110rpx; /*高度*/

  margin: 20rpx; /*四周外边距均为20rpx*/

}

/*面板1：方格内文本样式*/

.box1 text{

  text-align: center; /*文本水平居中*/

  color: white; /*文本颜色*/

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

}

/*面板2：“服务”栏*/

.servicePanel{

  min-height: 600rpx; /*最小高度*/

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

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

}

/*面板2：第一行标题样式*/

.serviceTitle{

  padding: 20rpx; /*四周内边距20rpx*/

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

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

  color: gray; /*字体颜色*/

}

/*面板2：九宫格区域样式*/

.serviceBlocks{

  display: flex; /*flex布局*/

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

  flex-wrap: wrap; /*允许换行*/

}

/*面板2：九宫格区域方格样式*/

.box2{

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

  display: flex; /*flex布局*/

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

  align-items: center; /*项目水平居中*/

  justify-content: center; /*垂直方向居中*/

  width: 32.9%; /*宽度*/

  height: 230rpx; /*高度*/

}

/*面板2：方格内图标*/

.box2 image{

  width: 90rpx; /*宽度*/

  height: 90rpx; /*高度*/

}

/*面板2：方格内文本*/

.box2 text{

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

}

Pages/index/index.js的完整代码如下：

Page({

  data:{

//面板一的九宫格数组

    array1:[

     {icon:'/image/钱包.png',text:'收付款'},

     {icon:'/image/理财.png',text:'零钱\n18.88'},

     {icon:'/image/信用卡.png',text:'银行卡'},

],

//面板二的九宫格数组

    array2:[

      {icon:'/image/哭闹.png',text:'哭闹'},

      {icon:'/image/微笑.png',text:'微笑'},

      {icon:'/image/流汗.png',text:'流汗'},  

      {icon:'/image/色.png',text:'色'},

      {icon:'/image/发呆.png',text:'发呆'},

      {icon:'/image/矜持.png',text:'矜持'},

      {icon:'/image/哭.png',text:'哭'},

      {icon:'/image/惊讶.png',text:'惊讶'},

      {icon:'/image/去世.png',text:'去世'}

    ]

  }

})

1. 效果展示，如下图2-4所示。

2-4 九宫格布局页面效果图

 

参考资料：微信小程序开发实战：微课视频版/周文洁著