step 1:下载wxParse
github地址:https://github.com/icindy/wxParse
step 2:将wxParse拷贝到我们的项目的根目录下
step 3:在app.wxss全局样式文件中,需要引入wxParse的样式表
/*app.wxss 是小程序全局的css文件*/
/*在app.wxss全局样式文件中,引入wxParse的样式表*/
@import "/wxParse/wxParse.wxss";
page {
font-family: 'microsoft yahei';
height: 100%;
}
/*common list*/
.list-item {
position: relative;
overflow: hidden
}
step 4:在详情页miniprogram/pages/detail/detail.js里引入wxParse.js
// miniprogram/pages/detail/detail.js
//获取应用实例
const app = getApp()
//在需要加载html内容的页面对应的js文件里引入wxParse.js
var WxParse = require('../../wxParse/wxParse.js');
Page({
/**
* 页面的初始数据
*/
data: {
id: '',
Title: '',
Body: '',
},
step 5:用WxParse.wxParse方法来解析含html字段,并将解析后的结果存入到一个新的变量。
/**
* 获取文章详情
*/
getBlogDetail() {
// 初始化db
const db = wx.cloud.database({});
var id = this.data.id;
db.collection('BlogPost').doc(id).get().then(res => {
console.log('db读取成功', res.data);
let data = res.data;
//-----开始解析详情页-------
//传入的原始数据数据
var sourceHtmlData = res.data.Body;
//传入数据的格式
var contentType = 'html';
//this target为Page对象,一般为this
var targetPage = this;
//解析后的目标内容
//"targetAfterWxParse"
console.log('db读取成功1', sourceHtmlData);
WxParse.wxParse('targetAfterWxParse', contentType, sourceHtmlData, targetPage);
//-----结束解析详情页-------
this.setData({
Title: data.Title,
Body: data.Body
});
})
.catch(e => {
wx.showToast({
title: 'db读取失败',
icon: 'none'
});
console.error('[数据库] [查询记录] 失败:', e)
});
}
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
step 6:用WxParse的模板来显示变量targetAfterWxParse的内容。
<!--miniprogram/pages/detail/detail.wxml-->
<import src="../../wxParse/wxParse.wxml" />
<view>
<view class="book-intro">
<view class="intro-header">
<text>{{Title}}</text>
</view>
<view class="wxParse">
<text class="intro-content">
<!--{{Body}}-->
</text>
<template is="wxParse" data="{{wxParseData:targetAfterWxParse.nodes}}" />
</view>
</view>