距離上一版我的博客小程序發(fā)布將近一年時間,由于當(dāng)時剛接觸小程序,對它的語法和使用都不是很清晰,現(xiàn)在回頭看之前的代碼寫法和架構(gòu)著實是有些粗糙,于是十二月的空余時間斷斷續(xù)續(xù)將它們重新折騰了一遍。
技術(shù)選型
前端框架?mpvue
mpvue框架基于Vue框架,重寫了其中的runtime和compiler,在用法上面和Vue大致相同,某些功能可能受限于小程序環(huán)境本身的原因而不能使用,但對于我這種簡單項目利好是有使用過Vue項目經(jīng)驗提供了一個低門檻開發(fā)小程序(相較而言我更熟悉React風(fēng)格,但目前未發(fā)現(xiàn)這種類型框架)、配合webpack定制也更為靈活。而放棄原生小程序?qū)懛ǖ脑蚩赡苁俏覍λ钠姡褂妙A(yù)編譯樣式過于麻煩,一層層的view也讓人眼花繚亂...
UI組件庫 vant weapp
有贊團隊開源的移動端 Vue 組件庫?Vant?的小程序版本。之前我的小程序項目一直是采用這個UI組件,使用方法上來說我也比較熟悉。當(dāng)然,值得詬病的一點是它的功能樣式定制化相較之前使用過的antDesign還是不盡人意。
富文本解析 parser
這是踩坑之旅中比對了mpvue-wxParse,再到htmltowxml,最終還是采用parser,其中的細節(jié)之后會專門探討。
后臺服務(wù)?云開發(fā)云函數(shù)
微信開放的云開發(fā)對于我這種簡單的個人項目來說絕對是一個好消息,意味著不需要自己搭建服務(wù)器和自建數(shù)據(jù)庫以及配置域名、https。而它所提供的基于云函數(shù)免鑒權(quán)使用小程序開放接口的能力,包括服務(wù)端調(diào)用、獲取開放數(shù)據(jù)等功能也剛好解決我這款個人博客登錄、數(shù)據(jù)源獲取等一系列問題。
博客定位
重新構(gòu)建之前大致思考了一下我的博客的定位問題,畢竟是想讓它成為為自己分享內(nèi)容和簡單交流的平臺而不僅僅是自嗨的工具。所以后續(xù)的頁面設(shè)計和功能也著重于這兩個方面。
首先,核心主題,所謂主題應(yīng)該是類別清晰,和代碼設(shè)計理念上的弱耦合異曲同工。而博客內(nèi)容大部分以我原創(chuàng)或者半原創(chuàng)內(nèi)容為主。如果偏題和分類太多,會失去作為一款個人博客的特色,畢竟它也不是一個分享一切信息的網(wǎng)站。
再者,頁面設(shè)計,博客的設(shè)計也應(yīng)該要做到簡潔和美,簡潔可以給讀者創(chuàng)作純凈的閱讀體驗,和第一版相比較,去掉了一些不必要的元素和動畫,所注重的功能就讓它們安靜地擱置在頁面等待讀者調(diào)用。而美的理解是件主觀的事,我所認為的包括文章段落結(jié)構(gòu),圖片位置等都應(yīng)該恰到好處的不突兀,配色也不需要太過復(fù)雜,這些都需要在創(chuàng)作時用心的去精雕細琢。
整體效果
下面圖片展示是截取的幾個主要功能頁面,想要了解更多效果可以直接訪問博客小程序。
接下來我也會詳細更新教程介紹博客小程序開發(fā)過程遇到的一些坑以及分享一些心得。也歡迎大家留言點贊或吐槽。