「文經課表」當日課表界面實現方法

前言

先簡單介紹一下「文經課表」：基於微信小程序MINA框架的WXML、WXSS、JS爲代碼語言進行開發，視圖層採用Flex彈性佈局，邏輯層採用模塊化模式開發。發佈一週累計用戶人數1000+，煙臺大學文經學院、煙臺大學文經學院學生會等官方微信公衆號主動關聯小程序，更多介紹：https://lab.sangsir.com/kb/。 爲何要單獨說這個界面的實現方法，其實這與課表數據是分不開的。好，裝逼完成，開始說一下當日課表界面的實現方法。

分析

先看一下我處理的課表數據，這是一個由上到下，由左到右進行的分組。每一大節課爲1個數組，數組內包含8個數組，裏面包含星期一到星期日的兩小節的課程內容。嗯，有點繞，總之這樣寫有利於for循環出當日課表。 所以這樣一個for循環出來以後的數據是沒法使用css選擇器直接控制格式，能夠看一下直出後的效果。 全部內容都擠在了一行之中，那該怎麼辦？這樣也未免太不注重用戶體驗了吧？每循環一次加一個<br>總能夠了吧？不不不，前言中說了，微信小程序中的代碼語言爲WXML、WXSS、JS，意味着這並非一個HTML頁面，<br>標籤並不存在。

解決

既然如此，先看一下輸出規律。每一大節課包含8個數組，數組內包含兩小節的課程內容，第一行的課程內容爲課題，那麼就簡單了！能夠每隔4個數組將顯示出的標題加一個bold屬性進行突出顯示。

<block wx:if="{{i[index][k]!==null}}">
  <text class="weui-media-box__Bold" wx:if="{{index % 4 == 0}}">
    {{i[index][k]}}\n
  </text>
  <text wx:else>
    {{i[index][k]}}\n
  </text>
</block>

由於有了{{index % 4 == 0}}的每隔四行加上bold屬性與<text>中的\n換行符，便能將課題和其餘內容區分開來，實現標題突出顯示的功能，看下圖效果。

優化

emmm...不錯，但總感受看起來找不到關鍵信息？或者關鍵信息有些少？咱們看當日課表要看的是什麼來着？第幾節課+上什麼課+上課地點，對吧！ 第幾節課用符合小程序開發的主題色高亮顯示了，上什麼課也用加粗標註出來了，那麼地點在標題下面看起來感受好累啊！由於人眼已經將目光直接投射在了你所要關注的點上面了，這些關鍵點都已經用不一樣的方式凸顯出來方便一眼看到，然而上課地點並無安排在合適的地方一眼看到，畢竟這也是所要看到的關鍵信息之一，所以須要把它也凸顯一下，咱們把它放到右邊如何？ 用開發者工具將這一段加上float: right，嗯，不錯，這樣效果就好多了，突出但不喧賓奪主，符合用戶體驗。那麼……該怎麼實現？聰明的你必定會想到剛剛提到的每隔N行加一個css屬性，不過多個if可不是好現象，小程序設計指南中但是指出小程序要**「減小等待，反饋及時」，既然咱們的大標題已經有了bold屬性，大標題的下一行就是上課地點，那能不能在css中動一下手腳？ 在翻css手冊時我便看到了一個實現方法：CSS 相鄰兄弟選擇器 怎麼說？是否是頗有趣？只能說我須要把前端方面的手冊發送到kindle啃上幾遍。 ok，有了這個相鄰兄弟選擇器**那就簡單多了，完成以後的效果圖則是前言中的附圖了。

總結

一入前端深似海，此時不啃基礎什麼時候啃，文章乾貨很少，更多的是思路，但願之後多挖幾個坑提高一下本身的技術。