轉眼微信小程序已經(jīng)發(fā)布了好幾個月了决采，雖然只有最開始的一個月能夠稱得上是火爆，但是最近微信對于小程序開放了許多新功能坟奥，顯然對于小程序還是沒有放棄树瞭。所以在最近幾天制作了一個基于微信小程序的小項目:蝸牛慢讀。一款閱讀類的小程序爱谁，制作它的主要目的是為了熟悉微信小程序的組件和API還有語法等晒喷，順便在開發(fā)過程中練習一下自己的前端基礎技能。
GitHub地址：https://github.com/Harrison94pxxxxx/woniumandu 感興趣的同學可以clone到本地在微信開發(fā)者工具中配置并運行查看效果访敌。如果覺得對你有幫助的話可以順手點一下star (￣▽￣)~*凉敲。
因為該小程序比較簡單，所以就不把組件一個一個拆分記錄寺旺，只在這里記錄我在開發(fā)過程中比較注意的點爷抓。
項目效果圖：
首頁
界面展示
換源及切換章節(jié)
收藏小說功能
搜索記錄和推薦標簽
分類頁
排行榜
1.首頁的數(shù)據(jù)邏輯
我制作的第一個頁面是Home也就是首頁，首頁主要功能是作為用戶的書架阻塑，將用戶收藏的小說封面蓝撇、書名、作者顯示在首頁陈莽。最初我將首頁要展示小說的名字存儲在一個數(shù)組內渤昌，然后加載首頁時遍歷數(shù)組進行搜索，這樣做雖然能夠正常顯示和交互传透，但是當我制作到后面的排行榜耘沼、分類組件時發(fā)現(xiàn)了一個問題：
當前的首頁數(shù)據(jù)邏輯是 :首頁存儲即將要展示的小說名字极颓，用戶打開首頁時通過搜索API請求數(shù)據(jù)朱盐，然后進行渲染。
但是隨著用戶所收藏的小說越來越多菠隆，每次打開首頁時所需要請求的數(shù)據(jù)也越來越堵兵琳，隨之帶來的結果就是首頁加載速度越來越慢。
后來我將首頁的數(shù)據(jù)邏輯進行了修改:
修改后的首頁數(shù)據(jù)邏輯：將首頁所要展示的小說封面鏈接躯肌、書名者春、作者全部通過微信小程序的<pre>wx.setStorageSync(KEY,DATA)</pre>接口儲存在微信的緩沖中，這樣做極大的提升了首頁的加載速度清女。
這個問題讓我知道了一個軟件的數(shù)據(jù)邏輯結構是非常重要的一部分钱烟，以后一定要先設計好數(shù)據(jù)流動的結構再開始寫代碼。
2.關于小說收藏功能的實現(xiàn)
處理流程： 打開小說詳情頁時獲取微信緩存中的已收藏小說嫡丙，然后遍歷已收藏小說拴袭，將其Id與當前頁面小說Id進行對比，如果沒有相同的曙博，則收藏按鈕顯示為“追小說”拥刻，如果有相同的Id存在，則收藏按鈕顯示為“不追了”(數(shù)據(jù)綁定)父泳。但是在制作詳情頁面時也遇到一個問題般哼，就是"追小說"按鈕和"不追了"按鈕的背景顏色是不同的，以往在遇到相似的情況時一般都直接對DOM進行操作惠窄，改變Css里面的background蒸眠。但是，微信小程序里面是不能操作DOM的杆融，所以只能給背景色綁定一個變量黔宛，通過操作這個變量去改變背景色。
3.兼容性問題
我一直認為兼容性問題是前端開發(fā)里面最難解決的擒贸，瀏覽器臀晃、分辨率的不通都會導致頁面結構被破壞。雖然基于微信小程序的統(tǒng)一介劫，安卓各種設備都使用了統(tǒng)一的瀏覽器徽惋，而且移動端應用相對于桌面端網(wǎng)頁來說，頁面的結構要簡單得多座韵，但是在開發(fā)過程中還是發(fā)現(xiàn)了好多奇奇怪怪的問題险绘。最后在ios設備（小屏幕設備）上查看效果的時候（一開始一直是在安卓設備上查看實際效果的），發(fā)現(xiàn)完全和自己開始看到的不是同一個小程序誉碴，差異巨大宦棺。最后只能放棄繼續(xù)調試。
4.微信小程序的列表傳參
在實際開發(fā)的過程中我們往往會遇到這種情形：點擊列表中的某一項黔帕，獲取其index并傳遞到函數(shù)中代咸。以往我們都是這樣做的：<pre>
// Get the element
var element = document.getElementById("myDiv");
// Get the index
var _index = element.dataset.index;
</pre> 先給需要獲取信息的元素自定義一個dataset然后再在點擊的時候去獲取。
而在MVVM模式下：
<pre>
<tr v-for="（list,index）in lists">
{{index}}
</tr>
</pre> 然后我們就可以在列表中直接使用index成黄，將其傳入所用函數(shù)中呐芥。
在微信小程序里面逻杖，我們需要使用e.currentTarget來獲取注冊了事件監(jiān)聽器的對象，從而再去通過它獲取我們自定義的dataset思瘟。
5.寫在最后
每次做實際項目的時候都會發(fā)現(xiàn)自己的很多不足荸百，長路漫漫，希望能夠在以后的學習中改進吧滨攻，給自己加油够话，哈哈(???)
