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