首页>内容

uniapp富文本展示

小坏蛋 / / 评论 / 阅读 / 赞
作者有点忙，还没写简介

文章描述：

在支付宝小程序中展示内容使用效果不是很理想，mp-html很好的解决了支付宝小程序内容展示功能

rich-text

template

<rich-text :nodes="content"></rich-text>

script

export default {
    data() {
        return {
			content: '<h1 style=\"text-align:center;\">地下城<font color=\"#df0029\">与</font>勇士</h1><p>狂战士、剑魂、鬼泣、阿修罗</p><h3>1、转职</h3><p>剑魂→&nbsp;<font color=\"#5bbd2b\">剑圣→&nbsp;</font>剑神</p><img src=\"https://www.miyil.com/wp-content/themes/myui/images/logo.png\" />',
        }
    },
    methods: {}
    //...
}

微信小程序效果

这里会发现文本可以显示，字体样式丢失。

支付宝小程序没有显示出来

 

 

安装mp-html

npm install mp-html

template

<template>
    <view class="content">
		<mp-html :content="content" />
    </view>
</template>

script

import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html';
export default {
	components: {
		mpHtml
	},
    data() {
        return {
			content: '<h1 style=\"text-align:center;\">地下城<font color=\"#df0029\">与</font>勇士</h1><p>狂战士、剑魂、鬼泣、阿修罗</p><h3>1、转职</h3><p>剑魂→&nbsp;<font color=\"#5bbd2b\">剑圣→&nbsp;</font>剑神</p><img src=\"https://www.miyil.com/wp-content/themes/myui/images/logo.png\" />',
			
        }
    },
    methods: {}
    //...
}

微信小程序

支付宝小程序

这里会发现微信小程序和支付宝小程序都显示正常，以及图片显示都没有问题

 

发布时间：2023/01/13

相关阅读

发表评论

登录

最近发表