微信小程序版博客开发汇总（附源码）

pingfan 的个人博客 / 4 / 2 / 创建于 6年前 / 更新于 6年前

从 PC 端博客发布开始，一直就有做个博客小程序版的想法，刚好今年比较空闲，于是就花了近半个月的时间将小程序版博客开发完了，这里做个简单的分享和总结。

项目介绍#

个人小程序 -- 平凡的博客欢迎打开微信小程序搜索 “平凡的博客”

或者扫描此小程序二维码

file

软件架构#

开发工具：微信开发者工具
语言：直接使用原生的
项目地址：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 的框架。

小程序博客