前言:

与微信小程序不同,支付宝小程序的富文本组件并不能直接支持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. Pandas 之 DataFrame 常用操作

    import numpy as np import pandas as pd This section will walk you(引导你) through the fundamental(基本的) ...

  2. k8s的常用命令(一)

    常用的kubectl命令   kubectl run kubia --image=luksa/kubia --port=8080 --generator=run/v1   --image 指定镜像 - ...

  3. Virtualbox 设置虚拟机和物理机共享文件夹

    Virtualbox 设置虚拟机和物理机共享文件夹 概述 当我们在本地机安装好一个虚拟机后,特别是安装linux系统的朋友们,经常需要将本地机的文件传递到虚拟机中, 能实现的方式肯定是多式多样的,就本 ...

  4. 【原】python 检查网站访问是否超时,并用钉钉机器人报警

    #!/usr/bin/env python import requests import json import logging webhook="上面创建钉钉机器人的webhook地址&q ...

  5. Httpd服务入门知识-Httpd服务常见配置案例之设定默认字符集

    Httpd服务入门知识-Httpd服务常见配置案例之设定默认字符集 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看生产环境中使用的字符集案例 1>.查看腾讯设置的默认 ...

  6. 4.LVS的三种工作模式_DR模式

    1.DR模式(直接路由模式:Virtual Server via Direct Routing) DR模式是通过改写请求报文的目标MAC地址,将请求发给真实服务器的,而真实服务器响应后的处理结果直接返 ...

  7. deployment:声明式的升级应用

    9.1.使用RC实现滚动升级 #kubectl rolling-update kubia-v1 kubia-v2 --image=luksa/kubia:v2 使用kubia-v2版本应用来替换运行着 ...

  8. tomcat日志分割

    1.下载(最新版本)并解压,cd进入安装目录 #  wget http://cronolog.org/download/cronolog-1.6.2.tar.gz # tar zxvf cronolo ...

  9. httprunner学习13-环境变量.env

    前言 一般来说,在进行实际应用的开发过程中,应用会拥有不同的运行环境,通常会有以下环境: 本地开发环境 测试环境 生产环境 在不同环境中,我们可能会使用不同的数据库或邮件发送驱动等配置,这时候则需要通 ...

  10. oracle之percent_rank() over()函数和PERCENTILE_CONT() within group()over()函数详解

    创建一个临时表 create table EMP ( EMPNO NUMBER(4) not null, ENAME VARCHAR2(10), JOB VARCHAR2(9), MGR NUMBER ...