微信小程序加载html标签（解析html标签、wxParse加载富文本html）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序加载html标签（解析html标签、wxParse加载富文本html）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

博主介绍：本人专注于Android/java/数据库/微信小程序技术领域的开发，以及有好几年的计算机毕业设计方面的实战开发经验和技术积累；尤其是在安卓（Android）的app的开发和微信小程序的开发，很是熟悉和了解；本人也是多年的Android开发人员；希望我发布的此篇文件可以帮助到您；

🍅希望此文章可以帮助到您🍅

微信小程序文章推荐

微信小程序布局图片上面显示文字

微信小程序实现左边图片右边文字效果

微信小程序获取当前日期和时间

微信小程序绘制地图轨迹线路

微信小程序绘制marker

微信小程序之绘制多个marker以及调用手机地图软件导航

效果显示

小程序访问本地html,微信小程序,微信小程序,小程序

问题说明：

有时候后台管理人员在添加文章的时候是使用富文本编辑器进行添加的；所以在编辑完文章之后；存在数据库里面的数据就是html的富文本标签数据，也就是下图所示这样：

小程序访问本地html,微信小程序,微信小程序,小程序

对于这样的数据直接显示当然是不可以的；所以这块的显示需要使用wxParse.js

一、前端界面

<import src="../../wxParse/wxParse.wxml" />

<view class="wxParse">

<template is="wxParse" data="{{wxParseData:article.nodes}}" />

</view>

说明：

1：在使用wxParse.js用之前先需要下载wxParse的文件信息；（下载地址：GitHub - icindy/wxParse: wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析）

小程序访问本地html,微信小程序,微信小程序,小程序

2：然后在需要显示的界面布局界面引入：<import src="../../wxParse/wxParse.wxml" />

二、js逻辑处理

var WxParse = require('../../wxParse/wxParse.js');

  appData.api.getXADetailInfor(that.data.codeModel.id, data)

            .then(res => {

                wx.hideNavigationBarLoading();

                console.log("log_js_西安交通信息", res.Data);

                var article = res.Data.NewsInfo;

                WxParse.wxParse('article', 'html', article, that, 5);

                that.setData({

                    resultModel: res.Data

                })

            })

            .catch(res => {

                wx.showToast({

                    title: '出错了！',

                    icon: 'none'

                })

            })