小程序下wxParse 渲染html代码

2024-06-02 10:50:26

在内容类型的小程序中，通常使用富文本编辑器添加内容，如summernote等。

内容存储在数据库中，类似余下面这与的html+css的混合代码

<p><img src="https://img-blog.csdnimg.cn/img_convert/2f5107a290cc223731167253c953c1d1.png" style="width: 50%;"></p><p>近日，据以色列财经媒体 Globes 报道，由巴塞罗那球星梅西代言的 Finney 区块链手机（以下简称 Finney）遭遇了前所未有的经济危机，由于这款区块链手机销量远远未达预期标准，其制造商以色列通讯技术公司 Sirin Labs 不得已开始了大规模裁员，裁员规模高达25%。</p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p>号称全球第一款区块链手机</p><p><br></p><p><br></p><p><br></p><p>“区块链手机”的概念是由 Sirin Labs 于2017年9月首次提出。</p><p><br></p>

在小程序中，使用view 等容器渲染这些代码时，会原样展示，原因在于小程序并不支持这些html标签。

这就需要将 html 标签内容转换为 wxml 标签内容，如将html 中的 img 转换成小程序中的 image。

wxPare 就是干这个的！

使用步骤

第一步：下载

wxParse 下载

下载完成，解压压缩文件，目录如下

将 wxParse 文件夹拷贝到小程序中，可以放到根目录，也可以放到其他目录，我放到了 utils 目录下

第二步：引入文件

要想使用此插件，需要分别在小程序页面的视图、样式和逻辑文件中引入相关文件

在 xx.wxss 中引入样式文件

在 xx.js 中文件中引入js文件

在 xx.ml 中引入如下视图文件

第三步：编写代码替换

下面就是将html 代码替换成 wxml 代码

在解释这行代码之前，首先看一下我 article 变量的结构

其中，content 键中存储了 html 结构代码，我们的目的就是将其替换成 wxml

下面再解释下面这行代码中参数的意义

参数1：替换之后的变量名称，这个变量我们会在视图中使用，变量名称自定义

参数2：表示源代码为html格式

参数3：通过上面article 变量结构截图，我们知道，article.content 就是要替换的存储着 html 代码的字段名称

参数4：当前页面的上下文，如果没有在回调函数中，可以使用 this

参数5：imagePadding为当图片自适应是左右的单一padding(默认为0,可选)

最后一步：修改视图代码

最后将如下代码放到原本显示 article.content 变量的地方

注意：标注的变量名称“content”就是上面方法中的第一个参数的名称

小程序下wxParse 渲染html代码相关推荐

微信小程序使用wxparse插件，渲染文章不换行问题
微信小程序使用wxParse插件渲染富文本内容,不换行显示,影响阅读,我的解决方法:在wxParse.wxss中加上如下样式:(在我的小程序里面是有效的) view{/* word-break:bre ...
下拉多选框微信小程序_微信小程序下拉框功能的实例代码
微信小程序组件里没有下拉框,正好要用到,记下来以后参考 wxml代码选择接收班级 {{grade_name}} {{item}} wxss代码 /* 顶部 */ .top{ width: 100vw ...
微信小程序C语言通讯录,微信小程序のwxml列表渲染
列表渲染存在的意义以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. {{index+1}}:{{item.name}} Page({ data: { message ...
小程序中WxParse循环解析返回的富文本数据
WxParse循环解析一.遇到问题最近在做小程序,遇到这样一个需求: 将百度的Ueditor编辑器存入的文本数据显示在小程序中,需要保留之前的样式,这就用到了 WxParse插件,它能够用解析ht ...
微信小程序webview、渲染富文本
先说点题外话,本来是写在简书上面的文章,现在简书不支持发布了,只能在csdn上上传了.... WebView对于前端开发的小伙伴来讲肯定不陌生,功能是很轻大的,就是一个而普通的html界面.今天主要讲 ...
微信小程序使用wxparse，显示图片的相对路径问题
微信小程序使用wxparse,有一个问题,就是我们在网页后台编辑器里面的图片如果上传的时候采用了相对路径,在wxparse里就不能正常显示,但是,如果在编辑器里直接上传成绝对的网络地址路径之后,如果万 ...
wxparse的使用php返回数组输出,微信小程序中WxParse循环解析返回的富文本数据
WxParse循环解析一.遇到问题最近在做小程序,遇到这样一个需求: 将百度的Ueditor编辑器存入的文本数据显示在小程序中,需要保留之前的样式,这就用到了 WxParse插件,它能够用解析ht ...
微信小程序使用wxParse解析html
最近项目上遇到在微信小程序里需要渲染文章,后台返回的是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现. 首先我们在gith ...
【微信小程序canvas】实现小程序手写板用户签名(附代码)
[微信小程序canvas]实现小程序手写板用户签名(附代码) 工作中公司业务需要的微信小程序用户签字功能先看效果图: wxml <view class="wrapper"& ...
微信小程序的页面渲染（if/for）
下面,粗略的介绍一下微信小程序的条件渲染.列表渲染.数据绑定等,详细的内容大家可以去看微信小程序的API,在此只做简单描述,希望能帮助到大家条件渲染  <vi ...

最新文章

热门文章