从 PC端博客 发布开始，一直就有做个博客小程序版的想法，刚好今年比较空闲，于是就花了近半个月的时间将小程序版博客开发完了，这里做个简单的分享和总结。
项目介绍
个人小程序--平凡的博客 欢迎打开微信小程序搜索“平凡的博客”
或者扫描此小程序二维码
软件架构
开发工具：微信开发者工具
语言：直接使用原生的
项目地址：https://github.com/yanthink/mpblog
小程序后端
开发工具：PhpStorm
语言：PHP
框架：Laravel 5.6
数据库：Mysql 8.0
队列：Redis
全文搜索：Elasticsearch
websocket：Redis + websockets/ws
项目地址：https://github.com/yanthink/blog-api
后台管理
开发工具：WebStorm
语言：JavaScript
框架：ant design pro 2.0.0-beta.1
项目地址：https://github.com/yanthink/blog
运维
反向代理：Nginx 1.12.2
SSL证书：Symantec 免费版
服务器：阿里云轻量级服务器 CentOS 7.3
构建过程
第一次开发小程序，一开始想着采用WePY、Mpvue、Taro等框架来开发的，这些框架都是采用 vuejs 或者 react 语法开发的，而我刚好对 vuejs、react 有一定的基础，开发起来效率肯定会比较快。但是后面阅读微信官方文档api发现原生的上手也挺简单的，所以最终就直接选择了用原生的开发了。
当然，用原生的开发过程中也踩了不少坑，但总的来说还不算太坏，基本上都能找到解决办法，所以也没耽误太多时间。
踩坑记录
1、 微信小程序不支持async-await
关于异步处理，ES5的回调使我们陷入地狱，ES6的Promise使我们脱离魔障，终于、ES7的async-await带我们走向光明。
虽然微信小程序目前还不支持async-await，但是我们可以引入Facebook的 regenerator js库来解决这个问题。
下载 packages/regenerator-runtime 这个路径下的 runtime.js 到项目中，然后在要使用 async-await 的 js 中 import 就可以了。
import { stringify } from 'qs'
import regeneratorRuntime from '../../utils/runtime'
const { wxRequest } = require('../../utils/helpers')
Page({
data: {
article: {},
},
async onLoad({ id }) {
const params = {
include: 'user',
}
const { data: article } = await wxRequest(`/api/wechat/article/${id}?${stringify(params)}`)
this.setData({ article })
},
})
2、 关于wxs
wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。
wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API。
在 wxs 生成 date 对象需要使用 getDate 函数, 返回一个当前时间的对象。由于没有仔细看文档，一开始我使用的是Date，这导致在 ios 设备中 调用 Date.parse('YYYY-MM-dd HH:mm:ss') 会返回 NaN（替换成'YYYY-MM-ddTHH:mm:ss+8:00'就可以正常返回了）。
wxs 中不能引入外部的工具类，比如 moment。
3、富文本的问题
Towxml 是一个可将 HTML、markdown 转换为WXML(WeiXin Markup Language)的渲染库。
由于微信小程序不能直接渲染 HTML，因此富文本编辑器生成的 HTML 内容无法直接在小程序中展示。
可能是出于安全因素考虑，即使 WXML 文本在小程序中也是以字符串方式进行渲染。
网上有很多解析插件可以使用，这里我选择的是 html2wxml 插件，在此感谢插件开发作者！
4、ios pre 代码块字体会被自动放大
这个问题在模拟器上不会出现，一开始我还以为是 html2wxml 插件样式的问题，后面也尝试强制给 pre 代码块样式设置字体大小，结果还是没效果。
后来在网上查了一些资料，得知这是ios的一个bug，解决办法就是在样式里添加 -webkit-text-size-adjust: 100% !important; 这个属性就可以了
5、textarea 兼容性问题
textarea 组件在 ios 和 android 端样式是不一致的，ios默认有padding，android没有。
解决办法：通过 wx.getSystemInfoSync() 获取 platform 信息，然后针对不同的 platform 做样式处理
6、关于微信 websocket
websocket 早在几年前就有了解过，但还没真正用在产生上。
一开始我选用socket.io来做为websocket服务端，之所以socket.io是因为Laravel官方文档和网上大部分教程提供的demo都是用socket.io实现的。
socket.io 服务启动还是比较顺利的，接着就是利用Nginx配置实现ssl反向代理（微信小程序websocket只支持wss协议）。
配置和服务都没问题了，但，微信小程序 websocket 就是连不上，折腾了我2、3天才找到问题所在。
socket.io 支持的协议版本（4）和 微信小程序 websocket 协议版本（13）不一致，微信小程序 websocket 无法连上服务。
解决办法：选用支持协议版本13的websocket包，比如 websockets/ws
后续的开发遇到再做添加。
总结
1、小程序原生框架和MVVM框架非常相似，有其他MVVM开发经验的上手都比较容易。
2、微信小程序三端（iOS（iPhone/iPad）、Android 和 用于调试的开发者工具）的脚本执行环境以及用于渲染非原生组件的环境是各不相同的，所以开发过程中一定要在多个不同型号的手机上测试，以防出现兼容性问题。
3、平时习惯了React开发，现在用微信小程序原生的开发体验还真是不太好，所以有时间还是去学习下其他几个类Vue、React的框架。
🐔🐔
me
🐤🐤
🐮🐮🐮
学习了
哈哈
厉害！