第3章小程序框架

本章内容主要包含两个使用flex布局模型创建的小程序项目实例，一是仿微信“发现”页面创建列表布局小程序； 二是仿微信“钱包”页面创建九宫格布局小程序。





 学习使用flex布局模型和wx:for属性创建列表布局小程序； 
 学习使用flex布局模型和wx:for属性创建九宫格布局小程序。



3.1列表布局小程序



图31微信App“发现”页面真机截屏

微信App的“发现”页面是由若干个垂直排列的列表组成的，每个列表项均包含图标、文字和箭头符号，如图31所示。

本项目将使用flex布局模型和wx:for属性仿微信“发现”页面实现列表布局效果。


视频讲解

3.1.1项目创建
本项目创建选择空白文件夹wxDiscover，效果如图32所示。

单击“新建”按钮完成项目创建，然后准备手动创建页面配置文件。


视频讲解

3.1.2页面配置
1  创建页面文件

项目创建完毕后，在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为index，表示小程序运行的第一个页面； 其他页面名称可以自定义。本项目只需要保留首页（index）即可。
具体操作如下： 


图32小程序项目填写效果示意图

(1) 将app.json文件内pages属性中的“pages/logs/logs”删除，并删除上一行末尾的逗号。
(2) 按快捷键Ctrl+S保存当前修改。
2  删除和修改文件
具体操作如下： 




(1) 删除utils文件夹及其内部所有内容。
(2) 删除pages文件夹下的logs目录及其内部所有内容。
(3) 删除index.wxml和index.wxss中的全部代码。
(4) 删除index.js中的全部代码，并且输入关键词page找到第二个选项按回车键让其自动补全函数(如图33所示)。


图33输入关键词创建Page函数

(5) 删除app.wxss中的全部代码。
(6) 删除app.js中的全部代码，并且输入关键词app找到第一个选项按回车键让其自动补全函数(如图34所示)。


图34输入关键词创建App函数

3  创建其他文件
接下来创建其他自定义文件，本项目还需要一个文件夹用于存放图标素材。文件夹名称由开发者自定义(例如images)，单击
目录结构左上角的+号创建文件夹并命名为images。
本项目将用到8个列表项图标和1个通用箭头图标，图片素材如图35所示。


图35图标素材展示

右击目录结构中的images文件夹，选择“硬盘打开”，将图片复制、粘贴进去。


图36页面文件创建完成

全部完成后的目录结构如图36所示。
此时文件配置就全部完成，3.1.3节将正式进行页面布局和样式设计。


视频讲解

3.1.3视图设计
1  导航栏设计


小程序默认导航栏就是黑底白字的效果，因此只需要在index.json中自定义导航栏标题即可。更改后的index.json文件代码如下： 

1.{

2."navigationBarTitleText": "发现"

3.}

上述代码可以更改当前页面的导航栏标题文本为“发现”，


视频讲解

效果如图37所示。


2  页面设计
页面上主要包含5组列表，每组列表包含1~2个列表项，具体内容解释如下。
 列表组1： “朋友圈”单行列表项； 
 列表组2： “扫一扫”和“摇一摇”两行列表项； 
 列表组3： “看一看”和“搜一搜”两行列表项； 
 列表组4： “购物”和“游戏”两行列表项； 


图37自定义导航栏效果

 列表组5： “小程序”单行列表项。

每个列表组之间需要有一定的间隔距离，设计图如图38所示。
计划使用如下组件。
 页面整体： <view>组件，并定义class='container'； 
 列表组： <view>组件，并定义class='listGroup'； 
 列表项单行： <view>组件，并定义class='listItem'； 
 列表图标： <image>（图像）组件； 
 列表文字内容： <text>（文本）组件； 
 箭头图标： <image>（图像）组件。
首先定义页面容器（<view>），WXML(pages/index/index.wxml)代码片段如下： 

1.<view class='container'>

2.</view>

WXSS(pages/index/index.wxss)代码片段如下： 

1./*背景容器样式*/

