支付宝小程序rich-text富文本的注意事项

最新推荐文章于 2024-09-26 17:23:15 发布

原创最新推荐文章于 2024-09-26 17:23:15 发布 · 3.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#支付宝小程序 #富文本 #rich-text #wxparse #单标签

支付宝小程序专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了在支付宝小程序中遇到的图片显示问题及解决方案。官方推荐的富文本组件不支持图片，使用特定插件时需注意标签闭合，如<br/>和<img/>。推荐使用WxParse支付宝版插件，提供了代码示例，包括页面引用、css和js引入方法。

首先，官方推荐的默认组件不支持图片。
官方推荐的插件

这个插件存在一个巨大的坑。用这个插件下的富文本的html字符串里的标签都需要闭合，比如说<br> 一定要是<br/> 最明显的是<img> 这样的一定要写成<img/> 否者支付宝小程序页面显示不出来。就很尴尬。所以这个项目就放弃用这个插件。改用WxParse 支付宝版的。

支持支付宝的插件，和微信用法一样。文件有所改动
话不多说，直接上代码~

首先页面是要引用的，路径自己改哈~

<import src="../../wxParse/wxParse.axml"/>

首先页面是要引用的
css 的引用

@import "../../wxParse/wxParse.acss";

在这里插入图片描述

js引入部分就需要多一点

var wxParse = require('../../wxParse/wxParse.js');
import HtmlToJson from '../../wxParse/html2json.js';
var wxDiscode = require('../../wxParse/wxDiscode.js');
var HTMLParser = require('../..//wxParse/htmlparser.js');

在这里插入图片描述

wxParse.wxParse('article', 'html', article, that, 5); 在这里插入图片描述

代码就不解释了，很一目了然。

在这里插入图片描述

页面引入

  <template is="wxParse" data="{{wxParseData:article.nodes}}"/>

百度云永久分享链接 wxParse插件

链接：https://pan.baidu.com/s/1GpAp-nHtCafSwX_dcO-8AA 提取码：v2uh

支付宝小程序rich-text富文本的注意事项

百度云 永久分享链接 wxParse插件

百度云永久分享链接 wxParse插件