這里我們通過創(chuàng)建一個簡單的電影類文章展示小程序來介紹內容庫的使用。該小程序包含三個頁面，分別是內容分類列表頁，文章列表頁和文章詳情頁，首頁即為分類列表頁，選中其中一個分類，進入到該分類的文章列表頁，在文章列表頁中選中任意一篇文章即可進入到文章的詳情頁。
通過 Dashboard 創(chuàng)建內容庫、分類和文章
- 創(chuàng)建一個名為「 編輯 」的分組，只有屬于該分組的用戶才能對即將創(chuàng)建的內容庫進行操作。在用戶管理界面，選擇普通分組管理，點擊新建普通分組，即可創(chuàng)建一個普通分組。
新建分組
- 為分組添加成員。在用戶管理界面，選擇用戶管理，在要加入分組的用戶所在行，點擊設置分組，在彈出的模態(tài)框中列出了分組信息，選中我們當前創(chuàng)建的分組，點擊保存，便將選中的用戶添加到了分組中。
添加分組成員
- 新建內容庫并設置權限。在內容管理界面，點擊新建內容庫按鈕，在彈出的模態(tài)框中填寫內容庫名和并在訪問權限選項中選擇我們剛才創(chuàng)建的分組。
新建內容庫并設置權限
- 創(chuàng)建分類。點擊創(chuàng)建分類按鈕，在彈出的模態(tài)框中填寫分類名稱即可創(chuàng)建一個分類。
創(chuàng)建分類
創(chuàng)建分類結果
- 創(chuàng)建文章。在「 所有內容 」菜單下點擊「 添加內容 」按鈕后跳轉到富文本編輯頁面，即可進行文章創(chuàng)建。
知曉云_BaaS_平臺.png
創(chuàng)建文章
查看分類下文章
通過 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接口即可獲取到指定分類下的文章列表。
在內容庫中通過富文本編輯器創(chuàng)建的內容是以 html 格式進行保存的，因此展示到小程序上需轉換為 wxml 格式，為此我們開發(fā)了 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>
文章內容
結合數(shù)據(jù)表開發(fā)更復雜的內容類應用
內容庫的職責僅僅是對內容進行編輯和管理，因此想要開發(fā)更為復雜的與內容相關的功能如點贊的話，需要和數(shù)據(jù)表向結合。關于這部分的內容，我們會在后續(xù)的教程中再討論。
