注意：本文原創(chuàng)脓钾，轉(zhuǎn)載請(qǐng)注明出處稚铣。歡迎關(guān)注我的 簡(jiǎn)書 攘滩。

本文通過一個(gè)實(shí)際例子腰埂，來講解如何進(jìn)行微信小程序的頁(yè)面搭建耕肩。首先看一下本文要實(shí)現(xiàn)的頁(yè)面效果：

ezgif-978895762.gif

開發(fā)工具下載

微信官方有開發(fā)者工具八孝，集成了開發(fā)調(diào)試插掂、代碼編輯及程序發(fā)布等功能应役。 下載地址

微信小程序架構(gòu)

Paste_Image.png

這個(gè)就是程序的基本架構(gòu)。最關(guān)鍵也是必不可少的燥筷，是 app.js箩祥、app.json、app.wxss 這三個(gè)肆氓。其中袍祖，.js后綴的是腳本文件，.json后綴的文件是配置文件谢揪，.wxss后綴的是樣式表文件蕉陋。

底部標(biāo)簽

底部標(biāo)簽是一個(gè)tabBar。實(shí)現(xiàn)比較簡(jiǎn)單拨扶，只需要簡(jiǎn)單配置一下即可凳鬓。 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 接受一個(gè)數(shù)組患民，每一項(xiàng)都是字符串缩举，來指定小程序由哪些頁(yè)面組成。每一項(xiàng)代表對(duì)應(yīng)頁(yè)面的【路徑+文件名】信息匹颤，數(shù)組的第一項(xiàng)代表小程序的初始頁(yè)面仅孩。小程序中新增/減少頁(yè)面，都需要對(duì) pages 數(shù)組進(jìn)行修改印蓖。
文件名不需要寫文件后綴辽慕，因?yàn)榭蚣軙?huì)自動(dòng)去尋找路徑.json, .js , .wxml, .wxss的四個(gè)文件進(jìn)行整合。

頁(yè)面標(biāo)題

Paste_Image.png

這個(gè)標(biāo)題如何實(shí)現(xiàn)赦肃？ 我們翻看一下官方文檔溅蛉。

Paste_Image.png

Paste_Image.png

原來如此！我們只需要把所有頁(yè)面通用的配置放在 page.json堕汞，然后在各個(gè)page的 .json文件里面配置每個(gè)頁(yè)面特有的屬性即可勺爱。因?yàn)樵谏厦娴?app.json 中已經(jīng)配置了通用頁(yè)面的 window屬性了晃琳，我們只需要在function.json中配置頁(yè)面標(biāo)題即可：

   {
     "navigationBarTitleText": "功能"   
   }

輪播圖

接下來實(shí)現(xiàn)頂部的輪播圖讯检。微信提供了一個(gè)swiper組件來實(shí)現(xiàn)輪播圖琐鲁。

Paste_Image.png

代碼也就出來了：function.wxml

<swiper indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
</swiper>

function.js

//function.js
Page({
  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'
     ],  
  },
})

沒錯(cuò)，微信小程序的輪播圖就是這么簡(jiǎn)單人灼！在這里可能有的同學(xué)要問了：“輪播圖的圖片用的是url地址围段，如果我想用本地的圖片呢？能不能實(shí)現(xiàn)投放？ ”

這個(gè)官方文檔沒有介紹奈泪，兔子哥經(jīng)過測(cè)試，是可以實(shí)現(xiàn)的灸芳。代碼如下：

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

中間功能模塊

中間的8個(gè)功能模塊涝桅，類似Android的GridView效果。本文采取循環(huán)的方式來實(shí)現(xiàn)：function.wxml

  <view class='function_container'>
    <view class='function_item' wx:for="{{functions}}" wx:for-index="idx" wx:for-item="function">
        <image class='function_img' src='{{function.pic_url}}'/> 
        <view class='function_name'>{{function.name}}</view>
    </view>
  </view>

function.js

functions: [
      {
        "name": "刷卡消費(fèi)",
        "pic_url": '../../images/icon_consume.png'
      },
      {
        "name": "提現(xiàn)",
        "pic_url": '../../images/icon_withdrawals.png'
      },
      {
        "name": "交易記錄",
        "pic_url": '../../images/icon_records.png'
      },
      {
        "name": "實(shí)名認(rèn)證",
        "pic_url": '../../images/icon_auth.png'
      },
      {
        "name": "飛機(jī)票",
        "pic_url": '../../images/icon_airplane.png'
      },
      {
        "name": "火車票",
        "pic_url": '../../images/icon_train.png'
      },
      {
        "name": "手機(jī)充值",
        "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
}

這里通過width:25% 來實(shí)現(xiàn)每行排列四個(gè)功能按鈕的效果烙样。

完整代碼

下面的布局就比較簡(jiǎn)單了冯遂，直接上完整的代碼了：
function.wxml

<!--function.wxml-->
<scroll-view scroll-y="true" class="container">
  <swiper indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>

  <view class='function_container'>
    <view class='function_item' wx:for="{{functions}}" wx:for-index="idx" wx:for-item="function">
        <image class='function_img' src='{{function.pic_url}}'/> 
        <view class='function_name'>{{function.name}}</view>
    </view>
  </view>

  <view class='divider' />

  <view class='specialities_layout'>
      <view class='view_divider' />
      <text class="specialities_text">特色業(yè)務(wù)</text>
  </view>
  <image class='bottom-image' src='../../images/app_banner.jpg'/> 
</scroll-view>

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
}
.divider{
    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_divider{
    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
//獲取應(yīng)用實(shí)例
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": "刷卡消費(fèi)",
        "pic_url": '../../images/icon_consume.png'
      },
      {
        "name": "提現(xiàn)",
        "pic_url": '../../images/icon_withdrawals.png'
      },
      {
        "name": "交易記錄",
        "pic_url": '../../images/icon_records.png'
      },
      {
        "name": "實(shí)名認(rèn)證",
        "pic_url": '../../images/icon_auth.png'
      },
      {
        "name": "飛機(jī)票",
        "pic_url": '../../images/icon_airplane.png'
      },
      {
        "name": "火車票",
        "pic_url": '../../images/icon_train.png'
      },
      {
        "name": "手機(jī)充值",
        "pic_url": '../../images/icon_phone_recharge.png'
      },
      {
        "name": "水電煤",
        "pic_url": '../../images/icon_water.png'
      }
    ]
  },
  //事件處理函數(shù)
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
    app.getUserInfo(function (userInfo) {
      //更新數(shù)據(jù)
      that.setData({
        userInfo: userInfo
      })
      that.update()
    })
  }
})