前言:

与微信小程序不同,支付宝小程序的富文本组件并不能直接支持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. Golang: 解析JSON数据之三

    前面我们介绍了 Marshal 和 Unmarshal 方法,今天再解一下另外两个 API:Encoder 和 Decoder. Encoder Encoder 主要负责将结构对象编码成 JSON 数 ...

  2. Odoo搜素视图过滤器之筛选与分组

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826168.html 一:过滤器 搜索视图还可以包含<filter>元素,定制过滤器. 过滤器 ...

  3. MySQL 8.x 函数和操作符,官方网址:https://dev.mysql.com/doc/refman/8.0/en/functions.html

    MySql 8.x 函数和操作符,官方网址:https://dev.mysql.com/doc/refman/8.0/en/functions.html

  4. 编程语言和python介绍, 变量,小整数池,垃圾回收机制

    1.编程语言的发展史 计算机是基于电工作(基于高.低电平)1010010101011 1.机器语言 优点:执行速度够快 缺点:开发效率非常低 2.汇编语言(通过英文字符组成) 优点:执行效率相较于机器 ...

  5. react native 依赖库管理:入门

    目标文件:package.json { .... "dependencies": { "react": "16.8.3", "re ...

  6. react native iOS真机调试-联网问题与js严格模式

    rn:strict mode does not allow function declarations in a lexically nested statement https://blog.csd ...

  7. hdu1010-Tempter of the Bone-(dfs+奇偶剪枝)

    http://acm.hdu.edu.cn/showproblem.php?pid=1010 翻译:有只狗被困了,S是起点,D是门,W是墙不能走,‘ . ’是可以走的路,走一次就会在1秒内坍塌,也就是 ...

  8. 平衡二叉树(Java)

    package com.rao.linkList; /** * @author Srao * @className AvlTree * @date 2019/12/3 21:23 * @package ...

  9. 15-网页,网站,微信公众号基础入门(网页版MQTT,做自己的MQTT调试助手)

    https://www.cnblogs.com/yangfengwu/p/11198572.html 说一下哈,,如果教程哪里看不明白...就去自己百度补充哪一部分,,学习不是死记硬背,需要会学习,永 ...

  10. Kubeasz部署K8s基础测试环境简介

    下面介绍使用Kubeasz部署K8s集群环境. https://github.com/easzlab/kubeasz在需要使用kubeeasz项目安装的k8s时,需要将所有需要它来部署的节点上,都安装 ...