uniapp怎么解析html字符串,uniapp富文本解析插件的详细使用教程
如果你作為文章資源類或者博客類的小程序你就會(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 找不到tgp饥荒专用服务器,饥荒tgp版
- 下一篇: centos radius mysql_