这里我们通过创建一个简单的电影类文章展示小程序来介绍内容库的使用。该小程序包含三个页面，分别是内容分类列表页，文章列表页和文章详情页，首页即为分类列表页，选中其中一个分类，进入到该分类的文章列表页，在文章列表页中选中任意一篇文章即可进入到文章的详情页。
通过 Dashboard 创建内容库、分类和文章
- 创建一个名为「 编辑 」的分组，只有属于该分组的用户才能对即将创建的内容库进行操作。在用户管理界面，选择普通分组管理，点击新建普通分组，即可创建一个普通分组。
新建分组
- 为分组添加成员。在用户管理界面，选择用户管理，在要加入分组的用户所在行，点击设置分组，在弹出的模态框中列出了分组信息，选中我们当前创建的分组，点击保存，便将选中的用户添加到了分组中。
添加分组成员
- 新建内容库并设置权限。在内容管理界面，点击新建内容库按钮，在弹出的模态框中填写内容库名和并在访问权限选项中选择我们刚才创建的分组。
新建内容库并设置权限
- 创建分类。点击创建分类按钮，在弹出的模态框中填写分类名称即可创建一个分类。
创建分类
创建分类结果
- 创建文章。在「 所有内容 」菜单下点击「 添加内容 」按钮后跳转到富文本编辑页面，即可进行文章创建。
知晓云_BaaS_平台.png
创建文章
查看分类下文章
通过 SDK 在小程序中使用内容库中的内容
关于 知晓云 JavaScript SDK 的使用可以参考 文档
- 获取内容库下的分类并展示。从 Dashboard 获取内容库 ID，调用
getContentGroup接口即可获取到内容库下的分类情况。
获取内容库 ID
wx.BaaS.getContentGroup({ contentGroupID: 382 }).then((res) => {
this.setData({
categories: res.data.objects
})
}, (err) => {
// console.log(err)
})
<view wx:for="{{categories}}" wx:key="id" class="category-item">
<navigator hover-class="item-hovered" url="/pages/category/index?content_group_id={{contentGroupID}}&category_id={{item.id}}">{{item.name}}</navigator>
</view>
分类列表
- 获取分类下的文章并展示。调用
getContentList接口即可获取到指定分类下的文章列表。
wx.BaaS.getContentList({ contentGroupID, categoryID }).then((res) => {
this.setData({ contents: res.data.objects })
}, (err) => {
// console.log(err)
})
<view wx:for="{{contents}}" wx:key="id" class="content-item">
<navigator hover-class="item-hovered" url="/pages/content/index?content_id={{item.id}}">{{item.title}}</navigator>
</view>
文章列表
- 获取文章信息并展示。调用
getContentList接口即可获取到指定分类下的文章列表。
在内容库中通过富文本编辑器创建的内容是以 html 格式进行保存的，因此展示到小程序上需转换为 wxml 格式，为此我们开发了 wxparser 插件来完成这个转换任务，具体的操作可以参考 文档
wx.BaaS.getContent({ richTextID: contentID }).then((res) => {
wxParser.parse({
bind: 'richText',
html: res.data.content,
target: this,
enablePreviewImage: true
})
res.data.created_at = this.formatTimestamp(res.data.created_at)
this.setData({ content: res.data })
}, (err) => {
// console.log(err)
})
<view class="h1">{{ content.title }}</view>
<view class="content-time">{{ content.created_at }}</view>
<view class="wxParser">
<template is="wxParser" data="{{wxParserData: richText.nodes}}"/>
</view>
文章内容
结合数据表开发更复杂的内容类应用
内容库的职责仅仅是对内容进行编辑和管理，因此想要开发更为复杂的与内容相关的功能如点赞的话，需要和数据表向结合。关于这部分的内容，我们会在后续的教程中再讨论。