2..container{

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

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

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

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

7.}

当前效果如图39所示。


图38页面设计图



图39当前页面预览效果

由图可见，此时整个页面背景变成了银色。由于还没添加组件元素，所以尚看不出来flex布局模型效果。
接下来以第一个列表选项为例，WXML(pages/index/index.wxml)代码片段修改如下： 

1.<view class='container'>


2.<view class='listGroup'>

3.<view class='listItem'>

4.<image src='/images/moments.png'></image>

5.<text>朋友圈</text>

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

7.</view>

8.</view>

9.</view>

WXSS(pages/index/index.wxss)代码片段如下： 

1./*列表组样式*/

2..listGroup{

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

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

5.}

6./*列表项单行样式*/

7..listItem{

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

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

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

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

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

13.}

14./*图标的尺寸*/

15.image{

16.width: 80rpx;/*宽度*/

17.height: 80rpx;/*高度*/

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



图310当前页面预览效果

19.}

20./*文本样式*/

21.text{

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

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

24.}

当前效果如图310所示。

由图可见，此时可以显示第一个列表组的内容。用同样的方式追加后续的列表组即可实现完整效果。当然也可以暂时不追加其他列表项，使用3.1.4节介绍的方法减少工作量。


视频讲解

3.1.4逻辑实现
1  使用动态数据展示列表

由于所有列表项的内容布局都是统一的，可以考虑使用wx:for属性配合动态数组渲染全部列表项，以减少WXML页面的代码量。
修改WXML(pages/index/index.wxml)页面代码如下： 

1.<view class='container'>

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

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

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

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

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

7.</view>

8.</view>

9.</view>

上述代码表示将使用双重wx:for属性循环显示全部列表项，其中{{list}}数组用于表示5个列表组，


视频讲解

并为每个列表组起了别名group； 每个列表项也起了别名row，列表项的图标和文本分别命名为icon、text。这里均为自定义名称，开发者可以自行更改。
2  补充数组完整信息
在index.js的data属性中添加list数组，JS文件(pages/index/index.js)代码如下： 

1.Page({

2.data: {

3.list: ［

4.//第1组列表

5.［{ text: '朋友圈', icon: '/images/moments.png' }］,

6.//第2组列表

7.［

8.{ text: '扫一扫', icon: '/images/scan.png' },

9.{ text: '摇一摇', icon: '/images/shake.png' }

10.］,



图311最终效果图


11.//第3组列表

12.［

13.{ text: '看一看', icon: '/images/topStories.png' },


14.{ text: '搜一搜', icon: '/images/search.png' }


15.］,

16.//第4组列表


17.［

18.{ text: '购物', icon: '/images/shopping.png' },

19.{ text: '游戏', icon: '/images/games.png' }

20.］,

21.//第5组列表

22.［{ text: '小程序', icon: '/images/miniProgram.png' }］


23.］

24.}

25.})

此时就已全部完成，保存后重新预览项目，最终效果图如图311所示。

3.1.5完整代码展示
app.json文件的完整代码如下： 

1.{

2."pages": ［

3."pages/index/index"

4.］

5.}

JSON文件(pages/index/index.json)的完整代码如下： 

1.{

2."navigationBarTitleText": "发现"

3.}

WXML文件(pages/index/index.wxml)的完整代码如下： 

1.<view class='container'>

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

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

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

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

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

7.</view>

8.</view>

9.</view>

WXSS文件(pages/index/index.wxss)的完整代码如下： 

1./*背景容器样式*/

2..container{

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

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

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

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

7.}

8./*列表组样式*/

9..listGroup{

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

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

12.}

13./*列表项单行样式*/

14..listItem{

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

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

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

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

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

20.}

21./*图标的尺寸*/

22.image{

23.width: 80rpx;/*宽度*/

24.height: 80rpx;/*高度*/

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

26.}

27./*文本样式*/

28.text{

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

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

31.}

JS文件(pages/index/index.js)的完整代码如下： 

