一、微信富文本处理

rich-text: 基础库 1.4.0 开始支持,低版本需做兼容处理。

全局支持class和style属性,不支持id属性。

<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>

需要富文本处理的内容

在PPbootCMS中通过后台编辑器编辑的内容,都需要经过微信官方的富文本处理工具进行处理,才可以显示正常的不包含代码块的内容。

此处的 nodes="{{nodes}}" 即填写后台数据

页面跳转传值中没有直接用到富文本,是为了能更深刻的理解rich-text对于富文本的作用。

只需将下方代码替换掉原先的页面调用代码,就可以将富文本转化为普通文本

<rich-text nodes="{{get_content.content}}" bindtap="tapHandle"></rich-text>

二、使用wxParse进行富文本处理

1、将wxParse拷贝到微信小程序项目文件夹根目录,下载wxParse

1.1 在 shownews.wxss 中引入 @import "../../wxParse/wxParse.wxss";

1.2 在 shownews.js 中引入 const wxParse = require("../../wxParse/wxParse.js");

1.3 修改 shownews.js 中获取数据js部分代码

get_content() {

  let that = this;

  api.get_content(that.id).then(function (news) {

    // 使用wxParse解析富文本

    wxParse.wxParse('content', 'html', news.data.content, that, 5);

  })

},

1.4 在 shownews.wxml 中引入 <import src="../../wxParse/wxParse.wxml"/>

1.5 在 shownews.wxml 中添加模板文件 <template is="wxParse" data="{{wxParseData:content.nodes}}" />

使用wxParse进行富文本处理说明

content:节点名称,会在 wxml 中引用

html:代表解析的是html代码,其实wxparse还可以解析markdown代码

news.data.content:代表从服务器取到取html内容(如果不清楚具体路径,可以console一下,这个路径代表,news下面的data里面的content)

that:代表 app 实例

5:代表图片的内边距

 阅 579