zoukankan      html  css  js  c++  java
  • taro小程序展示富文本

    在微信小程序下会用到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);
                }
  • 相关阅读:
    man LVCREATE
    Pyhton---基础---递归
    Python---基础---循环,函数
    Python---基础---dict_tuple_set
    Python---基础---dict和set2
    安卓网络编程学习(1)——java原生网络编程(1)
    使用python爬取B站弹幕和三连
    maven项目整合工具学习
    读阿里巴巴泰山版《java开发手册》总结(2)
    第十三周学习进度
  • 原文地址:https://www.cnblogs.com/pjl43/p/10427759.html
Copyright © 2011-2022 走看看