1.Page({

2.data: {

3.list: ［

4.//第1组列表

5.［{ text: '朋友圈', icon: '/images/moments.png' }］,

6.//第2组列表

7.［

8.{ text: '扫一扫', icon: '/images/scan.png' },

9.{ text: '摇一摇', icon: '/images/shake.png' }

10.］,

11.//第3组列表

12.［

13.{ text: '看一看', icon: '/images/topStories.png' },

14.{ text: '搜一搜', icon: '/images/search.png' }

15.］,

16.//第4组列表

17.［

18.{ text: '购物', icon: '/images/shopping.png' },

19.{ text: '游戏', icon: '/images/games.png' }

20.］,

21.//第5组列表

22.［{ text: '小程序', icon: '/images/miniProgram.png' }］

23.］

24.}

25.})

3.2九宫格布局小程序



图312微信App“钱包”页面真机截屏

微信App“钱包”页面主要分为上、下两个部分，上面是由“收付款”“零钱”和“银行卡”组成的钱包状态栏，下面是由九宫格组成的“腾讯服务”栏，每个格子里面包含图标和下方的文字说明，如图312所示。

本项目将使用flex布局模型和wx:for属性仿微信“钱包”页面实现九


视频讲解

宫格布局效果。
3.2.1项目创建
本项目创建选择空白文件夹wxWallet，效果如图313所示。


图313小程序项目填写效果示意图


单击“新建”按钮完成项目创建，然后准备手动创建页面配置文件。


视频讲解

3.2.2页面配置
1  创建页面文件

项目创建完毕后，在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为index，表示小程序运行的第一个页面； 其他页面名称可以自定义。本项目只需要保留首页（index）即可。
具体操作如下： 
（1） 将app.json文件内pages属性中的“pages/logs/logs”删除，并删除上一行末尾的逗号。
（2） 按快捷键Ctrl+S保存当前修改。
2  删除和修改文件
具体操作如下： 
（1） 删除utils文件夹及其内部所有内容。
（2） 删除pages文件夹下的logs目录及其内部所有内容。
（3） 删除index.wxml和index.wxss中的全部代码。
（4） 删除index.js中的全部代码，并且输入关键词page找到第二个选项按回车键让其自动补全函数(如图314所示)。 
（5） 删除app.wxss中的全部代码。


图314输入关键词创建Page函数

（6） 删除app.js中的全部代码，并且输入关键词app找到第一个选项按回车键让其自动补全函数(如图315所示)。



图315输入关键词创建App函数

3  创建其他文件
接下来创建其他自定义文件，本项目还需要一个文件夹用于存放图标素材。文件夹名称由开发者自定义(例如images)，单击
目录结构左上角的+号创建文件夹并命名为images。
由于本项目用到的图标素材较多，将在images文件夹下分为两个二级目录放置。
 top： 顶端钱包状态栏的图标共3个，如图316所示。


图316顶端钱包状态栏图标素材展示

 service： “腾讯服务”栏的九宫格图标共8个，如图317所示。


图317“腾讯服务”栏图标素材展示


右击目录结构中的images文件夹,选择“硬盘打开”，将二级目录和对应的图标文件全部复制、粘贴进去。完成后的目录结构如图318所示。

此时文件配置就全部完成，3.2.3节将正式进行页面布局和样式设计。


视频讲解

3.2.3视图设计
1  导航栏设计

小程序默认导航栏是黑底白字的效果，因此需要在index.json中自定义导航栏标题和背景颜色。更改后的index.json文件代码如下： 

1.{

2."navigationBarTitleText": "钱包",

3."navigationBarBackgroundColor":"#686F79"

4.}

