支付宝小程序兼容taro富文本组件＜RichText /＞

最新推荐文章于 2024-10-18 10:42:45 发布

若梦丶忆流年

最新推荐文章于 2024-10-18 10:42:45 发布

阅读量1.3k

点赞数 1

文章标签：小程序 taro 前端

本文链接：https://blog.csdn.net/qq_43488583/article/details/127735351

版权

本文介绍了在支付宝小程序中如何实现与Taro富文本组件＜RichText /＞的兼容。由于微信小程序支持nodes为字符串，而支付宝小程序需要数组格式，因此通过使用mini-html-parser2插件将字符串转换为数组，解决了兼容问题。步骤包括安装插件和在富文本组件使用时引入。

摘要由CSDN通过智能技术生成

原因：微信小程序nodes支持字符串，但是支付宝小程序只支持数组可以使用 mini-html-parser2 插件对字符串进行转换

在这里插入图片描述

1. 首先安装 mini-html-parser2 插件

 mini-html-parser2 
 github仓库：https://github.com/ant-mini-program/mini-html-parser/blob/master/README.md

npm install mini-html-parser2 --save
--不行的话
yarn add mini-html-parser2 --save
--不行的话，看错误信息，根据错误信息指示执行下面的代码
yarn add mini-html-parser2 --save -W

2. 在使用富文本组件的时候，引入

import parse from 'mini-html-parser2';  // 兼容支付宝小程序富文本渲染

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

若梦丶忆流年

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Taro React组件开发（2） —— RuiEditor 富文本编辑器【兼容H5和微信小程序】

止于至善

12-27

1759

在react中是关键字，不能使用，只能用替代；添加允许子节点修改或复制；contenteditable 获得焦点后的边框设置 {outline: 0px solid transparent;}；此处只是实现了一个简单的富文本编辑器，其他功能可以根据此基础添加，比如字号，颜色，背景色等。

Taro/react/微信小程序 无文件表单提交，兼容new FormData()方法

01-18

微信小程序中，接口类型为multipart/form-data时没有文件需要上传，Taro.uploadFile的filePath又不能为空，而微信小程序中又没有new FormData() 参考链接：...

2 条评论您还未登录，请先登录后发表或查看评论

支付宝小程序 富文本解析插件

01-08

wxParse的插件包本身是微信小程序用来解析富文本的支付的些许不同，做了一点改善。

支付宝小程序中富文本解决方法

03-12

开发支付宝小程序中，富文本的内容不能直接被使用，此文件即解决了富文本不能用的问题

小程序富文本组件mp-html安装和配置指南

最新发布

gitblog_01243的博客

10-18

1010

小程序富文本组件mp-html安装和配置指南 mp-html mp-html是一个微信小程序HTML组件库，适合用于快速搭建微信小程序界面。特点：组件丰富、易于使用、支持自定义样式。项目地址: https://gitcode.c...

支付宝小程序 富文本解析 wxParse

01-07

Taro 中使用 富文本

业余前端的职业经历

09-23

1862

