文档章节

搞定了微信小程序富文本渲染解决方案-后端渲染方案Html2Wxml2J

山东-小木
 山东-小木
发布于 11/18 18:35
字数 1623
阅读 1885
收藏 138

先介绍一下最近遇到的问题:

最近小程序项目中有文章详情页需要渲染富文本,微信小程序官方提供的<rich-text>是个弱鸡,很多标签不支持,用起来也麻烦,性能也不咋地。

吐槽完了,我们决定寻找其他方案-wxParse,一个小程序前端使用的javascript库,前端直接转换渲染。使用到了微信小程序的模板渲染,但是依然弱鸡,经常出现各种Javascript错误,很多标签不兼容。

 

我们的需求是

一篇文章详情图文Html标签正常解析,就连视频和音频,常见Html标签,代码标签都要渲染出来。

 

起初,我想的也是在微信小程序端,使用JavaScript处理这些编译渲染的工作,或者拿到WxParse的代码去改改。

无奈,我的JavaScript水平虽然不是弱鸡,单也耗时费力。于是我就转变思路寻找服务器端的解决方案,将需要渲染的Html在后端处理好,然后前端根据配置的模板动态渲染。

这个思路敲定以后,非常幸运地在开源中国码云里找到了一个靠谱的项目-html2wxml 

这个项目有好几种使用方式:

第一种、插件版

1、需要使用者在微信小程序后台,添加html2wxml这个第三方插件服务,在小程序里配置一下这个插件,就能自动加载和使用了,非常方便。

2、添加完插件后,需要在微信小程序项目里配置一下这个插件:注意version版本号和appid

代码如下:

 "plugins": {
 	"htmltowxml": {
 		"version": "1.3.0",
 		"provider": "wxa51b9c855ae38f3c"
 	}
 }

3、然后,在对应需要使用这个插件渲染Html富文本的页面,找到对应的JSON文件,加入一个声明:代码如下

这样,插件版的使用配置就完成了,剩下的就是如何具体在页面中使用这个插件去渲染了。

 

在我们自己的小程序项目中找到页面对应的JavaScript文件,添加一个模拟读取外部Html的过程:

我们读取到Html后赋值为本页面定义的一个数据变量“html”;

然后在对应的Index.wxml中 加入插件提供的调用方式:

直接把Html变量丢给这个组件的text属性就可以了,其他属性可以去html2wxml的码云站点看文档说明。

 

我们来看一下成果:

第一个是在浏览器里查看的效果:

再来看看 小程序里插件版的转换效果:是不是一毛一样~~

 

好了,讲到这里大家都明白Html2Wxml是干什么的了,也知道如何使用了,这里我们发现一个问题,这个插件版如何给我们转换的代码呢?

看看NetWork就知道了:看下图,原来是插件自动将html代码发给插件提供的服务接口,将html转成了JSON格式的NODE节点数据,然后交给了插件在小程序解析渲染。

那么,问题来了:我线上的应用都是用官方提供的这个接口服务器地址,万一哪天扛不住挂了怎么办,小程序不也跟着废了吗?

这个问题,作者当然想到啦~~~

二、除了插件版,作者还提供了另外两个版本 模板版本和自建服务器组件版,这两个版本都需要下载一套代码集成到微信小程序的项目中。

1、模板版本的我这里就不讲了,官方有文档 我先截个图过来

2、自建服务器组件版,需要下载整套HTML2Wxml组件版的源代码,集成到我们现在的微信小程序项目中。

这里下载有两个选择,一个是PHP版本,一个是Java版本 其中PHP版本是html2wxml的作者写的,目前插件版访问的就是后端PHP版本。

但是,我是搞Java的小伙儿,PHP略懂。。。 自己搭建完也正常使用了,但是总觉不爽,于是我就写了一个Java版的后端转换程序,并且开源了。

哎呀,妈呀,写了这么多终于说到自己了~~

 

三、实战实战

项目地址https://www.oschina.net/p/html2wxml4j

具体用法也很简单:

1、首先,下载组件源码 集成到小程序项目中 直接拿截图吧

注意组件版的代码放的位置,我是放在了和Pages在同一级目录下,然后跟插件版不一样的是在Index.json中的引用配置,具体的存放路径。

 

其实默认,如果到此位置,也就是用了组件版替换了插件版,但是最后调用的服务器接口,还是官方提供的,在上图的文件里可以找到这个地址。

那么如果,我们需要自己使用自己部署的后端服务,就需要下载Java版或者Php版本的接口源码,自己部署后,在这里替换掉接口地址就行了。

2、下载Html2wxml4J的源码

源码是JFinal+JSoup+FastJson开发的,JFinal作为Controller层,如果有使用Spring系列的 可以几分钟内参照JFinal的Controller 改掉。

