taro小程序展示富文本

Easter79
• 阅读 728

在微信小程序下会用到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);
            }
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
梦
3年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
Easter79 Easter79
3年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
Easter79 Easter79
3年前
Taro_Mall 是一款多端开源在线商城小程序.
介绍Taro\_Mall(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fgithub.com%2Fjiechud%2Ftaromall)是一款多端开源在线商城应用程序,后台是基于litemall基础上进行开发,前端采用Taro框架编写,现已全部完成小程序和h5移动端,后续会
Easter79 Easter79
3年前
Taro 1.2:将已有微信小程序转换为多端应用
在距离Taro1.1发布之后一个月,经历了500多次提交和17 个预览版本的迭代之后,我们有信心在今天发布Taro1.2正式版。Taro1.2比起Taro1.1和其它的小程序开发框架,增加了许多首次在小程序框架上实现的功能,这些功能包括但不限于:微信小程序转多端应用字节跳动(头
Stella981 Stella981
3年前
Jenkins+Ansible+Gitlab自动化部署三剑客
JenkinsAnsibleGitlab自动化部署三剑客小中大showerlee2016031113:00Ansible(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fwww.
Easter79 Easter79
3年前
Taro
微信小程序转Taro (转发https://nervjs.github.io/taro/docs/taroize.html(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fnervjs.github.io%2Ftaro%2Fdocs%2Ftaroize.html))Taro
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k