专栏首页悟空聊架构 | 公众号打造一款 刷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先跑起来。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何快速关联/修改Git远程仓库地址

    (1)同步开源项目(以VsCode为例,我针对其进行二次开发,但是其版本总是在更新为了保持与其一致,我就得用到修改git远程仓库同步其最新代码); (2)快速实...

    悟空聊架构
  • 每天玩转3分钟 MyBatis-Plus - 6. select 用法

    代码下载:https://github.com/Jackson0714/study-mybatis-plus.git

    悟空聊架构
  • 【HTML】iframe跨域访问问题

    悟空聊架构
  • 静态代理和动态代理简介

    在某些情况下,一个客户不想或者不能直接引用一个对象,此时可以通过一个称之为“代理”的第三者来实现间接引用。代理对象可以在客户端和目标对象之间起到中介的作用,并且...

    SmileNicky
  • 设计模式之代理模式(结构型)

    代理模式:代理模式就是引入一个代理对象,通过代理对象实现对原对象的引用。代理模式是一种对象结构型。

    SmileNicky
  • Markdown 语法说明(简体中文版)

    NOTE: This is Simplelified Chinese Edition Document of Markdown Syntax. If you a...

    _gongluck
  • SDN控制平面东西向现状简介

    What is SDN West-East Interface 在SDN架构中,控制平面掌控全局网络的资源,主要控制数据平面的转发等功能,尤其重要,所以控制平面...

    SDNLAB
  • 小程序云开发初体验

    微信小程序有提供云开发的支持,这次尝试使用这种方式开发一个类似pasterbin的微信小程序。

    Thor
  • 代理模式 Proxy Pattern

    Proxy Pattern,是 Java 常用的设计模式之一。它的定义是对其他对象提供一种代理,已达到控制对这个对象访问的目的。

    FoamValue
  • Java代理和动态代理机制分析和应用

    本博文中项目代码已开源下载地址:GitHub Java代理和动态代理机制分析和应用 概述 代理是一种常用的设计模式,其目的就是为其他对象提供一个代理以控制对某个...

    CrazyCodeBoy

扫码关注云+社区

领取腾讯云代金券