微信小程式（看文件寫例項三）微信小程式課堂寶APP實現整體介面框架及首頁佈局
一、首頁佈局簡單思路
回顧上一篇博文，首頁的內容主要有輪播圖，橫向滑動選單以及選單對應的view，橫向滑動選單有簽到、課堂測試、模擬測試、課堂提問、答問記錄五個選項，當點選選項時更新顯示view。由於素材和時間有限，所以佈局做得相對簡單，主要是側重思路及程式碼邏輯。
二、輪播圖
檢視文件，發現輪播圖使用的是swiper元件，swiper有以下屬性：
| 屬性名 | 型別 | 預設值 | 說明 | 最低版本 |
|---|---|---|---|---|
| indicator-dots | Boolean | false | 是否顯示面板指示點 | |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示點顏色 | 1.1.0 |
| indicator-active-color | Color | #000000 | 當前選中的指示點顏色 | 1.1.0 |
| autoplay | Boolean | false | 是否自動切換 | |
| current | Number | 0 | 當前所在頁面的 index | |
| interval | Number | 5000 | 自動切換時間間隔 | |
| duration | Number | 500 | 滑動動畫時長 | |
| circular | Boolean | false | 是否採用銜接滑動 | |
| vertical | Boolean | false | 滑動方向是否為縱向 | |
| bindchange | EventHandle | current 改變時會觸發 change 事件，event.detail = {current: current, source: source} |
那就可以定義一個swiper，樣式指定高，寬鋪滿，swiper裡的image元件圖片100%顯示就能鋪滿螢幕。還有一點，輪播圖是從伺服器請求的，那應當用一個block去迴圈請求到的url列表來設定swiper-item裡頭的image元件，然後遍歷在前臺顯示。前臺的程式碼如下：
| <view class='section'> <swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000" class='swiper'> <block wx:for="{{vedioImgUrls}}" wx:key="*this"> <swiper-item id="{{index}}" catchtap="swiperItemClick" > <image src="{{item.thumbnail.url}}" /> </swiper-item> </block> </swiper> </view> |
樣式程式碼：
| /* 輪播樣式 */ .swiper{ width: 100%; height: 240px; } /* 輪播圖片樣式 */ .swiper swiper-item image{ width: 100%; } |
當然，現在是空的資料，顯示不了啥，因為並沒有從伺服器獲取資料，先指定一個本地圖片上海交大計算機網路課程的縮圖，效果如下：
三、橫向滑動選單
檢視文件，滑動元件就是scroll-view，scroll-view有比較多的屬性，常用屬性就是scroll-x和scroll-y:
| 屬性名 | 型別 | 預設值 | 說明 |
|---|---|---|---|
| scroll-x | Boolean | false | 允許橫向滾動 |
| scroll-y | Boolean | false | 允許縱向滾動 |
| upper-threshold | Number | 50 | 距頂部/左邊多遠時（單位px），觸發 scrolltoupper 事件 |
| lower-threshold | Number | 50 | 距底部/右邊多遠時（單位px），觸發 scrolltolower 事件 |
| scroll-top | Number | 設定豎向滾動條位置 | |
| scroll-left | Number | 設定橫向滾動條位置 | |
| scroll-into-view | String | 值應為某子元素id（id不能以數字開頭）。設定哪個方向可滾動，則在哪個方向滾動到該元素 | |
| scroll-with-animation | Boolean | false | 在設定滾動條位置時使用動畫過渡 |
| enable-back-to-top | Boolean | false | iOS點選頂部狀態列、安卓雙擊標題欄時，滾動條返回頂部，只支援豎向 |
| bindscrolltoupper | EventHandle | 滾動到頂部/左邊，會觸發 scrolltoupper 事件 | |
| bindscrolltolower | EventHandle | 滾動到底部/右邊，會觸發 scrolltolower 事件 | |
| bindscroll | EventHandle | 滾動時觸發，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
於是思路就是給一個scroll-view設定scroll-x屬性為true，然後scroll-view裡頭有五個選單label，這裡說下label是可以把幾個元件合併的，在點選事件的使用有意想不到的效果，於是得到前臺程式碼如下：
| <view class='section'> <scroll-view class="categories" scroll-x="true"> <block wx:for="{{selectedScrollItems}}" wx:key="*this"> <label class="category" id="{{index}}" bindtap='scrollMenuClick'> <view wx:if="{{menuIndex==index}}" style='color:green; font-size: 18px;'>{{item}}</view> <view wx:else style='color:royalblue;'>{{item}}</view> </label> </block> </scroll-view> </view> |
樣式程式碼：
| /* 滑動選單樣式 */ .categories { height: 40px; line-height: 40px; border: 1px solid #eee; white-space: nowrap; display: flex; } /* 滑動選單item樣式 */ .categories .category { width: 80px; height: 40px; text-align: center; display: inline-block; border-right: 1px solid #eee; color: royalblue; font-size: 15px; } |
效果如下：
四、子選單對應view
首先，需求是點選選項顯示不同的介面，那麼思路就可以這樣：設計5個view，點到誰誰顯示其他隱藏就好。那麼邏輯就是在前臺寫五個view，後臺寫五個view對應的標記，當選中時該對應標記為true，前臺根據這個標記去判定是否渲染，於是得到前臺程式碼如下：
| <view class='section' hidden='{{selectedScrollItemsHiddenSign[0]}}'> 簽到 </view>
<view class='section' hidden='{{selectedScrollItemsHiddenSign[1]}}'> 課堂測試 </view>
<view class='section' hidden='{{selectedScrollItemsHiddenSign[2]}}'> 模擬測試 </view>
<view class='section' hidden='{{selectedScrollItemsHiddenSign[3]}}'> 課堂提問 </view>
<view class='section' hidden='{{selectedScrollItemsHiddenSign[4]}}'> 答問記錄 </view> |
後臺程式碼：
| data{ // 選單選項 selectedScrollItems: ['簽到', '課堂測試', '模擬測試', '課堂提問', '答問記錄'], // 選單選項隱藏和顯示標誌 selectedScrollItemsHiddenSign: [false, true, true, true, true] } |
在scroll-view繫結的scrollMenuClick事件裡頭程式碼如下：
| scrollMenuClick:function(e){ // 隱藏其他頁面並顯示當前點選的選單頁面 for (var i = 0; i < this.data.selectedScrollItemsHiddenSign.length;i++){ if (i == e.currentTarget.id) this.data.selectedScrollItemsHiddenSign[i] = false; else this.data.selectedScrollItemsHiddenSign[i] = true; } this.setData({ menuIndex: e.currentTarget.id, selectedScrollItemsHiddenSign: this.data.selectedScrollItemsHiddenSign}); // 顯示載入logo wx.showToast({ title: '載入中', icon: 'loading', duration:10000 });
// 選中第一個選單 if (e.currentTarget.id == 0){ setTimeout(function () { wx.hideToast() }, 3000); }// 選中第二個選單，載入課堂測試題 else if (e.currentTarget.id == 1){ setTimeout(function () { wx.hideToast() }, 3000); } // 選中第三個選單 else if (e.currentTarget.id == 2) { setTimeout(function () { wx.hideToast() }, 3000); } // 選中第四個選單 else if (e.currentTarget.id == 3) { setTimeout(function () { wx.hideToast() }, 3000); } // 選中最後一個選單 else { setTimeout(function () { wx.hideToast() }, 3000); } } |
效果：
五、設定tabBar
如果我們的小程式是一個多 tab 應用（客戶端視窗的底部有tab欄可以切換頁面），那麼我們可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。
Tip：
1. 當設定 position 為 top 時，將不會顯示 icon
2. tabBar 是一個數組，只能配置最少2個、最多5個 tab，tab 按陣列的順序排序。
具體屬性如下：
| 屬性 | 型別 | 必填 | 預設值 | 描述 |
|---|---|---|---|---|
| color | HexColor | 是 | tab 上的文字預設顏色 | |
| selectedColor | HexColor | 是 | tab 上的文字選中時的顏色 | |
| backgroundColor | HexColor | 是 | tab 的背景色 | |
| borderStyle | String | 否 | black | tabbar上邊框的顏色， 僅支援 black/white |
| list | Array | 是 | tab 的列表，詳見 list 屬性說明，最少2個、最多5個 tab | |
| position | String | 否 | bottom | 可選值 bottom、top |
其中 list 接受一個數組，陣列中的每個項都是一個物件，其屬性值如下：
| 屬性 | 型別 | 必填 | 說明 |
|---|---|---|---|
| pagePath | String | 是 | 頁面路徑，必須在 pages 中先定義 |
| text | String | 是 | tab 上按鈕文字 |
| iconPath | String | 否 | 圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px，當 postion 為 top 時，此引數無效 |
| selectedIconPath | String | 否 | 選中時的圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px ，當 postion 為 top 時，此引數無效 |
於是，結合我們上一篇的需求，製作tabBar需要三個頁面即三個page，因此app.json配置如下：
| { "pages": [ "pages/main/main", "pages/post/post", "pages/mine/mine", "pages/vedioPlayer/vedioPlayer", "pages/start/start" ], "window": { "navigationBarTextStyle": "white", "navigationBarBackgroundColor": "#118fff", "navigationBarTitleText": "課堂寶", "backgroundColor": "#fff" }, "tabBar": { "color": "#9BABBA", "selectedColor": "#495056", "borderStyle": "black", "backgroundColor": "dark", "list": [ { "pagePath": "pages/main/main", "text": "首頁", "iconPath": "static/images/tar-home.png", "selectedIconPath": "static/images/tar-home-on.png" }, { "pagePath": "pages/post/post", "text": "習題", "iconPath": "static/sources/發帖32x32.png", "selectedIconPath": "static/sources/發帖32x32hl.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "static/sources/我的32x32.png", "selectedIconPath": "static/sources/我的32x32hl.png" } ] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 } } |
於是就得到介面效果如下：
下一篇將會寫到簽到子頁面的佈局及連線伺服器獲得視訊資訊並載入播放等。