微信小程序解析富文本過程詳解
前言
最近公司在開發(fā)OTA微信小程序，一些頁(yè)面的詳情內(nèi)容是HTML富文本格式的的，但是微信小程序不能直接解析HTML，需要將內(nèi)容中的HTML標(biāo)簽轉(zhuǎn)換成微信小程序所支持的標(biāo)簽。
開始的時(shí)候想過自己寫方法來(lái)替換標(biāo)簽，后來(lái)找到了一個(gè)很好用的插件：WxParse。
今天分享給大家，Github地址：https://github.com/icindy/wxParse
使用WxParse解析富文本數(shù)據(jù)
1．將下載下來(lái)的插件文件夾復(fù)制到我們的項(xiàng)目根目錄下（其中emojis文件可根據(jù)自己所需決定要或者不要，其他的文件必須要）
- wxParse/ -wxParse.js(必須存在) -html2json.js(必須存在) -htmlparser.js(必須存在) -showdown.js(必須存在) -wxDiscode.js(必須存在) -wxParse.wxml(必須存在) -wxParse.wxss(必須存在) -emojis(表情包文件，可選)
wxParse
2.在需要使用該插件的View（.js文件）中引入WxParse模塊
Var WxParse= require('../../../wxParse/wxParse.js');
3.在需要是用的wxss中引入WxParse.wxss，也可以在app.wxss中引入
@import"../../../wxParse/wxParse.wxss";
4.進(jìn)行數(shù)據(jù)綁定
Var article= '<div>我是HTML代碼</div>';
/**
* WxParse.wxParse(bindName , type, data,target,imagePadding)
* 1.bindName綁定的數(shù)據(jù)名(必填)
* 2.type可以為html或者md(必填)
* 3.data為傳入的具體數(shù)據(jù)(必填)
* 4.target為Page對(duì)象,一般為this(必填)
** 5.imagePadding為當(dāng)圖片自適應(yīng)是左右的單一padding(默認(rèn)為0,可選)
*/
var that = this;
WxParse.wxParse('article', 'html', article,that, 5);
5.在內(nèi)容頁(yè)（.wxml文件）中引用該模版文件，其中data中article為bindName
導(dǎo)入文件
<import src="../../../wxParse/wxParse.wxml" />
引用模版
<template is="wxParse" data="{{wxParseData:article.nodes}}" />
完成后頁(yè)面就能夠正常渲染HTML富文本數(shù)據(jù)了
示例
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
prototype它是用Javascript寫好的一些API，包括對(duì)Javascript中的類如String，Array等進(jìn)行的擴(kuò)充，把JS文件嵌入后直接用就行了2010-04-04
詳解JavaScript 新語(yǔ)法之Class 的私有屬性與私有方法
這篇文章主要介紹了JavaScript 新語(yǔ)法之Class 的私有屬性與私有方法 ,本文通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
這篇文章主要為大家介紹了JavaScript中的原型和原型鏈，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
JS獲取select-option-text_value的方法
這篇文章主要介紹了JS獲取select-option-text_value的方法，有需要的朋友可以參考一下2013-12-12
微信小程序中使用vant組件庫(kù)的超詳細(xì)圖文教程
說(shuō)到vant框架相信大家應(yīng)該并不陌生了吧,做過移動(dòng)端開發(fā)的小伙伴們應(yīng)該都知道它吧,下面這篇文章主要給大家介紹了關(guān)于微信小程序中使用vant組件庫(kù)的超詳細(xì)圖文教程,需要的朋友可以參考下2023-03-03
超出JavaScript安全整數(shù)限制的數(shù)字計(jì)算BigInt詳解
這篇文章給大家分享了超出JavaScript安全整數(shù)限制的數(shù)字計(jì)算BigInt的相關(guān)知識(shí)點(diǎn)，有興趣的朋友參考學(xué)習(xí)下。2018-06-06
原生JS實(shí)現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果
這篇文章主要介紹了原生JS實(shí)現(xiàn)圖片網(wǎng)格式漸顯、漸隱效果,需要的朋友可以參考下2017-06-06
JavaScript仿小米商城官網(wǎng)完整頁(yè)面實(shí)現(xiàn)流程
只能看不能玩的靜態(tài)頁(yè)面早就看夠了吧，今天我們來(lái)做一個(gè)相對(duì)完整的動(dòng)態(tài)網(wǎng)站，用Javascript來(lái)實(shí)現(xiàn)模仿小米的官網(wǎng)商城，感興趣的朋友快來(lái)看看吧2021-11-11
關(guān)于JS模塊化的知識(shí)點(diǎn)分享
在本篇文章里小編給大家整理的是關(guān)于JS模塊化的知識(shí)點(diǎn)分享，有需要的朋友們可以學(xué)習(xí)下。2019-10-10