微信小程序展示富文本WxParse

2023-10-25  本文已影响0人  IamaStupid

情景:普通网页编辑的富文本,保存到服务器,小程序通过接口获取了富文本,现在需要把普通的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 () {

    }
})
上一篇下一篇

猜你喜欢

热点阅读