关闭

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

标签: ui小程序微信移动后端
135人阅读 评论(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网站的观点或立场

微信小程序之目前为止史上最全的微信小程序项目实例, 微信小程序实战学习

wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说...
  • zhonggaorong
  • zhonggaorong
  • 2017-01-12 13:21
  • 5146

屌丝评:阿里云计算总裁胡晓明《让计算成为中国的能力》

2015年12月23日有幸参加由广东省人民政府和阿里巴巴集团举行的“数据引领,飞粤云端”2015年云栖大会广东峰会暨广东省云计算大数据开发者大会,也很荣幸现场听了阿里云计算总裁胡晓明先生的精彩演讲《让...
  • harrymeng
  • harrymeng
  • 2015-12-24 08:50
  • 4759

微信小程序实战教程:模仿—网易云音乐(一)

初窥 todo: 添加音乐到收藏(最近)列表 歌词滚动 从一个hello world开始微信开发者工具生成 目录如下:. |-- app.js |-- app.json |-- app.wxss ...
  • qq_38530880
  • qq_38530880
  • 2017-05-18 16:07
  • 3642

[干货教程]仿网易云课堂微信小程序开发实战经验

本篇文章想跟大家分享下:我们公司“湖北诚万兴科技”最近刚帮客户定制开发、目前已上线的“哎咆课堂”微信小程序的开发经验分享。首先大概介绍下这个小程序所涉及到的主要技术点:微信登录、微信支付、微信小程序F...
  • hutao123654
  • hutao123654
  • 2017-10-25 12:22
  • 212

【干货#006】实战知晓云分页显示

缘起 使用场景是用户下拉页面时,自动加载和显示数据。本例用的是显示一个常用电话列表。 准备 在知晓云后台数据表中增加Phone表,添加title和...
  • mingciong
  • mingciong
  • 2017-11-15 11:25
  • 80

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

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

【云星数据---mesos实战系列003】:marathon实战008--marathon部署一套最简单的前端程序

marathon部署一套最简单的前端程序1.要求: 成功部署一个index.html到Nginx.2.实现:1.建立一个最简单的web工程 first-portal,目录结构如下: 说明: ...
  • liguohuaBigdata
  • liguohuaBigdata
  • 2017-11-11 17:56
  • 7681

干货--Redis 30分钟快速入门

一、redis 环境搭建2 二、redis学习笔记之数据类型3 三、redis学习笔记之排序11 四、redis学习笔记之事务16 五、redis学习笔记之pipeline20 六、redis学习笔记...
  • tanggao1314
  • tanggao1314
  • 2016-04-10 21:56
  • 7735

008_SmartUpload使用之内容

  • 2008-09-04 16:40
  • 28KB
  • 下载

实战Visual C#数据库编程,针对数据库编程始终是程序设计语言的一个重要方面的内容

  • 2009-04-20 09:28
  • 2.56MB
  • 下载
    个人资料
    • 访问:2196次
    • 积分:183
    • 等级:
    • 排名:千里之外
    • 原创:17篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档