本文使用一个实际示例来说明如何构建微信小程序的页面。首先看一下本文要实现的页面效果：

开发工具下载

微信有一些官方开发人员工具集成了开发和调试，代码编辑和程序发布等功能。下载链接

微信小程序体系结构

这是程序的基本结构。最关键和必不可少的是app.js，app.json和app.wxss。其中，.js后缀是脚本文件，.json后缀是配置文件，.wxss后缀是样式表文件。

底部标签

底部标签是tabBar。实现是相对简单的，只是一个简单的配置。 app.json

{ "pages":[ "pages/function/function", "pages/pay/pay", "pages/account/account", "pages/index/index", "pages/logs/logs" ], "tabBar":{ "color": "#464a56", "selectedColor": "#6595e9", "backgroundColor": "#FFFFFF", "borderStyle": "white", "list": [{ "pagePath": "pages/function/function", "text": "功能", "iconPath": "images/tab_function_default.png", "selectedIconPath": "images/tab_function_sel.png" },{ "pagePath": "pages/pay/pay", "text": "收款", "iconPath": "images/tab_consume_default.png", "selectedIconPath": "images/tab_consume_sel.png" },{ "pagePath": "pages/account/account", "text": "账户", "iconPath": "images/tab_account_default.png", "selectedIconPath": "images/tab_account_sel.png" }] }, "window":{ "navigationBarBackgroundColor": "#6595e9", "navigationBarTextStyle":"white", "navigationBarTitleText": "V50", "backgroundColor": "#eeeeee", "backgroundTextStyle":"light" }}

值得注意的是，页面接受一个数组，每个项目都是一个字符串，以指定小程序组成的页面。每一项代表相应页面的[路径+文件名]信息，数组的第一项代表小程序的初始页面。在小程序中添加/减少页面需要修改pages数组。

文件名不需要写文件后缀，因为框架会自动找到.json，.js，.wxml，.wxss这四个文件的路径进行集成。

页面标题

如何获得此头衔？让我们看一下官方文档。

看到这一点，您应该知道需要在指定页面的json文件中配置页面。继续检查官方文档

就是这样！我们只需要将所有页面的通用配置放在page.json中，然后在每个页面的.json文件中配置每个页面的唯一属性。因为常规页面的window属性已在上述app.json中配置，所以我们只需要在function.json中配置页面标题：

{ "navigationBarTitleText": "功能" }

轮播图片

接下来，在顶部实施轮播。 微信提供了滑动器组件来实现轮播图。

代码也已发布：function.wxml

indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> wx:for="{{imgUrls}}"> src="{{item}}" /> function.js//function.jsPage({ data: { indicatorDots: true, autoplay: true, interval: 5000, duration: 1000, imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ], },})

是的，微信小程序的轮播就这么简单！这里的一些学生可能会问：“轮播图片的图片使用url地址。如果我想使用本地图片怎么办？可以实现吗？”

此正式文档中没有介绍。经过测试，可以实现Brother Brother。代码如下：

imgUrls: [ '../../images/adv_50.png', '../../images/adv_60.png', '../../images/adv_80.png' ],

中间功能模块

中间的8个功能模块类似于Android的GridView效果。本文采用一种循环方式来实现：function.wxml

class='function_container'> class='function_item' wx:for="{{functions}}" wx:for-index="idx" wx:for-item="function"> class='function_img' src='{{function.pic_url}}'/> class='function_name'>{{function.name}} function.jsfunctions: [ { "name": "刷卡消费", "pic_url": '../../images/icon_consume.png' }, { "name": "提现", "pic_url": '../../images/icon_withdrawals.png' }, { "name": "交易记录", "pic_url": '../../images/icon_records.png' }, { "name": "实名认证", "pic_url": '../../images/icon_auth.png' }, { "name": "飞机票", "pic_url": '../../images/icon_airplane.png' }, { "name": "火车票", "pic_url": '../../images/icon_train.png' }, { "name": "手机充值", "pic_url": '../../images/icon_phone_recharge.png' }, { "name": "水电煤", "pic_url": '../../images/icon_water.png' } ]function.wxss/**function.wxss**/.container { height: 650px;}.slide-image{ display: block; height: 280rpx; width:100%}.function_container{ display:flex; flex-wrap: wrap; width:100%;}.function_item{ width:25%; display:flex; flex-direction:column; justify-content:center; align-items:center; font-size:12px; box-sizing:border-box; padding-bottom:10px; padding-top:10px}.function_img{ width:60px; height:60px;}.function_name{ padding-top:10px}

此处，宽度：25％用于实现在每行中排列四个功能按钮的效果。

完整代码

下面的布局相对简单，直接在完整的代码上：function.wxml

scroll-y="true" > indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> wx:for="{{imgUrls}}"> src="{{item}}" /> class='function_container'> class='function_item' wx:for="{{functions}}" wx:for-index="idx" wx:for-item="function"> class='function_img' src='{{function.pic_url}}'/> class='function_name'>{{function.name}} class='pider' /> class='specialities_layout'> class='view_pider' /> >特色业务 class='bottom-image' src='../../images/app_banner.jpg'/> function.wxss/**function.wxss**/.container { height: 650px;}.slide-image{ display: block; height: 280rpx; width:100%}.function_container{ display:flex; flex-wrap: wrap; width:100%;}.function_item{ width:25%; display:flex; flex-direction:column; justify-content:center; align-items:center; font-size:12px; box-sizing:border-box; padding-bottom:10px; padding-top:10px}.function_img{ width:60px; height:60px;}.function_name{ padding-top:10px}.pider{ background: #f5f5f5; height: 40rpx; width:100%;}.specialities_layout{ display:flex; flex-wrap: wrap; width:100%; flex-direction:row; margin-left: 16px; margin-top:16px; margin-bottom: 16px;}.view_pider{ background: #EEA9B8; height: 40rpx; width:10rpx;}.specialities_text { margin-left: 8px; font-size: 16px; height: auto; width:auto; margin-top: 6rpx;}.bottom-image{ height: 280rpx; width:100%;}.Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;}function.js//function.js//获取应用实例var app = getApp()Page({ data: { userInfo: {}, indicatorDots: true, autoplay: true, interval: 5000, duration: 1000, // imgUrls: [ // 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', // 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', // 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' // ], imgUrls: [ '../../images/adv_50.png', '../../images/adv_60.png', '../../images/adv_80.png' ], functions: [ { "name": "刷卡消费", "pic_url": '../../images/icon_consume.png' }, { "name": "提现", "pic_url": '../../images/icon_withdrawals.png' }, { "name": "交易记录", "pic_url": '../../images/icon_records.png' }, { "name": "实名认证", "pic_url": '../../images/icon_auth.png' }, { "name": "飞机票", "pic_url": '../../images/icon_airplane.png' }, { "name": "火车票", "pic_url": '../../images/icon_train.png' }, { "name": "手机充值", "pic_url": '../../images/icon_phone_recharge.png' }, { "name": "水电煤", "pic_url": '../../images/icon_water.png' } ] }, //事件处理函数 bindViewTap: function () { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function (userInfo) { //更新数据 that.setData({ userInfo: userInfo }) that.ｕｐｄａｔｅ() }) }})