上述代码可以更改当前页面的导航栏标题文本为“钱包”、背景颜色为灰色(#686F79)。
预览效果如图319所示。


图318页面文件创建完成



图319自定义导航栏效果


2  页面设计
页面上主要包含两个面板，具体内容解释如下。
 面板1(顶端钱包状态栏)： 包含“收付款”“零钱”和“银行卡”3个方格，每个方格中均有图标、文本，其中“零钱”还包括第二行副文本。
 面板2(“腾讯服务”栏)： 包含第一行标题和下方的九宫格区域，其中共有8个方格有内容，包括图标和文本。
注意，面板之间需要有一定的间隔距离，设计图如图320所示。

计划使用如下组件。
 页面整体： <view>组件，并定义class='container'； 
 面板1： <view>组件，并定义class='topPanel'； 
 面板1方格： <view>组件，并定义class='box1'； 
 面板2： <view>组件，并定义class='servicePanel'； 


 面板2标题： <view>组件，并定义class='serviceTitle'； 

 面板2九宫格区域： <view>组件，并定义class='serviceBlocks'； 

  面板2方格： <view>组件，并定义class='box2'； 
 方格内图标： <image>（图像）组件； 
 方格内文字内容： <text>（文本）组件。



视频讲解

1) 整体布局设计
首先定义页面容器（<view>），WXML(pages/index/index.wxml)代码片段如下： 

1.<view class='container'>

2.</view>

WXSS(pages/index/index.wxss)代码片段如下： 

1./*1 背景容器样式*/

2..container{

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

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

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

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

7.}

当前效果如图321所示。


图320页面设计图



图321当前页面预览效果


由图可见，此时整个页面背景变成了银色。由于还没添加组件元素，所以尚看不出来flex布局模型效果。
然后继续添加两个面板组件，WXML(pages/index/index.wxml)代码片段修改如下： 



1.<view class='container'>

2.<view class='topPanel'>

3.</view>

4.<view class='servicePanel'>

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

6.<view class='serviceBlocks'></view>

7.</view>

8.</view>

WXSS(pages/index/index.wxss)代码片段如下： 

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

2..topPanel {

3.height: 300rpx;/*高度*/

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

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

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

7.}

8./*3 面板2： “腾讯服务”栏*/

9..servicePanel {

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

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

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

13.}

14./*3-1 面板2： 第一行标题样式*/

15..serviceTitle {

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

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

18.font-size: 30rpx;/*字号为30rpx大小*/

19.color: gray;/*字体颜色为灰色*/

20.}

21./*3-2 面板2： 九宫格区域样式*/

22..serviceBlocks {

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

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

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

26.}

当前效果如图322所示。


视频讲解


由图可见，此时可以显示两个面板的布局位置、背景颜色以及面板2的标题。
2) 面板1方格设计
接下来制作面板1的方格内容，以其中左边第一个方格“收付款”内容为例，WXML(pages/index/index.wxml)代码片段修改如下： 

1.<view class='container'>

2.<view class='topPanel'>

3.<view class='box1'>

4.<image src='/images/top/money.png'></image>

5.<text>收付款</text>

6.</view>


7.</view>

8.…

9.</view>

WXSS(pages/index/index.wxss)代码片段如下： 

1./*2-1 面板1： 方格样式*/

2..box1 {

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

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

5.align-items: center;/*水平方向居中*/

6.width: 33%;/*宽度约占屏幕的1/3*/

7.height: 250rpx;/*高度*/

8.}

9./*2-2 面板1： 方格内图标样式*/

10..box1 image{

11.width: 110rpx;/*宽度*/

12.height: 110rpx;/*高度*/

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

14.}

15./*2-3 面板1： 方格内文本样式*/

16..box1 text{

17.text-align: center;/*文本居中*/

18.color: white;/*字体颜色为白色*/

19.font-size: 35rpx;/*字号为35rpx大小*/

20.}

当前效果如图323所示。



图322当前页面预览效果




图323面板1预览效果

由图可见，此时可以显示面板1的“收付款”方格内容，包括图标和文本。用同样的方式追加其他方格即可实现完整效果。当然也可以暂时不追加，


视频讲解

使用3.2.4节介绍的方法减少工作量。
3) 面板2方格设计
接下来制作面板2的方格内容，以其中左边第一个方格“信用卡还款”内容为例，WXML(pages/index/index.wxml)代码片段修改如下： 


1.<view class='container'>

