【干货#008】30分钟实战知晓云内容发布小程序

缘起

知晓云的特色之一就是内置可视化内容管理，简单易用的富文本编辑、管理功能，配合 SDK 内置的微信小程序富文本渲染引擎wxParser轻松完成内容发布小程序的制作。

下面一步一步实战一个如下图所示的内容发布小程序“我的日记”，只有两个页面，一个是首页显示发布的日记列表，一个是查看日记内容页面，在首页点击日记标题，可进入日记内容页面。

首页：

日记内容查看页：

准备

注册有小程序账号和知晓云账号，并授权小程序给知晓云。

实战

第一步 建立内容库

在知晓云后台建立“日记”内容库，并添加几篇内容，记录下内容库ID，以备后用。

第二步 创建项目

在开发者工具中创建一个空白项目，APPID填写申请的小程序ID。首先，我们需要创建全局配置文件app.json，定义index和article2个页面。

其次是小程序公共样式表文件app.wxss中引入wxParser的样式表，并定义了页面全局背景颜色和字体。

最后是小程序应用入口文件app.js中完成知晓云SDK的初始化。

第三步 创建首页

首先创建界面index.wxml，在组件中定义日记的数据库中id属性，定义单击事件处理函数。

其次创建首页中使用的样式表index.wxss，主要是定义了一个放置日记标题的显示框。

最后创建首页逻辑处理文件index.js，在页面加载时使用知晓云SDK的获取内容库内容列表函数wx.BaaS.getContentList获取日记列表，并绑定到变量diary_list中以备显示。在点击事件处理函数中先获得当前日记的id，然后添加到url中作为查询变量。同时也定义了分享转发处理函数。

第四步 创建日记查看页

首先创建日记界面article.wxml，首先引入wxParser模块，然后显示日记标题和时间，最后使用wxParser渲染日记内容。

其次创建日记界面样式表article.wxss。

最后创建日记内容显示逻辑文件article.js，首先在页面加载处理函数中获取页面url传入的日记id，然后使用SDK的内容库内容详情获取函数wx.BaaS.getContent获取日记内容。

知晓云返回的日记内容的时间是时间戳，因此需要使用时间格式化函数进行格式化以备显示。

由于日记内容是在知晓云后台的富文本编辑器中编辑的，因此包含HTML等标签，需要使用wxParser富文本渲染引擎进行渲染为小程序可以显示的组件。同时也定义了分享转发处理函数。

富文本渲染引擎的使用可进一步查看知晓云文档中的内容，点击阅读原文查看。

结论

整个项目的文件目录如下：

上述已经包括整个项目的源码，对手懒不想敲代码的，请赞赏后在公众号中留言：日记源码。

注意：个人类型小程序是无法上线发布这种资讯类小程序的。

更多实战干货，可查看：

小程序页面滚动实现广告条隐藏

细解小程序自适应单位rpx

小程序实现地址自动解析和导航

小程序"页面滚动"与"滚动视图区域"区别

小程序使用有赞ZanUI

更多常见错误，可查看：

解决 Page[pages/XXX/XXX] not found错误

解决"Failed to load image"错误

关注晓程序干货店，分享小程序开发干货知识