如果你作為文章資源類或者博客類的小程序你就會(huì)發(fā)現(xiàn)，很多時(shí)候你的文章數(shù)據(jù)都是html格式或md格式，這樣如果不經(jīng)過處理，會(huì)非常難看，所以富文本解析就顯得格外重要了，今天給大家寫一個(gè)uniapp怎么使用富文本解析插件的教程。

最近一直在重構(gòu)typecho博客小程序，但是現(xiàn)在的進(jìn)度很緩慢，總覺著頁(yè)面效果達(dá)不到自己想要的效果。抽空挖一個(gè)重點(diǎn)來給大家寫個(gè)教程，說到博客小程序，最重要的就是文章了，但是從數(shù)據(jù)庫(kù)中獲取的文章格式是md的，如果直接顯示會(huì)顯得很亂，而且會(huì)引起極度不適，所以大家應(yīng)該會(huì)想到富文本解析，有過經(jīng)驗(yàn)的人應(yīng)該用過微信富文本解析插件wxParse，但是他只能在微信端使用，而我們用uniapp的當(dāng)然是希望全端兼容呀。那么往下看吧。

在uniapp插件市場(chǎng)有一些富文本插件，但是教程不是特別詳細(xì)，這里給大家寫一個(gè)詳細(xì)的教程幫助大家消化一下。

安裝插件

進(jìn)入uniapp插件市場(chǎng)找到想要的插件，然后單擊右上角的使用HBuilderX導(dǎo)入插件，然后選擇你需要富文本解析功能的項(xiàng)目。

安裝marked模塊

由于typecho程序默認(rèn)使用的是md語(yǔ)法，這里我們需要先使用marked模塊將md轉(zhuǎn)化為html格式，才能進(jìn)行富文本的渲染。如果你說wordpress，就不用進(jìn)行這一步了。具體安裝步驟如下：右鍵單擊項(xiàng)目根目錄文件夾選擇：使用命令行窗口打開目錄

然后下如下圖所示地方輸入npm install marked，等待完成

使用插件

先將獲得的文章內(nèi)容content進(jìn)行md轉(zhuǎn)html處理，然后再將轉(zhuǎn)化后的內(nèi)容進(jìn)行富文本渲染，具體步驟如下：在需要使用的頁(yè)面的sript導(dǎo)入插件和marked模塊，代碼如下：import marked from 'marked';

import jyfParser from "@/components/jyf-parser/jyf-parser"; //插件安裝你安裝的插件來定

md轉(zhuǎn)html處理var article = marked(content);

這樣得到的article就是經(jīng)過轉(zhuǎn)化獲得的html數(shù)據(jù)富文本解析并展示

這樣就可以展示typecho中的文章數(shù)據(jù)了。

說明

該教程主要是插件的使用，所以對(duì)數(shù)據(jù)的賦值等寫的不是特別完善，可根據(jù)實(shí)際情況進(jìn)行修改。

贊 5

原創(chuàng)文章，作者：小創(chuàng)果，如若轉(zhuǎn)載，請(qǐng)注明出處：https://www.i4qq.com/jpjc/uniappfwbjc.html

總結(jié)

以上是生活随笔為你收集整理的uniapp怎么解析html字符串,uniapp富文本解析插件的详细使用教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。