Jekyll同步微信小程序

15 Apr 2021

Jekyll是一个生成静态网页的工具,不需要数据库支持。
微信小程序,有自己的组件和API。
现在已经有了基于Jekyll的项目部署在Github上,
想经过简单的转换,把文章部署到微信小程序上。
核心思想是利用JS文件创建对象,保存数据,
在微信小程序上使用rich-text显示。

解决方案

1.生成目录js文件

先开发一个JAVA项目,遍历Jekyll中的静态网页,
生成目录js文件,方便小程序调用。
格式很简单,就是一个对象:
let list_data_all = [json数据];
module.exports = {list_data_all}
对象中包含名称、日期、地址

2.html文章转成js文件

转换时,将标签的样式替换成class,
以便小程序的富文本组件能识别。
js文件结构:
const htmlSnip = `html标签数据`
module.exports = {htmlSnip}
注意单引号很特别。
图片地址可以使用github链接。

3.小程序中添加js文件

小程序通过引用js文件来获取数据并显示

小程序官网文档

https://developers.weixin.qq.com/miniprogram/dev/framework/

微信小程序码

小程序码

更新要做的事情

把Jekyll项目下的all文件夹
复制到
小程序的resources文件夹
执行run.bat即可

遇到问题时

1.注意,写文章的时候不要加特殊字符。
2.RemoveFileFormat项目目录下,
复制all文件夹可以测试生成文件。
3.java项目导出时,jar引用包,
在Project Structure中,Artifacts里,
选择Extract Into Output Root。
这样就会将jar的代码一起导出。
4.一般是字符导致js文件语法错误,
导致小程序显示不出文章。
5.小程序中代码显示不全问题,还未解决。