這里我們通過創建一個簡單的電影類文章展示小程序來介紹內容庫的使用。該小程序包含三個頁面，分別是內容分類列表頁，文章列表頁和文章詳情頁，首頁即為分類列表頁，選中其中一個分類，進入到該分類的文章列表頁，在文章列表頁中選中任意一篇文章即可進入到文章的詳情頁。
通過 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>
文章內容
結合數據表開發更復雜的內容類應用
內容庫的職責僅僅是對內容進行編輯和管理，因此想要開發更為復雜的與內容相關的功能如點贊的話，需要和數據表向結合。關于這部分的內容，我們會在后續的教程中再討論。
