然后就可以開(kāi)始開(kāi)發(fā)了！下面就按功能開(kāi)始學(xué)習(xí)了~

tabBar

先創(chuàng)建幾個(gè)頁(yè)面，要注意文件夾和頁(yè)面名稱(chēng)，以及app.json里面的配置。官方文檔描述的很詳細(xì)。
注意：為了方便開(kāi)發(fā)者減少配置項(xiàng)，描述頁(yè)面的四個(gè)文件必須具有相同的路徑與文件名。
創(chuàng)建一個(gè)放圖片的文件夾，放上幾張tabBar小圖標(biāo)。

在app.json中寫(xiě)tanBar的配置，tabBar與pages、window同級(jí)。

  "tabBar":{
    "color": "#ddd",
    "selectedColor": "#1AAD00",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list":[
      {
        "pagePath": "pages/index/index",
       "iconPath": "images/footer-icon-01.png",
      "selectedIconPath": "images/footer-icon-01-active.png",
        "text": "首頁(yè)"
      },
      {
        "pagePath": "pages/find/find",
        "iconPath": "images/footer-icon-03.png",
        "selectedIconPath": "images/footer-icon-03-active.png",
        "text": "發(fā)現(xiàn)"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "images/footer-icon-04.png",
        "selectedIconPath": "images/footer-icon-04-active.png",
        "text": "我的"
      }
    ]
  }

編譯一下，tabBar就出現(xiàn)了~

輪播圖

使用微信提供的swiper控件，在頁(yè)面wxml中添加控件

  <view class="page-body">
    <view class="page-section page-section-spacing swiper">
      <swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <image src='{{item.url}}' class='slide-image' mode='aspectFill' ></image>
          </swiper-item>
        </block>
      </swiper>
    </view>
在wxss中設(shè)置樣式
.swiper {
 height: 400rpx;
 width: 100%;
}
.swiper image {
 height: 100%;
 width: 100%;
}

在js 中設(shè)置數(shù)據(jù)

  data: {
    background:[
      {url:'../../images/banner/banner1.jpeg'},
      { url: '../../images/banner/banner2.png' },
      { url: '../../images/banner/banner3.png' },
    ],
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 2000,
    duration: 500
  },

就這么簡(jiǎn)單，輪播圖就出現(xiàn)了，真的比iOS開(kāi)發(fā)簡(jiǎn)單多了-_-!

現(xiàn)在的樣子（直接從別人的項(xiàng)目摳來(lái)的圖標(biāo)，配色巨丑請(qǐng)忽略~）：

九宮格

九宮格功能上網(wǎng)查了幾種實(shí)現(xiàn)方式，發(fā)現(xiàn)還是直接用weui比較方便
下面是實(shí)現(xiàn)步驟：

.js中添加數(shù)據(jù)
Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    routers :[
      {
        text: '我的賬戶(hù)',
        icon: '../../images/mine/mine_account.png',
        url: '../myAccount/myAccount',
      },
      {
        text: '我的合同',
        icon: '../../images/mine/mine_contract.png',
        url: '../myAccount/myAccount',
      },
      {
        text: '瀏覽記錄',
        icon: '../../images/mine/mine_browing.png',
        url: '../myAccount/myAccount',
      },
      {
        text: '我要出租',
        icon: '../../images/mine/mine_lease.png',
        url: '../myAccount/myAccount',
      },
      {
        text: '客服',
        icon: '../../images/mine/mine_customService.png',
        url: '../myAccount/myAccount',
      },
      {
        text: '我的收藏',
        icon: '../../images/mine/mine_collect.png',
        url: '../myAccount/myAccount',
      }
    ] 
  },
})

.wxml中，添加weui-grids

<view class="weui-grids">  
    <view class="weui-grid" wx:for="{{routers}}" wx:key="name">  
      <navigator url="{{item.url}}">  
        <view class="weui-grid__icon">  
          <image src=" {{item.icon}}" mode="scaleToFill" />  
        </view>  
        <text class="weui-grid__label">{{item.text}}</text>  
      </navigator>  
    </view>  
  </view>  

wxss中設(shè)置樣式

.weui-grids {  
  position: relative;  
  overflow: hidden;  
   margin-top: 10rpx; 
}  
.weui-grids:before {  
  content: " ";  
  position: absolute;  
  left: 0;  
  top: 0;  
  right: 0;  
  height: 1px;  
  border-top: 1px solid #D9D9D9;  
  color: #D9D9D9;  
  -webkit-transform-origin: 0 0;  
          transform-origin: 0 0;  
  -webkit-transform: scaleY(0.5);  
          transform: scaleY(0.5);  
}  
.weui-grids:after {  
  content: " ";  
  position: absolute;  
  left: 0;  
  top: 0;  
  width: 1px;  
  bottom: 0;  
  border-left: 1px solid #D9D9D9;  
  color: #D9D9D9;  
  -webkit-transform-origin: 0 0;  
          transform-origin: 0 0;  
  -webkit-transform: scaleX(0.5);  
          transform: scaleX(0.5);  
}  
.weui-grid {  
  position: relative;  
  float: left;  
  padding: 20px 10px;  
  width: 33.33333333%;  
  box-sizing: border-box;  
  background-color: white;
}  
.weui-grid:before {  
  content: