小程序學習筆記1-tabBar、輪播圖和九宮格

今天開始學習小程序琉历，按自己寫APP的順序開始社痛，就不按微信官方文檔來了见转。
有些控件是結合官方和網上其他同學分享的代碼。

基礎概述

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

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

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

tabBar

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

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

  1. 創(chuàng)建一個放圖片的文件夾阔加，放上幾張tabBar小圖標花竞。

  2. 在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>
  1. 在wxss中設置樣式
swiper {
 height: 400rpx;
 width: 100%;
}
swiper image {
 height: 100%;
 width: 100%;
}
  1. 在js 中設置數(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)在的樣子（直接從別人的項目摳來的圖標，配色巨丑請忽略~）：


九宮格

九宮格功能上網查了幾種實現(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',
      }
    ] 
  },
})
  1. .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>
  1. wxss中設置樣式
.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.效果展示


九宮格效果
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市戴卜，隨后出現(xiàn)的幾起案子逾条，更是在濱河造成了極大的恐慌，老刑警劉巖投剥，帶你破解...
    沈念sama閱讀 221,273評論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件师脂，死亡現(xiàn)場離奇詭異，居然都是意外死亡江锨，警方通過查閱死者的電腦和手機吃警，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評論 3贊 398
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來啄育，“玉大人酌心，你說我怎么就攤上這事√敉悖” “怎么了安券？”我有些...
    開封第一講書人閱讀 167,709評論 0贊 360
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長氓英。 經常有香客問我侯勉，道長，這世上最難降的妖魔是什么债蓝？ 我笑而不...
    開封第一講書人閱讀 59,520評論 1贊 296
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任壳鹤，我火速辦了婚禮盛龄，結果婚禮上饰迹，老公的妹妹穿的比我還像新娘。我一直安慰自己余舶，他們只是感情好啊鸭，可當我...
    茶點故事閱讀 68,515評論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著匿值，像睡著了一般赠制。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 52,158評論 1贊 308
  • 城市分裂傳說
    那天钟些，我揣著相機與錄音烟号，去河邊找鬼。 笑死政恍，一個胖子當著我的面吹牛汪拥，可吹牛的內容都是我干的。 我是一名探鬼主播篙耗，決...
    沈念sama閱讀 40,755評論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼迫筑，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了宗弯？” 一聲冷哼從身側響起脯燃，我...
    開封第一講書人閱讀 39,660評論 0贊 276
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎蒙保，沒想到半個月后辕棚，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經...
    沈念sama閱讀 46,203評論 1贊 319
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡追他，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,287評論 3贊 340
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年坟募，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片邑狸。...
    茶點故事閱讀 40,427評論 1贊 352
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡懈糯，死狀恐怖，靈堂內的尸體忽然破棺而出单雾，到底是詐尸還是另有隱情赚哗，我是刑警寧澤，帶...
    沈念sama閱讀 36,122評論 5贊 349
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布硅堆，位于F島的核電站屿储，受9級特大地震影響，放射性物質發(fā)生泄漏渐逃。R本人自食惡果不足惜够掠，卻給世界環(huán)境...
    茶點故事閱讀 41,801評論 3贊 333
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望茄菊。 院中可真熱鬧疯潭，春花似錦、人聲如沸面殖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,272評論 0贊 23
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽脊僚。三九已至相叁，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背增淹。 一陣腳步聲響...
    開封第一講書人閱讀 33,393評論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來泰國打工椿访， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人虑润。 一個月前我還...
    沈念sama閱讀 48,808評論 3贊 376
  • 代替公主和親
    正文 我出身青樓赎离，卻偏偏與公主長得像，于是被迫代替她去往敵國和親端辱。 傳聞我的和親對象是個殘疾皇子梁剔，可洞房花燭夜當晚...
    茶點故事閱讀 45,440評論 2贊 359