美文网首页
微信小程序展示富文本WxParse

微信小程序展示富文本WxParse

作者: IamaStupid | 来源:发表于2023-10-25 18:00 被阅读0次

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

    相关文章

      网友评论

          本文标题:微信小程序展示富文本WxParse

          本文链接:https://www.haomeiwen.com/subject/cmgeidtx.html