微信小程序如何实现类似今日头条新闻详情页图文显示功能

众所周知,微信小程序编译好后是不能解析HTML标签的,那么问题来了:后台中通过所见即所得编辑器编辑的图文并茂的文章如何在微信小程序端也能显示呢?这就是本文要讨论的主题。

本文内容如下

一、如何解析HTML

二、小程序端如何显示

三、总结

本文所讲内容是基于PHP和微信小程序端的一起配合的情况下完成的。总体思路是通过PHP把标签的类型、样式和内容匹配出来,然后通过小程序端根据标签的类型生成小程序自带的标签。比如P标签转为view标签,label标签转为text标签,img标签转为image标签。然后附上内容和样式即可。

一、如何解析HTML

通过所见即所得编辑器编辑的文章是长这样的(点击编辑器的“查看源码 ”即可查看):

可以看到有p标签,图片标签,换行标签等,这些标签直接传给小程序端是原样显示,无法解析。这个时候需要正则表达式的帮助了,常用的正则匹配如下:


其它标签类似,不一一举例。

PHP的正则匹配函数使用如下:

上图中$view[1]为文章内容的HTML或者是某段p标签里面的HTML。

其它正则使用类似,返回给前端的数据格式如下:

二、小程序端显示

小程序逻辑很简单,根据接口传的类型显示不同的标签即可,代码如下:

三、总结

1、上面给的小程序端样例没有把样式给显示上去,PHP端已经匹配出样式的内容,要显示也很简单,只需要在标签上加个style属性,然后设置后台匹配的样式内容即可;

2、如果有人js很牛逼的,也可以通过js去解析HTML标签,GitHub上有人开源了类似的框架,有兴趣可以去百度下。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,292评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,935评论 25 709
  • 经常会想,如果有这么一天,我什么都写不出来了,也许还有很多感触,很多心酸,很多无奈,很多迫不得已,但是,我写不出...
    吴启远阅读 2,607评论 1 2
  • 你们还记得那个身穿泼墨大写意袍子的剑神……吗?lilys: 三观碎了,小时候看的无花传奇里,妙僧是欧阳震华演的剑无...
    lilys阅读 3,590评论 0 1
  • 市政项目勘察基础 美容师们,上午好,小编4天来在深圳、珠海、成都、合肥之间飞了个圈回来,导致没有继续分享【清洁管理...
    清洁环卫管理师阅读 2,224评论 0 0