打造一款 刷Java 知识的小程序（二）

学习Java的神器已上线，面向广大Java爱好者！

之前写的一篇：打造一款 刷Java 知识的小程序（一）

一、第二版做了什么？

• 第一版小程序只具有初级展示功能，知识点都是hardcode在代码里面的。
• 这一次进行了大升级，知识点从后端（小程序云开发）获取
• 知识点都是用Markdown语言写的，支持将Markdown内容无缝转换成小程序页面。

二、C端与后端的交互逻辑

mark

2.1、功能跳转

• 首页点击Java基础图标进入到Java基础知识列表页面
• 列表页点击“查看”按钮进入详情页面

2.2、准备工作

1.云开发存储上传一个markdown文件

2.云开发数据库插入两条记录

2.2、代码实现

1. 调用 自己编写的云函数 getJavaQuestionList 获取列表；
2. 调用 自己编写的云函数 getJavaQuestionDetail 获取详情的 Markdown文件路径；
3. 调用 系统自带的云函数 downloadFile 下载 Markdown文件保存为临时文件；
4. 调用 小程序自带的 saveFileSync 将临时文件保存到本地；
5. 调用 小程序自带的 readFileSync 将本地文件读入缓存（注意：开发者工具上不需要保存到本地也可以正常读取）；
6. 使用 towxml 开源组件将缓存中markdown内容转成小程序可以识别的元素
7. 给 图片元素添加预览事件

三、我与Markdown大战一天一晚

痛点：Markdown转小程序页面很难受，小程序页面并不能识别Markdown标记。

方案一、用Typora工具将 Markdown文件复制为html内容直接粘贴到表字段里面

mark

遇到的问题，发现复制的HTML代码都不包含样式，而用小程序富文本组件后，在WXSS文件定义样式对富文本里面的标签元素是不生效的。于是只能自己加样式，那就用正则匹配标签来加style吧。写着写着发现好多style要加。比如h1,h2,image。最坑的是Markdown转为html是code标签，小程序不识别code标签，所以将code标签转为div标签，然后还得处理换行，而且针对代码需要有不同的高亮显示，这太麻烦了。但基本上已经不影响阅读了。

mark

方案二、将Markdown文件复制为markdown格式内容直接粘贴到表字段里面

找到一个开源组件可以将markdown 标记转为小程序元素，叫做wemark。

于是就把markdown 内容复制到数据库中，但发现存到数据库的是没有换行的，所以读取之后需要做换行处理，这里就又用到正则表达式了。处理完了也能正常显示了，但图片不能放大看，这个就比较难受了。

方案三、将Markdown文件存到某个地方，比如COS，阿里云，七牛云，自己搭建的服务器

这里是将文件上传到小程序云开发的存储里面，而且小程序提供了对应的下载云存储文件的SDK，非常方便。

然后使用towxml开源组件将markdown转为小程序元素，和wemark相比优势如下：

1.支持自定义towxml组件哪些功能开放，比如转换markdown的图表、数学公式等

2.支持自定义towxml 支持哪些code格式高亮

3.支持绑定小程序元素事件（这个功能太棒了）

大战一天一晚完美解决Markdown转小程序的问题

4. 后续计划

貌似直接用小程序云开发就够用了，但云开发的访问次数，存储空间有限制。另外直接操作云开发控制台不方便，做个后台操作起来更方便、更安全。之前搭建的一个服务器因到期被回收了，又得重新搭一套了。另外会先在本地把后端服务和Portal先跑起来。

扫描二维码关注

领取架构师资料

更多内容

• 打造一款 刷Java 知识的小程序（一）
• 07.深入浅出 Spring Boot - 数据访问之Mybatis（附代码下载）
• 06.深入浅出 Spring Boot - 数据访问之Druid（附代码下载）
• 05.深入浅出 Spring Boot - 数据访问之JDBC（源码分析+代码下载）
• 每天玩转3分钟 MyBatis-Plus - 6. select 用法