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

标签: ui 小程序 微信 移动 后端
335人阅读 评论(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"错误


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



查看评论

【干货#005】实战知晓云发送模板消息

缘起 使用场景是在用户完成付款后通过模板消息向用户发送付款成功消息。 准备 发送模板消息首先要在小程序后台申请模板,微信提供了模板库供开发者选...
  • mingciong
  • mingciong
  • 2017年11月15日 11:21
  • 281

微信小程序富文本组件wxParse

微信小程序富文本组件
  • qq_24734285
  • qq_24734285
  • 2017年01月05日 15:01
  • 7521

微信小程序之HTML富文本解析

在最近微信小程序开发过程中,遇到一些文章内容是HTML富文本的,但是偏偏微信小程序本身是支持HTML标签的,所以我们在解析内容的时候就需要将内容中的HTML标签转换成微信小程序所支持的标签,其实刚开始...
  • joelingwei
  • joelingwei
  • 2017年06月19日 09:22
  • 9861

小程序富文本编辑器的问题

今天做小程序开发时,用到百度富文本编辑器上传的图文数据,在小程序端取数据要把html格式转化.再网上搜了一波.找到这个地址: https://github.com/icindy/wxParse -...
  • xgwshen
  • xgwshen
  • 2017年08月17日 22:41
  • 4174

小程序实现富文本编辑器,文本格式化

小程序实现html代码项目中用到富文本编辑器的内容,但微信小程序默认不支持 html代码,在网上发现 wxParse能够实现富文本编辑器 项目地址:https://github.com/icindy...
  • itlijinpeng
  • itlijinpeng
  • 2018年01月04日 11:20
  • 927

微信小程序解析富文本编辑器HTML

1、首先要下载wxParse包下载地址 并放到根目录下 2、在app.wxss 中引入wxParse.wxss文件,@import "wxParse/wxParse.wxss";3、在需要用到解析H...
  • con_knife
  • con_knife
  • 2017年11月27日 09:44
  • 1614

微信小程序Markdonw、HTML富文本内容显示解决办法

TowxmlTowxml 是一个可将HTML、markdown转换为WXML(WeiXin Markup Language)的渲染库。由于微信小程序不能直接渲染HTML,因此富文本编辑器生成的HTML...
  • sbfkcel
  • sbfkcel
  • 2017年06月03日 13:51
  • 5593

微信小程序解析富文本编辑器

  • 2017年08月22日 17:20
  • 32KB
  • 下载

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

缘起 知晓云的特色之一就是内置可视化内容管理,简单易用的富文本编辑、管理功能,配合 SDK 内置的微信小程序富文本渲染引擎wxParser轻松完成内容发布小程序的制作。 下...
  • mingciong
  • mingciong
  • 2017年11月15日 11:29
  • 335

小程序完成后台连接

在小程序相当火热的今天,开发小程序成为一个很好的职业选择。 官方的话就别说了好吧。 1.首先第一步就是得先有个小程序(https://mp.weixin.qq.com),上这个连接找腾讯解...
  • qin1137248135
  • qin1137248135
  • 2017年11月18日 17:02
  • 1651
    个人资料
    持之以恒
    等级:
    访问量: 7160
    积分: 231
    排名: 32万+
    文章存档