使用mpvue和云函數(shù)開發(fā)微信博客小程序(一) 開發(fā)概覽

距離上一版我的博客小程序發(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ā)過程遇到的一些坑以及分享一些心得。也歡迎大家留言點贊或吐槽。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言 這是我第一次開發(fā)小程序,開發(fā)的產(chǎn)品是音頻類的,在大佬的建議下采用了mpvue,一周時間把功能都做出來,由于不...
    fengxianqi閱讀 2,396評論 0 5
  • 在尤大微博鋪墊著“將會引入一些關(guān)于 TypeScript 的改進”一周之后,代號為 Level E 的 Vue.j...
    極樂叔閱讀 15,714評論 0 12
  • 開源:美團點評技術(shù)團隊mpvue官網(wǎng) 小程序開發(fā)特點 1、簡潔的開發(fā)方式;2、通過多頁面聚合完成輕量的產(chǎn)品功能;4...
    那年點夏閱讀 7,670評論 2 25
  • 謝謝寶寶陪著媽媽過了一個開心的生日,他們都說寶寶你是對媽媽的使命已經(jīng)完成了。可是,媽媽不覺得啊。我覺得寶寶你的使命...
    徐源閱讀 226評論 0 0
  • 好孩子是夸出來的。 表揚孩子,看似簡單,感覺人人都會,可是很多人卻不得要領(lǐng)。注意以下幾點,可能會事半功倍,說一句頂...
    搖曳de珊瑚閱讀 1,319評論 13 16

友情鏈接更多精彩內(nèi)容