2.…

3.<view class='servicePanel'>

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

5.<view class='serviceBlocks'>

6.<view class='box2'>

7.<image src='/images/service/cardRepay.png'></image>

8.<text>信用卡还款</text>

9.</view>

10.</view>

11.</view>

12.</view>

WXSS(pages/index/index.wxss)代码片段如下： 

1./*3-2-1 面板2： 九宫格区域方格样式*/

2..box2 {

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

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

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

6.align-items: center;/*水平方向居中*/

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

8.width: 33%;/*宽度约占屏幕的1/3*/

9.height: 230rpx;/*高度230rpx*/

10.}

11./*3-2-2 面板2： 方格内图标*/

12..box2 image {

13.width: 90rpx;/*宽度*/

14.height: 90rpx;/*高度*/

15.}



图324面板2预览效果


16./*3-2-3 面板2： 方格内文本*/

17..box2 text {

18.font-size: 30rpx;/*字号为30rpx大小*/

19.}


当前效果如图324所示。


由图可见，此时可以显示面板2的“信用卡还款”方格内容。用同样的方式追加其他方格即可实现完整效果。
当然也可以暂时不追加，使用3.2.4节介绍的方法减少工作量。


视频讲解

3.2.4逻辑实现
1  面板1的逻辑实现

1) 使用动态数据展示方格
由于所有方格的内容布局都是统一的，可以考虑使用wx:for属性配合动态数组渲染全部列表项，以减少WXML页面的代码量。
修改WXML(pages/index/index.wxml)页面代码如下： 

1.<view class='container'>

2.<view class='topPanel'>

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

4.<image src='{{item.icon}}'></image>

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

6.</view>

7.</view>

8.…

9.</view>

上述代码表示使用wx:for属性循环显示全部方格，其中{{array1}}数组用于表示3个方格，方格区域中的图标和文本分别命名为icon、text。这里均为自定义名称，开发者可以自行


视频讲解

更改。
2) 补充数组完整信息
在index.js的data属性中添加array1数组，JS文件(pages/index/index.js)代码如下： 

1.Page({

2.data: {

3.//面板1的九宫格数组

4.array1: ［

5.{ icon: '/images/top/money.png', text: '收付款' },

6.{ icon: '/images/top/balance.png', text: '零钱＼n0.00' },

7.{ icon: '/images/top/cards.png', text: '银行卡' },

8.］

9.}

10.})



视频讲解

当前效果如图325所示。
2  面板2的逻辑实现
1) 使用动态数据展示方格
接下来继续使用wx:for属性配合动态数组渲染全部列表项，以减少WXML页面的代码量。
修改WXML(pages/index/index.wxml)页面代码如下： 

1.<view class='container'>

2.…

3.<view class='servicePanel'>

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

5.<view class='serviceBlocks'>

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

7.<image src='{{item.icon}}'></image>

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

9.</view>

10.</view>

11.</view>

12.</view>


上述代码表示使用wx:for属性循环显示全部方格，其中{{array2}}数组用于表示8个方格，方格区域中的图标和文本分别命名为icon、text。这里均为自定义名称，开发者可以自行更


视频讲解

改。
2) 补充数组完整信息
在index.js的data属性中添加array2数组，JS文件(pages/index/index.js)代码如下： 

1.Page({

2.data: {

3.//面板1的九宫格数组

4. …,

5.//面板2的九宫格数组

6.array2: ［

7.{ icon: '/images/service/cardRepay.png', text: '信用卡还款' },

8.{ icon: '/images/service/mobileTopup.png', text: '手机充值' },

9.{ icon: '/images/service/wealth.png', text: '理财通' },

10.{ icon: '/images/service/utilities.png', text: '生活缴费' },

11.{ icon: '/images/service/qqCoins.png', text: 'Q币充值' },

12.{ icon: '/images/service/publicService.png', text: '城市服务' },

13.{ icon: '/images/service/charity.png', text: '腾讯公益' },

14.{ icon: '/images/service/insurance.png', text: '保险服务' }

15.］

16.}

17.})

