专栏首页知晓程序晓实战 | 这样编辑小程序富文本,又快又方便!

晓实战 | 这样编辑小程序富文本,又快又方便!

作者:王传林

知晓程序注:

「晓实战」是知晓程序推出的全新栏目。

我们会定期邀请优秀的开发者,从实践的角度,亲自分享他们使用知晓云(cloud.minaapp.com)开发的实战经验,如果你也想分享你的小程序实战经验,欢迎加入「晓实战」,添加客服晓小云(ID:minsupport)投稿即可。

hi~ 大家好,我是「纸塘」小程序的开发者,也是知晓云的公测用户。

在公测阶段,我体验了知晓云的富文本功能,它比想象中好用得多,于是我毫不犹豫的将「日签」功能迁移到知晓云。借此机会,在这里跟大家分享一下我的知晓云实战经验,希望能为各位开发者带来帮助。

纸塘小程序里有一块是赞助商的广告,在首页的「今日精选」中,最后一张图片是广告。如下图所示:

点击这张图片之后,会进入一个富文本页面。虽然微信小程序官方提供了富文本的组件,但是用起来不方便,而使用知晓云提供的「内容」板块,就可以十分方便地实现富文本的需求

在知晓云添加数据

1. 创建内容库

在知晓云后台进入「内容」板块,根据需求新建一个内容库。

这里我创建了一个新的叫做 imageTopic 的内容库,「设置用户组访问权限」那一栏,根据需求来填写吧。如果需要对用户进行分组的话,需要先去用户里进行分组。

2. 添加分类

同一个内容库里,可以放很多篇文章,如果需要对这些文章进行分类管理的话,则需要添加好分类,如果不需要分类,则可以直接添加所有文章。

因为我的需求里,文章数量较少,并且除了富文本本身外,还需要带一些属性,比如显示在首页的大图图片、可以让用户一键复制的字符串、控制文章是否限制的开关等等。

而知晓云的内容管理系统对于文章是不能自己添加字段的,所以还需要配合数据表。因此我不作分类了,而是直接添加文章内容。

3. 添加内容

点击「添加内容」后会进入一个富文本编辑界面。

根据自己的需要,将富文本的标题和内容填好。标题是必填的,其余的根据自己的需求选择填写。

编辑好之后保存,就会在内容列表里看到了。

4. 添加数据表

文章创建完之后,我们需要创建一个数据表,将自定义字段和文章关联起来。

创建了一个叫 topic 的数据表,之后根据需要,创建自定义字段。其中必须有一个字段是用来关联文章 ID 的,我这里使用 topicId 来关联。

创建好字段之后,我们来添加一行数据,并且将刚才创建的文章 ID 填写到 topicId 字段里。

在小程序中显示文章内容

1. SDK 接入

按照文档将知晓云最新版的 SDK 和 wxParser 放入项目的目录中,并且在 app.js 里引入 SDK。

2. 获取数据表

此时,我们已经获得到了之前创建的 topic 数据表里的数据,在获取时,可以根据自定义字段选择条件获取。

3. 获取文章内容

在已经获取数据表后,便可以做出一开始截图的首页了,页面布局和样式就不展示了。

接下来进行下一步:当用户点击这个图片后,会进入一个富文本页面,此时,需要将之前获取数据中的文章 ID 传到下一个页面中,下一个页面根据这个 ID 来查找到对应的文章。

因为我自定义字段较多,所以一次性还需要传其他的参数过来。

参数传递可以在跳转的 URL 后面,使用 query 格式(问号+参数)的方式来传递,比如:

在新页面中,接收传递过来的文章 ID:

根据文章 ID 查找出对于的文章内容:

将查询到的内容渲染到页面上:

大功告成。

这里使用的方式是建立一个数据表,数据表里手动关联文章 ID,来实现给文章增加自定义字段的需求。

希望以后知晓云可以让文章列表开放给用户自己添加自定义字段,这样就更加方便了。

「纸塘」小程序使用链接

https://minapp.com/miniapp/3148/

以上就是王传林为我们分享的「知晓云富文本功能实战经验」。如果你想了解更多关于小程序开发技巧,可以添加小云微信(ID:minsupport),我会把你拉进「知晓开发联盟」群,与作者进行同群交流噢。

本文分享自微信公众号 - 知晓程序(zxcx0101),作者:让你更知小程序的

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-09-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 是兄弟,就一起吃鸡!来,这个小程序拉你「进群」

    最近,一款「佛系养蛙」的日本游戏风靡网络,相信你已经在朋友圈见过它了。不出意外,这个「旅行青蛙」也迅速登上了中国区 AppStore 的免费游戏的榜首。

    知晓君
  • 嘘~不适合发到朋友圈的东西,就发到这里来吧!

    现在很多人,一旦有什么事就会发朋友圈,从他们的朋友圈里,几乎看到一个人生活中发生的所有事情。

    知晓君
  • 腾讯京东联合入股!基于微信生态的 SaaS 平台「微电汇」获千万融资

    3 月 8 日,基于微信公众号、小程序和 App 的 SaaS 服务平台微电汇宣布完成数千万人民币的 A 轮融资,由腾讯与京东联合投资。据悉,本轮融资将用于团队...

    知晓君
  • update set from where

    两个表a、b,想使b中的memo字段值等于a表中对应id的name值 表a:id,name 1 王 ...

    乔达摩@嘿
  • 分布式唯一ID生成方案总结

    在复杂分布式系统中,往往需要对大量的数据和消息进行唯一标识。如在美团点评的金融、支付、餐饮、酒店、猫眼电影等产品的系统中,数据日渐增长,对数据分库分表后需要有一...

    黄泽杰
  • 分布式全局唯一ID生成策略

    在复杂分布式系统中,往往需要对大量的数据和消息进行唯一标识。如在美团点评的金融、支付、餐饮、酒店、猫眼电影等产品的系统中,数据日渐增长,对数据库的分库分表后需要...

    lyb-geek
  • 聊聊eureka的TaskDispatcher

    eureka-core-1.8.8-sources.jar!/com/netflix/eureka/cluster/ReplicationTask.java

    codecraft
  • 分布式ID生成器的解决方案总结

    在互联网的业务系统中,涉及到各种各样的ID,如在支付系统中就会有支付ID、退款ID等。那一般生成ID都有哪些解决方案呢?特别是在复杂的分布式系统业务场景中,我们...

    Java技术栈
  • 关于基因ID的二三事

    对于一个基因而言,我们经常使用的,同时在文章里面能看到的还是基因名。例如: TP53, RNF180。这样的名字,是这个基因功能+编号的简写。例如TP53就是T...

    匹咔球
  • SQLServer SQL连接查询深度探险(摘录

    测试的SQL脚本如下:此脚本适合MySQL、DB2,如果要在Oracle上执行,需要做个替换BIGINT->INTEGER,VARCHAR、->VARCHAR...

    授客

扫码关注云+社区

领取腾讯云代金券