今天開始學(xué)習(xí)小程序，按自己寫APP的順序開始，就不按微信官方文檔來了。
有些控件是結(jié)合官方和網(wǎng)上其他同學(xué)分享的代碼。

基礎(chǔ)概述

這一部分看官方網(wǎng)站，了解一下小程序的架構(gòu)頁面組成啥的，沒什么難度，打開微信開發(fā)者工具，創(chuàng)建一個QuickStart 項目就看到了。

下一步看一下官方的小程序demo，看看都有哪些功能樣式，這個跟開發(fā)文檔是對應(yīng)的。demo在這里：

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

tabBar

1. 先創(chuàng)建幾個頁面，要注意文件夾和頁面名稱，以及app.json里面的配置。官方文檔描述的很詳細(xì)。

注意：為了方便開發(fā)者減少配置項，描述頁面的四個文件必須具有相同的路徑與文件名。

2. 創(chuàng)建一個放圖片的文件夾，放上幾張tabBar小圖標(biāo)。

3. 在app.json中寫tanBar的配置，tabBar與pages、window同級。

  "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": "首頁"
      },
      {
        "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)了~

輪播圖

1. 使用微信提供的swiper控件，在頁面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>

2. 在wxss中設(shè)置樣式

swiper {
 height: 400rpx;
 width: 100%;
}
swiper image {
 height: 100%;
 width: 100%;
}

3. 在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
  },

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

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

九宮格

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

1. .js中添加數(shù)據(jù)

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    routers :[
      {
        text: '我的賬戶',
        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',
      }
    ] 
  },
})

2. .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>  

3. 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: " ";  
  position: absolute;  
  right: 0;  
  top: 0;  
  width: 1px;  
  bottom: 0;  
  /* border-right: 1px solid #D9D9D9;   */
  color: #D9D9D9;  
  -webkit-transform-origin: 100% 0;  
          transform-origin: 100% 0;  
  -webkit-transform: scaleX(0.5);  
          transform: scaleX(0.5);  
}  
.weui-grid:after {  
  content: " ";  
  position: absolute;  
  left: 0;  
  bottom: 0;  
  right: 0;  
  height: 1px;  
   /* border-bottom: 1px solid #D9D9D9;    */
  color: #D9D9D9;  
  -webkit-transform-origin: 0 100%;  
          transform-origin: 0 100%;  
  -webkit-transform: scaleY(0.5);  
          transform: scaleY(0.5);  
}  
.weui-grid:active {  
  background-color: #ECECEC;  
}  
.weui-grid__icon {  
  width: 36px;  
  height: 36px;  
  margin: 0 auto;  
}  
.weui-grid__icon image {  
  display: block;  
  width: 100%;  
  height: 100%;  
}  
.weui-grid__icon + .weui-grid__label {  
  margin-top: 10px;  
}  
.weui-grid__label {  
  display: block;  
  text-align: center;  
  color: gray;  
  font-size: 14px;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
  overflow: hidden;  
}  

4.效果展示

九宮格效果