情景:普通网页编辑的富文本,保存到服务器,小程序通过接口获取了富文本,现在需要把普通的DOM元素放在小程序里展示
下载:https://github.com/icindy/wxParse
把下载的组件放到根目录下的component文件夹里
<!--pages/detail/detail.wxml-->
<import src="../../components/wxParse/wxParse.wxml"/>
<view>
<template is="wxParse" data="{{wxParseData: article.nodes}}"/>
</view>
/* pages/detail/detail.wxss */
@import '../../components/wxParse/wxParse.wxss'
// pages/detail/detail.js
import WxParse from '../../components/wxParse/wxParse.js'
Page({
/**
* 页面的初始数据
*/
data: {
detailObx: {}
},
getDetai() {
wx.request({
url: 'https://xxx.com/xx/index.php/user/index/getArticleInfo',
data: {
id: 1
},
method: 'POST',
header: {
'content-type': 'application/json' // 默认值
},
success: (res) => {
console.log(res.data)
const { code, message, data } = res.data;
if (code === '000000') {
this.setData({
detailObx: data || {}
}, () => {
WxParse.wxParse('article', 'html', this.data.detailObx.content || '', this, 5);
if (this.data.detailObx.subscribe==2) {
// this.wxFuc()
}
console.log(this.data.detailObx)
});
} else {
// this.$toast(message);
wx.showToast({
title: message,
duration: 2000
})
}
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('---- on load -------', options)
this.getDetai();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log('---- on ready -------')
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log('---- on show -------')
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})