欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序解析富文本過(guò)程詳解

 更新時(shí)間:2019年07月13日 16:19:32   作者:趙客縵胡纓v吳鉤霜雪明  
這篇文章主要介紹了微信小程序解析富文本過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值

前言

最近公司在開(kāi)發(fā)OTA微信小程序,一些頁(yè)面的詳情內(nèi)容是HTML富文本格式的的,但是微信小程序不能直接解析HTML,需要將內(nèi)容中的HTML標(biāo)簽轉(zhuǎn)換成微信小程序所支持的標(biāo)簽。

開(kāi)始的時(shí)候想過(guò)自己寫(xiě)方法來(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)文章

最新評(píng)論