1.小程序自带富文本rich-text
<rich-text nodes="{{div}}"></rich-text>
2.wxParse
wxParse官方下载地址:https://github.com/icindy/wxParse
使用方法:
一,下载
下载之后,我们把此目录下的wxParse文件夹,拷贝到我们小程序项目的根目录下:
image
二,配置文件
首先在xx.wxml导入文件,在文件头写上:
<import src="../../wxParse/wxParse.wxml"/>
然后再wxss导入文件,在文件头写上:
@import "../../wxParse/wxParse.wxss";
三,页面使用
在页面xx.js里的Page上方,写:
var WxParse = require('../../wxParse/wxParse.js');
在页面调用的地方,写:
WxParse.wxParse('content', 'html', content, that,5)
参数详解:
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 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内容啦~
转自:https://www.jianshu.com/p/d679cbf38352?utm_source=oschina-app
bug:空格解析不生效。解决办法如下:
修改wxDiscode.js文件的strcharacterDiscode方法中
str = str.replace(/ /g, ' ');
替换为
str = str.replace(/ /g, '\xa0');