前言:

与微信小程序不同,支付宝小程序的富文本组件并不能直接支持html代码,如:

如上,支付宝小程序的富文本组件只支持数组类型,html代码需要使用 mini-html-parser 转换,具体用法后文详细说明。

mini-html-parser2:

1. 插件安装:

小程序开发者工具左侧文件列表界面空白处单击右键——在终端中打开:

2.输入以下代码安装插件:

npm install mini-html-parser2 --save

安装完成后文件列表中就多了node_modules目录了:

3.页面引入插件及调用:

//引入插件
import parse from 'mini-html-parser2';
//使用插件进行html代码转换(htmlStr为html代码,htmlNodes是转换后的数组)
parse(htmlStr, (err, htmlNodes) => {
if (!err) {
self.setData({
htmlNodes
  });
}
})
<rich-text nodes="{{htmlNodes}}" />

支付宝小程序开发——rich-text富文本组件支持html代码的更多相关文章

  1. 微信小程序中显示html富文本的方法

    微信小程序中显示html富文本的方法 使用方法:git地址:https://github.com/icindy/wxParse 一.下载wxParse文件 二.在要引入的页面的js文件中,引入文件 j ...

  2. Tarojs+redux支付宝小程序开发攻略

    技术选型 对于习惯react语法的开发者来讲,RN是实现native的必备工具. 我们甚至可以屏蔽官方稳定而强大的配置层,直接上手开发. 而后,同为表层React语法的Rax.Taro这样的开源多端开 ...

  3. 支付宝小程序开发之与微信小程序不同的地方

    前言: 本文仅汇总微信小程序移植支付宝小程序过程中遇到的一些不同的地方,详细请参考官方开发文档. 网络请求: 对于网络请求,基本上改动不大,也就支付宝小程序没有responseType属性及响应码字段 ...

  4. 支付宝小程序开发——获取位置API没有城市区号的最佳处理方案

    前言: 需要对城市区号进行判断,但是支付宝小程序提供的my.getLocation() API返回的数据中只有6位的城市行政代码,诸如:深圳(440300),并没有区号(0755),那么怎么办呢? 需 ...

  5. 支付宝小程序开发——如何获取支付宝小程序页面的https链接

    前边介绍过通过配置支付宝Scheme协议alipays://来实现h5到小程序的跳转,其实还可以获取小程序页面的https格式链接,虽然支付宝官方并没有直接提供方案,但是通过小程序后台的“码管理”给页 ...

  6. 支付宝小程序开发——H5跳转到小程序(获取小程序页面的链接)

    前言: 这个问题支付宝小程序官方文档并没有专门说明,钉钉群的官方技术支持给了个开发者社区的帖子,详见:如何跳转小程序. 如果配置的页面没有参数还好,不会出问题,如果有参数,很可能配出来的链接无法正常获 ...

  7. 小程序解析html之富文本插件wxParse

    近期,开发小程序时,遇到后台给我返回了一串html代码,需要我这边来解析,头疼了好久,网上找资料找了变天,终于找到wxParse,然而看到的都是针对于页面中有单个html或者固定数据的,我现在的问题是 ...

  8. Selenium Webdriver——JS处理rich text(富文本框)

    126邮件正文邮件的rich text 先让selenium切换到iframe中 driver.switchTo().frame(driver.findElement(By.className(&qu ...

  9. selenium处理rich text(富文本框)

    WordPress 的 rich  text 采用js,先让selenium切换到iframe中 driver.switchTo().frame("content_ifr"); 然 ...

随机推荐

  1. mongodb 通过嵌入文档中的字段排序

    mongodb中的全部数据: db.testInfo.find({}) .sort({_id:-1}) .limit(100) 查询结果: /* 1 createdAt:2019/10/11 下午5: ...

  2. tensorflow批量读取数据

    Tensorflow 数据读取有三种方式: Preloaded data: 预加载数据,在TensorFlow图中定义常量或变量来保存所有数据(仅适用于数据量比较小的情况). Feeding: Pyt ...

  3. 控制跳转的tree视图显示的列表项数量

    在act_window中,定义limit字段,可以指定打开的tree视图的记录数量.   limit:列表视图中每个页面的记录数.

  4. 【转】大众点评CAT开源监控系统剖析

    https://www.cnblogs.com/yeahwell/p/cat.html 参考文档: 大众点评的实时监控系统分析(一) CAT_source_analyze 透过CAT,来看分布式实时监 ...

  5. JVM垃圾回收器理论分析与详解【纯理论】

    继续上次[https://www.cnblogs.com/webor2006/p/10740084.html]的理论继续..有点吐血的感觉,都不知道学了这么一大堆理论有何实际意义,本身JVM就是个理论 ...

  6. 201671030111 李蓉 实验十四 团队项目评审&课程学习总结

    项目 内容 这个作业属于哪个课程 软件工程 这个作业的要求在哪里 实验十四 团队项目评审&课程学习总结 作业学习目标 掌握软件项目评审会流程,反思总结课程学习内容. 任务一:结合本学期课程学习 ...

  7. 记录:http协议+response+request+session+cookie

    1.http协议 http协议也叫作超文本传输协议,定义了浏览器向怎样向服务器请求资源和服务器怎样将资源传给浏览器.http协议是面向事务的应用层协议,是万维网能够传递资源的可靠保障. 目前http协 ...

  8. 基于数组的栈(Java)

    package com.rao.linkList; /** * @author Srao * @className ArrayStack * @date 2019/12/3 13:41 * @pack ...

  9. 严重: Exception sending context initialized event to listener instance of class org.springframework.web.context.ContextLoaderListener

    十月 30, 2019 11:12:35 下午 org.apache.catalina.core.StandardContext listenerStart 严重: Exception sending ...

  10. Maven下创建SSM项目的所有依赖和插件

    记录下来,方便以后使用 tomcat:7 Maven:3.6.1 IDEA:2018.3 <properties> <spring.version>5.1.5.RELEASE& ...