主要就是这个IndexController,接口的入口处理器,在这里主要传递的就是text参数。

直接右键 run as,启动MainConfig.java,80端口。

使用http://127.0.0.1 就可以访问了。

不传任何数据,返回空的数组(废话~~)。

text参数传递过来一个h1标签,转换成下面的节点数据。

这些数据 在小程序里使用组件可以直接解析了。

 

那我再把微信小程序里组件上的接口地址改成 这个http://127.0.0.1.

去看看转换的效果~~

 

好了,终于搞定了,这样就完成了一个从服务端解析转换 小程序里渲染Html的方案,而且还是Java版的哦~~

 

 

 

 

 

 

 

 

© 著作权归作者所有

共有 人打赏支持
山东-小木

山东-小木

粉丝 222
博文 47
码字总数 29684
作品 1
东营
CEO
私信 提问
加载中

评论(5)

山东-小木
山东-小木

引用来自“朱均其”的评论

php可以吗
可以啊 最早是出的PHP的 Java的是我后来补充加入的
朱均其
朱均其
php可以吗
FrendLin
FrendLin
赞一个
开源大帅逼
开源大帅逼
值得收藏
理工男海哥
理工男海哥
好文章,支持支持。#JPress# 也光荣采用了这一方案。
Html2Wxml4J 1.0 正式发布,Java 版小程序富文本解决方案

项目介绍: Html2wxml4J是Java版的微信小程序富文本渲染解决方案,主要提供后台接口接收Html代码转换后返回JSON数据给小程序端渲染使用。适合使用在新闻、社区、博客类小程序渲染已有的html数...

山东-小木
08/08
911
2
小程序redux性能优化,提升三倍渲染速度

前言 最近用户反馈我们的小程序很卡,打开商品列表需要四五秒时间,带着这个疑问,我决定对小程序做个全面的性能优化,要做性能优化,必须先理清以下三个关键点。 产生性能问题的关键点 度量...

zhengguorong
08/06
0
0
云+社区技术沙龙 - 微信小程序敏捷开发实战(上海站)

从微信的诞生,到微信公众号、微信支付,再到小程序,腾讯生态在一次又一次影响用户行为习惯的同时,也为开发者提供了新的思路和技能发展方向。无可置疑,微信小程序开发浪潮已经来临,也将在...

极客邦Geekbang_Event
04/15
1
0
一款开源微信小程序APP(商超营销类)

项目介绍 这是一款主打门店营销的小程序。包括首页、门店、营销、个人设置、登录、数据统计展示、营销设置等。 本来要独立完成整个项目,包括前后端一套的,有些意外因素,项目临时收尾。 管...

杨超凡
08/24
0
0
基于 Vue 的小程序开发框架 - Megalo

Megalo基于 Vue 的小程序框架 Megalo 是基于 Vue() 的小程序开发框架,让开发者可以用 Vue 的开发方式开发小程序应用。Megalo是为了跨 H5 和小程序两端的应用提供一个高效的解决方案,只需...

木羽zwwill
11/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

python机器学习及实践学习笔记1-如何打开ipynb后缀文件

python机器学习及实践学习笔记1-如何打开ipynb后缀文件 2017年02月22日 14:58:08 hustzhoutian 阅读数:45365更多 个人分类: 深度学习 需要安装ipython notebook,如果你已经安装Anaconda软...

linjin200
5分钟前
1
0
关于在vim中的查找和替换

1,查找 在normal模式下按下/即可进入查找模式,输入要查找的字符串并按下回车。 Vim会跳转到第一个匹配。按下n查找下一个,按下N查找上一个。 Vim查找支持正则表达式,例如/vim$匹配行尾的"...

休辞醉倒
10分钟前
0
0
in_array的坑

PHP in_array的坑 ps: 应该是弱类型语言的坑 php文档 顾名思义,in_array就是查找一个值是否在数组里面。 问题 事故现场 一个sql注入的测试代码如下: $type = $_GET['type'];$types = [2,3,...

o0无忧亦无怖
10分钟前
14
1
Yarn(包管理器) 的基本用法

Yarn是一个快速、可靠、安全的依赖管理工具,是npm的代替品。 Yarn对你的代码来说是一个包管理工具,你可以通过它使用全世界开发者的代码,或者分享自己的代码。 安装Yarn: 操作系统不同,安...

帝子兮
11分钟前
1
0
阿里云HBase全新发布X-Pack NoSQL数据库再上新台阶

一、八年双十一,造就国内最大最专业HBase技术团队 阿里巴巴集团早在2010开始研究并把HBase投入生产环境使用,从最初的淘宝历史交易记录,到蚂蚁安全风控数据存储。持续8年的投入,历经8年双...

阿里云官方博客
12分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部