1.小程序自帶富文本rich-text
<rich-text nodes="{{div}}"></rich-text>
2.wxParse
wxParse官方下載地址:https://github.com/icindy/wxParse
使用方法:
一,下載
下載之后赠尾,我們把此目錄下的wxParse文件夾定血,拷貝到我們小程序項目的根目錄下:
二,配置文件
首先在xx.wxml導入文件蔫仙,在文件頭寫上:
<import src="../../wxParse/wxParse.wxml"/>
然后再wxss導入文件,在文件頭寫上:
@import "../../wxParse/wxParse.wxss";
三丐箩,頁面使用
在頁面xx.js里的Page上方摇邦,寫:
var WxParse = require('../../wxParse/wxParse.js');
在頁面調(diào)用的地方,寫:
WxParse.wxParse('content', 'html', content, that,5)
參數(shù)詳解:
/**
* 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為當圖片自適應是左右的單一padding(默認為0,可選)
*/
var that = this;
WxParse.wxParse('article', 'html', article, that, 5);
四屎勘,在頁面中引用模板
<import src="../../wxParse/wxParse.wxml"/>
<view class="detail">
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>
//這里data中article為bindName
//detail可以加一些外層樣式
這樣就可以在微信小程序中嵌入html內(nèi)容啦~
轉(zhuǎn)自:http://www.reibang.com/p/d679cbf38352?utm_source=oschina-app
bug:空格解析不生效施籍。解決辦法如下:
修改wxDiscode.js文件的strcharacterDiscode方法中
str = str.replace(/ /g, ' ');
替換為
str = str.replace(/ /g, '\xa0');