taro小程序展示富文本

Easter79 等级 116 0 0
标签: 小程序

在微信小程序下会用到wxParse这个东西来达到html转换wxml的效果,

taro小程序官方也给出了示例,地址

这里封装成自己的组件:

import Taro, { Component } from "@tarojs/taro"
import { View } from "@tarojs/components"
import WxParse from '../../utils/wxParse/wxParse.js'
import "../../utils/wxParse/wxParse.scss"

export default class ParseComponent extends Component {
    componentDidMount() {}
    defaultProps = {
        mark: ""
    }
    render() {
 
        if (this.props.mark) {
            let domText = this.props.mark
            WxParse.wxParse("domText", "html", domText, this.$scope, 5);
        }
        return (
            <View>
                {process.env.TARO_ENV === "weapp" ? (
                    <View>
                        <import src='../../utils/wxParse/wxParse.wxml' />
                        <template is='wxParse' data='{{wxParseData:domText.nodes}}'
                        />
                    </View>
                ) : (
                    <View>只在小程序里支持</View>
                )}
            </View>
        );
    }
}

另外,转化之后的图片地址是相对地址,在小程序中是无法显示的,所以需要到html2json.js文件中加上图片的域名地址:

//对img添加额外数据
            if (node.tag === 'img') {
                node.imgIndex = results.images.length;
                var imgUrl = '域名地址' + node.attr.src;
                if (imgUrl[0] == '') {
                    imgUrl.splice(0, 1);
                }
                imgUrl = wxDiscode.urlToHttpUrl(imgUrl, __placeImgeUrlHttps);
                node.attr.src = imgUrl;
                node.from = bindName;
                results.images.push(node);
                results.imageUrls.push(imgUrl);
            }
收藏
评论区

相关推荐

Taro 3.1 版本正式发布:面向定制化的小程序开发
自 Taro 3.1 体验版推出后,我们不断地根据社区的反馈意见对 3.1 版本进行打磨。主要改进了开放式架构、引入了 CustomWrapper 组件以解决性能问题、提出了原生小程序渐进式混合使用 Taro 的解决方案。经历了 12 个 beta 版本后,终于迎来了 3.1 正式版🎉一、Highlights
Taro
**微信小程序转Taro  (转发[https://nervjs.github.io/taro/docs/taroize.html](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fnervjs.github.io%2Ftaro%2Fdocs%2Ftaroize.html))** Taro
Taro 1.2:将已有微信小程序转换为多端应用
在距离 Taro 1.1 发布 之后一个月,经历了 **500** 多次提交和 **17** 个预览版本的迭代之后,我们有信心在今天发布 Taro 1.2 正式版。 Taro 1.2 比起 Taro 1.1 和其它的小程序开发框架,增加了许多首次在小程序框架上实现的功能,这些功能包括但不限于: * 微信小程序转多端应用 * 字节跳动(头
Taro 3 正式版发布:开放式跨端跨框架解决方案
从 Taro 第一个版本发布到现在,Taro 已经接受了来自于开源社区两年多的考验。今天我们很高兴地在党的生日发布 Taro 3(Taro Next)正式版,希望未来的更多两年能像一名共产主义战士一样经受住更多的考验。以下是 Taro 3 的一些新增特性: 跨框架:React、Nerv、Vue2、Vue3、jQuery— -----------------
Taro Next H5 跨框架组件库实践
![](https://oscimg.oschina.net/oscnet/up-96f83cb51198003133bbb6dfcf26f38b6c9.png) 作者:凹凸曼 - JJ [Taro](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2FNervJS
Taro 「物料市场」及「交流社区」 惊喜上线
多端统一开发框架 Taro 自 2018 年 6 月开源以来,一直受到业界的广泛关注和支持。 目前,Taro GitHub star 数已经突破了 1.8w。作为研发团队,我们为取得的成绩感到欣喜,但也始终不忘初心。一直以来,我们对 Taro 框架不断完善和优化,近期也即将发布全新的大版本(Taro 1.3),将提供快应用和 QQ 小程序的开发支持,Rea
Taro 在京东购物小程序上的实践
Taro 简介 Taro 是一个基于 React 语法规范的多端统一开放框架,大家可以通过 taro.aotu.io 进一步了解。而前段时间 Taro 发布后,京东购物小程序就开始了部分页面基于 Taro 的重构工作,本文便是对商品分类页使用 Taro 进行代码重构的一些实践分享。 混合开发模式 ------ 过去的京东购物小程序未使用任何第三
Taro 支持使用 Vue3 开发小程序
![](https://oscimg.oschina.net/oscnet/c2082f6e-88a3-4968-bf7f-3086ca8dc4ca.jpg) 前言— --- 9 月 19 日凌晨,Vue3 在经过多个开发版本的迭代后,终于迎来了它的正式版本,"One Piece" 的代号也昭示了其开拓伟大航路的野心。 Vue3 的新特性主要有 C
Taro 版本升级权威指南
> “ > > Taro\[1\] 是一款由京东凹凸实验室\[2\]推出的开放式跨端跨框架解决方案,致力于解决小程序、H5、React Native 的跨端同构问题,支持同时使用 React 和 Vue 来进行开发。本文由 Taro 团队成员隔壁老李撰写,旨在帮助 Taro 开发者厘清当前 Taro 多版本之间关系的那些事儿,同时解答有关 Taro 3、T
Taro 牵手腾讯有数,助力小程序数据化运营
> “  > > Taro 引入了腾讯有数的微信小程序无痕埋点能力,为 Taro 的开发者提供真·零开发的 8 大无痕埋点能力以及自定义埋点能力,包含小程序启动、显示、隐藏、页面浏览、页面离开、分享、下拉刷新、上拉触底等八大自动化埋点能力以及搜索、商品归因等定制化埋点,以及经营分析、直播分析、导购分析等能力,让你的小程序可以基于微信生态,串联全场景多触点,
Taro_Mall 是一款多端开源在线商城小程序.
介绍 -- [Taro\_Mall](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fjiechud%2Ftaro-mall)是一款多端开源在线商城应用程序,后台是基于litemall基础上进行开发,前端采用Taro框架编写,现已全部完成小程序和h5移动端,后续会
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。 我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。 ![在这里插入图片描述](https://i
Taro小程序采坑记
[Taro](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Ftaro.aotu.io%2F),京东凹凸实验室出品的适配多端的一个框架, **Taro** 是一套遵循 [React](https://www.oschina.net/action/GoToLink?url=https%3A%2
taro小程序地址选择组件
效果图: ![](https://img2018.cnblogs.com/blog/1141831/201901/1141831-20190120214835041-49988772.gif) address\_picker.tsx: -------------------- import Taro, { Component } from '@
taro小程序展示富文本
在微信小程序下会用到wxParse这个东西来达到html转换wxml的效果, taro小程序官方也给出了示例,[地址](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2FNervJS%2Ftaro-components-test%2Fblob%2Fmaster%2F