此时就已全部完成，保存后重新预览项目，最终效果图如图326所示。


图325面板1预览效果



图326最终效果图

3.2.5完整代码展示
app.json文件的完整代码如下： 

1.{

2."pages": ［

3."pages/index/index"

4.］

5.}

JSON文件(pages/index/index.json)的完整代码如下： 

1.{

2."navigationBarTitleText": "钱包",

3."navigationBarBackgroundColor":"#686F79"

4.}

WXML文件(pages/index/index.wxml)的完整代码如下： 

1.<view class='container'>

2.<view class='topPanel'>

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

4.<image src='{{item.icon}}'></image>

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

6.</view>

7.</view>

8.<view class='servicePanel'>

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

10.<view class='serviceBlocks'>

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

12.<image src='{{item.icon}}'></image>

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

14.</view>

15.</view>

16.</view>

17.</view>

WXSS文件(pages/index/index.wxss)的完整代码如下： 

1./*1 背景容器样式*/

2..container {

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

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

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

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

7.}

8.

9./*2 面板1： 顶端状态栏*/

10..topPanel {

11.height: 300rpx;/*高度*/

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

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

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

15.}

16./*2-1 面板1： 方格样式*/

17..box1 {

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

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

20.align-items: center;/*水平方向居中*/

21.width: 33%;/*宽度约占屏幕的1/3*/

22.height: 250rpx;/*高度*/

23.}

24./*2-2 面板1： 方格内图标样式*/

25..box1 image{

26.width: 110rpx;/*宽度*/

27.height: 110rpx;/*高度*/

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

29.}

30./*2-3 面板1： 方格内文本样式*/

31..box1 text{

32.text-align: center;/*文本居中*/

33.color: white;/*字体颜色为白色*/

34.font-size: 35rpx;/*字号为35rpx大小*/

35.}

36.

37./*3 面板2： “腾讯服务”栏*/

38..servicePanel {

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

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

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

42.}

43./*3-1 面板2： 第一行标题样式*/

44..serviceTitle {

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

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

47.font-size: 30rpx;/*字号为30rpx大小*/

48.color: gray;/*字体颜色为灰色*/

49.}

50./*3-2 面板2： 九宫格区域样式*/

51..serviceBlocks {

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

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

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

55.}

56./*3-2-1 面板2： 九宫格区域方格样式*/

57..box2 {

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

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

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

61.align-items: center;/*水平方向居中*/

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

63.width: 33%;/*宽度约占屏幕的1/3*/

64.height: 230rpx;/*高度230rpx*/

65.}

66./*3-2-2 面板2： 方格内图标*/

67..box2 image {

68.width: 90rpx;/*宽度*/

69.height: 90rpx;/*高度*/

70.}

71./*3-2-3 面板2： 方格内文本*/

72..box2 text {

73.font-size: 30rpx;/*字号的30rpx大小*/

74.}

JS文件(pages/index/index.js)的完整代码如下： 

1.Page({

2.data: {

3.//面板1的九宫格数组

4.array1: ［

5.{ icon: '/images/top/money.png', text: '收付款' },

6.{ icon: '/images/top/balance.png', text: '零钱＼n0.00' },

7.{ icon: '/images/top/cards.png', text: '银行卡' },

8.］,

9.//面板2的九宫格数组

10.array2: ［

11.{ icon: '/images/service/cardRepay.png', text: '信用卡还款' },

12.{ icon: '/images/service/mobileTopup.png', text: '手机充值' },

13.{ icon: '/images/service/wealth.png', text: '理财通' },

14.{ icon: '/images/service/utilities.png', text: '生活缴费' },

15.{ icon: '/images/service/qqCoins.png', text: 'Q币充值' },

16.{ icon: '/images/service/publicService.png', text: '城市服务' },

17.{ icon: '/images/service/charity.png', text: '腾讯公益' },

18.{ icon: '/images/service/insurance.png', text: '保险服务' }

19.］

20.}

21.})