关闭

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

标签: ui小程序微信移动后端
39人阅读 评论(0) 收藏 举报
分类:

缘起

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


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


首页:


日记内容查看页:

准备

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



实战

第一步 建立内容库


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



第二步 创建项目


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



其次是小程序公共样式表文件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"错误


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



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:342次
    • 积分:151
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档