使用mpvue和云函数开发微信博客小程序(一) 开发概览

距离上一版我的博客小程序发布将近一年时间，由于当时刚接触小程序，对它的语法和使用都不是很清晰，现在回头看之前的代码写法和架构着实是有些粗糙，于是十二月的空余时间断断续续将它们重新折腾了一遍。

---

技术选型

前端框架 mpvue

mpvue框架基于Vue框架，重写了其中的runtime和compiler，在用法上面和Vue大致相同，某些功能可能受限于小程序环境本身的原因而不能使用，但对于我这种简单项目利好是有使用过Vue项目经验提供了一个低门槛开发小程序（相较而言我更熟悉React风格，但目前未发现这种类型框架）、配合webpack定制也更为灵活。而放弃原生小程序写法的原因可能是我对它的偏见，使用预编译样式过于麻烦，一层层的view也让人眼花缭乱...

UI组件库 vant weapp

有赞团队开源的移动端 Vue 组件库 Vant 的小程序版本。之前我的小程序项目一直是采用这个UI组件，使用方法上来说我也比较熟悉。当然，值得诟病的一点是它的功能样式定制化相较之前使用过的antDesign还是不尽人意。

富文本解析 parser

这是踩坑之旅中比对了mpvue-wxParse，再到htmltowxml，最终还是采用parser，其中的细节之后会专门探讨。

后台服务 云开发云函数

微信开放的云开发对于我这种简单的个人项目来说绝对是一个好消息，意味着不需要自己搭建服务器和自建数据库以及配置域名、https。而它所提供的基于云函数免鉴权使用小程序开放接口的能力，包括服务端调用、获取开放数据等功能也刚好解决我这款个人博客登录、数据源获取等一系列问题。

---

博客定位

重新构建之前大致思考了一下我的博客的定位问题，毕竟是想让它成为为自己分享内容和简单交流的平台而不仅仅是自嗨的工具。所以后续的页面设计和功能也着重于这两个方面。

首先，核心主题，所谓主题应该是类别清晰，和代码设计理念上的弱耦合异曲同工。而博客内容大部分以我原创或者半原创内容为主。如果偏题和分类太多，会失去作为一款个人博客的特色，毕竟它也不是一个分享一切信息的网站。

再者，页面设计，博客的设计也应该要做到简洁和美，简洁可以给读者创作纯净的阅读体验，和第一版相比较，去掉了一些不必要的元素和动画，所注重的功能就让它们安静地搁置在页面等待读者调用。而美的理解是件主观的事，我所认为的包括文章段落结构，图片位置等都应该恰到好处的不突兀，配色也不需要太过复杂，这些都需要在创作时用心的去精雕细琢。

---

整体效果

下面图片展示是截取的几个主要功能页面，想要了解更多效果可以直接访问博客小程序。

首页列表和详情页面

我的和后台管理入口页面  

文章后台管理页面

分类管理和评论管理页面  

版本管理和版本展示页面  

接下来我也会详细更新教程介绍博客小程序开发过程遇到的一些坑以及分享一些心得。也欢迎大家留言点赞或吐槽。