有的时候经常后端会给我们返回一串含html 节点的文本，让我们前端自己渲染，如果是web端的话我们直接。使用 dangerouslySetInnerHTML 就可以了但是在Taro中没有这个属性就需要我们来解析 富文本了这个也简单 Taro 借鉴小程序的设计理念，直接有原生的解析富文本的标签 RichText import { View, Image, Text, RichText } from "@tarojs/components"; render() { return ( &l

支付宝小程序富文本解析组件

05-19

根据wxparse改动而成，https://github.com/yaoshanliang/wxParse

import React, { useState, useCallback } from "react"; import Taro from "@tarojs/taro"; import { View } from "@tarojs/components"; import { LgPopLayer, LgButton } from "lancoo-ui-mobile"; import "../index.scss"; export const Jsx = () => { const [isOpen, setIsOpen] = useState(false); const handleLayer = useCallback(() => { setIsOpen(!isOpen); }, [isOpen]); const confirm = useCallback(() => { Taro.showToast({ title: "点击确定", icon: "none" }); handleLayer(); }, [handleLayer]); return ( <View className="iframe__viewport"> <View className="viewport__title">向下弹出</View> <View className="viewport__main"> <LgButton onClick={handleLayer}>显示上方弹出层</LgButton> <LgPopLayer position="top" isOpen={isOpen} confirm={confirm} showLayer={handleLayer} > <View className="lg-poplayer__content">自定义内容</View> </LgPopLayer> </View> </View> ); }; 改成类组件写法

07-11

<LgButton onClick={this.handleLayer}>显示上方弹出层</LgButton> <LgPopLayer position="top" isOpen={isOpen} confirm={this.confirm} showLayer={this.handleLayer} > <View className="lg-poplayer__...

支付宝小程序-富文本解析组件

w001yy的博客

11-12

595

支付宝小程序富文本解析组件和微信的稍微有点不同，参考 https://github.com/yaoshanliang/wxParse

【支付宝小程序】 rich-text的应用

weixin_34342578的博客

06-29

616

问题描述：在支付宝小程序中，rich-text的nodes 属性只支持使用 Array 类型，如果需要支持 HTML String，则需要自己将 HTML String 转化为 nodes 数组解决方案：使用mini-html-parser2 代码样例： index.axml <rich-text type="text" nodes="{{htmlData}}"><...

小程序富文本组件,支持渲染和编辑html,支持在微信,QQ,百度,支付宝,头条和uni-app平台使用- jin-yufeng / mp-html

01-27

mp-html 一个强大的小程序富文本组件功能介绍支持在多个主流的小程序平台和 uni-app 中使用支持丰富的标签（包括 table、video、svg 等）支持丰富的事件效果（自动预览图片、链接处理等）支持设置占位图（加载中、出错时、预览时）支持锚点跳转、长按复制等丰富功能支持大部分 html 实体丰富的插件（关键词搜索、内容编辑等）效率高、容错性强且轻量化（≈24.5KB，9KB gzipped）查看了解更多使用方法原生平台 npm 方式在项目目录下安装组件包 npm install mp-html 开发者工具中勾选使用 npm 模块并点击工具 - 构建 npm 在需要使用页面的 json 文件中添加 { "usingComponents": { "mp-html": "mp-html" } } 在需要使用页面的 wxml 文件

uni-app 富文本 小程序 富文本 （微信小程序、支付宝小程序、百度小程序）直接套用pc端富文本问题解析

Li_Ning21的博客

12-05

2018

微信跟百度直接使用 u-parse组件，效果还是不错的，注意一点是a标签的复制提示语，自己需要uni.hideLoading()一下，再重置。支付宝相对复杂一点，采用原生rich-text 标签，搭配官方推荐的mini-html-parser2，处理富文本。同时需要处理一下pc端可正常展示，但是小程序富文本不支持的部分：直接上组件代码

微信小程序组件之rich-text，转义显示富文本操作

阿里巴啦的博客

12-11

7457

小程序的rich-text组件使用：接口获取的数控数据转义后 wxml结构 &amp;amp;amp;amp;amp;lt;view class='content'&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;view class='in'&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;vie

uniapp支付宝小程序项目rich-text不生效解决办法

HPlove__77的博客

09-21

1528

最近在用uniapp写支付宝小程序项目时，在一个需求中，后端返回富文本内容需要在小程序中显示。最后this.contentSign为rich-text组件中nodes绑定的内容。uniapp中的rich-text组件不能在支付宝小程序中显示的原因是因为nodes只支持Array类型的参数。如果要方便使用rich-text可以通过引入插件的方式或者将nodes的值设置为Array类型。之后通过尝试各种方法，通过引入插件parse可以在rich-text组件中显示。如下这种的html标签包含的字符串。

微信小程序和支付宝小程序的富文本显示

weixin_46383294的博客

02-23

984

使用taro开发的小程序，使用RichText 标签实现富文本的渲染将文本内容传给 nodes 属性微信小程序nodes支持字符串，但是支付宝小程序只支持数组可以使用 mini-html-parser2 插件对字符串进行转换安装插件： yarn add mini-html-parser2 引入插件 import parse from 'mini-html-parser2'; 对字符串进行转换 let htmlNodes = []; parse(content, (err, htmlNode

接口返回的富文本数据怎么在小程序渲染

qq_44749901的博客

05-20

1269

小程序渲染富文本返回的数据时使用的方法与修改里面的样式 1. 富文本返回的数据无法直接在小程序上面渲染出来,这时候就用到rich-text标签了使用方法:在nodes里直接放入接口返回的数据 <view class="content"> <rich-text class="center" nodes="{{bannerinfo.wx_content}}"></rich-text> </view> 2. rich-text渲染后怎么修改里面标签的样式,比

使用taro开发小程序实现富文本

罗毅豪的博客

01-06

103

富文本即RichText，一般是有文字有图的一种组合。示例如下： "第一段<img src="result.png">第二段第三段" 这是html串，有p和img标签。使用taro开发小程序实现富文...

移动端处理富文本的JS代码

小纯洁的博客

12-17

502

忘记出处，有侵权联系。 /** * 处理富文本里的图片宽度自适应 * 1.去掉img标签里的style、width、height属性 * 2.img标签添加style属性：max-width:100%;height:auto * 3.修改所有style里的width属性为max-width:100% * 4.去掉 标签 * @param html * @returns {void|string|*} */ function formatRichText(html){ .