支付宝小程序开发——rich-text富文本组件支持html代码
前言:
与微信小程序不同,支付宝小程序的富文本组件并不能直接支持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代码的更多相关文章
- 微信小程序中显示html富文本的方法
微信小程序中显示html富文本的方法 使用方法:git地址:https://github.com/icindy/wxParse 一.下载wxParse文件 二.在要引入的页面的js文件中,引入文件 j ...
- Tarojs+redux支付宝小程序开发攻略
技术选型 对于习惯react语法的开发者来讲,RN是实现native的必备工具. 我们甚至可以屏蔽官方稳定而强大的配置层,直接上手开发. 而后,同为表层React语法的Rax.Taro这样的开源多端开 ...
- 支付宝小程序开发之与微信小程序不同的地方
前言: 本文仅汇总微信小程序移植支付宝小程序过程中遇到的一些不同的地方,详细请参考官方开发文档. 网络请求: 对于网络请求,基本上改动不大,也就支付宝小程序没有responseType属性及响应码字段 ...
- 支付宝小程序开发——获取位置API没有城市区号的最佳处理方案
前言: 需要对城市区号进行判断,但是支付宝小程序提供的my.getLocation() API返回的数据中只有6位的城市行政代码,诸如:深圳(440300),并没有区号(0755),那么怎么办呢? 需 ...
- 支付宝小程序开发——如何获取支付宝小程序页面的https链接
前边介绍过通过配置支付宝Scheme协议alipays://来实现h5到小程序的跳转,其实还可以获取小程序页面的https格式链接,虽然支付宝官方并没有直接提供方案,但是通过小程序后台的“码管理”给页 ...
- 支付宝小程序开发——H5跳转到小程序(获取小程序页面的链接)
前言: 这个问题支付宝小程序官方文档并没有专门说明,钉钉群的官方技术支持给了个开发者社区的帖子,详见:如何跳转小程序. 如果配置的页面没有参数还好,不会出问题,如果有参数,很可能配出来的链接无法正常获 ...
- 小程序解析html之富文本插件wxParse
近期,开发小程序时,遇到后台给我返回了一串html代码,需要我这边来解析,头疼了好久,网上找资料找了变天,终于找到wxParse,然而看到的都是针对于页面中有单个html或者固定数据的,我现在的问题是 ...
- Selenium Webdriver——JS处理rich text(富文本框)
126邮件正文邮件的rich text 先让selenium切换到iframe中 driver.switchTo().frame(driver.findElement(By.className(&qu ...
- selenium处理rich text(富文本框)
WordPress 的 rich text 采用js,先让selenium切换到iframe中 driver.switchTo().frame("content_ifr"); 然 ...
随机推荐
- prometheus学习系列二: Prometheus安装
下载 在prometheus的官网的download页面,可以找到prometheus的下载二进制包. [root@node00 src]# cd /usr/src/ [root@node00 src ...
- python 导入导出依赖包命令
程序中必须包含一个 requirements.txt 文件,用于记录所有依赖包及其精确的版本号.如果 要在另一台电脑上重新生成虚拟环境,这个文件的重要性就体现出来了,例如部署程序时 使用的电脑.pip ...
- warning警告问题解决1
warning警告问题, 这时可以不去管它, 但如果想解决, 可以这样做: c:\python\lib\site-packages\locust\core.py:17: MonkeyPatchWarn ...
- FreeBSD安装过程
对于现在版本,安装过程中该使用哪些键,现简单总结: Space:选中/取消选中: Tab:切换,主要是分区界面时用它选择输入行: Enter:确定(并进入下一页): 方向键:在一些子组里更换输入项得用 ...
- Httpd服务入门知识-Httpd服务常见配置案例之显示服务器版本信息
Httpd服务入门知识-Httpd服务常见配置案例之显示服务器版本信息 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.httpd配置文件的组成 1>.主要组成 Globa ...
- 如何测试Web服务.3
-->全文字数:2254,需要占用你几分钟的阅读时间 ,您也可以收藏后,时间充足时再阅读- ->第一节讲了<Web服务基础介绍>,第二节讲了<Web服务测试工具> ...
- OAuth 第三方登录授权码(authorization code)方式的小例子
假如上面的网站A,可以通过GitHub账号登录: 下面以OAuth其中一种方式,授权码(authorization code)方式为例. 一.第三方登录的原理 所谓第三方登录,实质就是 OAuth 授 ...
- 编程题:SaturdayNightStay
"输入2019年的一个时间段,开始时间代表出发,结束时间代表在那一天返回,判断在该时间段内,如果旅行有多少个子时间段可以在周六晚上休息" * 周六晚上休息,即子时间段必须包含周六, ...
- 项目Alpha冲刺(团队) -- 总结及汇总
项目Alpha冲刺(团队) --总结 1.团队信息 团队名 :男上加男 成员信息 : 队员学号 队员姓名 个人博客地址 备注 221600427 Alicesft https://www.cnblog ...
- 在 Less 中使用 calc() 的坑:height: calc(~"50% - 21px");
注意点: 中间的运算符两头都要有空格 写法(加上~符号):height: calc(~"50% - 21px"); 出处:https://mp.weixin.qq.com/s/CY ...