微信小程序中显示html格式内容的方法

前言

最近项目上遇到在微信小程序里需要显示新闻内容，新闻内容是通过接口读取的服务器中的富文本内容，是html格式的，小程序默认是不支持html格式的内容显示的，那我们需要显示html内容的时候，就可以通过wxParse来实现。

准备工作：

首先我们下载wxParse

github地址：https://github.com/icindy/wxParse

本地下载：http://xiazai./201704/yuanma/wxParse-master().rar

wxParse

下载完之后我们需要用到目录下的wxParse文件夹，把他拷贝到我们的项目目录下

下面是具体的使用步骤

1、在app.wxss全局样式文件中，需要引入wxParse的样式表

@import "/page/wxParse/wxParse.wxss";

2、在需要加载html内容的页面对应的js文件里引入wxParse

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

3、通过调用WxParse.wxParse方法来设置html内容

/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/

Page({
 data: {
 },
 onLoad: function () {
 var that = this;
 wx.request({
 url: '', 
 method: 'POST',
 data: {
 'id':13
 },
 header: {
 'content-type': 'application/json'
 },
 success: function(res) {
 var article = res.data[0].post;
 WxParse.wxParse('article', 'html', article, that,5);
 }
 })
 }
})

4、在页面中引用模板

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

这样就可以在微信小程序中嵌入html内容了

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

# 微信小程序  # html  # 显示html  # 微信小程序加载html  # 微信小程序调用PHP后台接口 解析纯html文本  # 在微信小程序中渲染HTML内容的方法示例  # 如何去除富文本中的html标签及vue、react、微信小程序中的过滤器  # 微信小程序使用wxParse解析html的方法教程  # 微信小程序使用wxParse解析html的实现示例  # 浅谈高大上的微信小程序中渲染html内容—技术分享  # 微信小程序使用wxParse解析html的方法示例  # 在微信小程序中渲染HTML内容3种解决方案及分析与问题解决  # 必填  # 就可以  # 本地下载  # 目录下  # 把他  # 不支持  # 可选  # 这篇文章  # 谢谢大家  # 准备工作  # 来实现  # 方法来  # 绑定  # 自适应  # 下载完  # 默认为  # 样式表  # 器中  # 加载  # 拷贝到 

相关文章： 建站OpenVZ教程与优化策略：配置指南与性能提升  ,制作一个手机app网站要多少钱？  建站之星展会模版如何一键下载生成？  如何用AWS免费套餐快速搭建高效网站？  香港服务器网站推广：SEO优化与外贸独立站搭建策略  小说建站VPS选用指南：性能对比、配置优化与建站方案解析  建站之星24小时客服电话如何获取？  PHP正则匹配日期和时间(时间戳转换)的实例代码  美食网站链接制作教程视频,哪个教做美食的网站比较专业点？  网站好制作吗知乎,网站开发好学吗？有什么技巧？  建站主机默认首页配置指南：核心功能与访问路径优化  建站主机选哪家性价比最高？  企业微网站怎么做,公司网站和公众号有什么区别？  宝塔Windows建站如何避免显示默认IIS页面？  建站之星北京办公室：智能建站系统与小程序生成方案解析  如何访问已购建站主机并解决登录问题？  如何配置IIS站点权限与局域网访问？  如何用PHP快速搭建高效网站？分步指南  深圳 网站制作,深圳招聘网站哪个比较好一点啊？  无锡制作网站公司有哪些,无锡优八网络科技有限公司介绍？  linux top下的 minerd 木马清除方法  ,南京靠谱的征婚网站？  香港服务器如何优化才能显著提升网站加载速度？  建站之星CMS建站配置指南：模板选择与SEO优化技巧  宝塔建站教程：一键部署配置流程与SEO优化实战指南  制作网站公司那家好,网络公司是做什么的？  建站IDE高效指南：快速搭建+SEO优化+自适应模板全解析  可靠的网站设计制作软件,做网站设计需要什么样的电脑配置？  详解免费开源的.NET多类型文件解压缩组件SharpZipLib（.NET组件介绍之七）  香港服务器建站指南：免备案优势与SEO优化技巧全解析  香港服务器网站卡顿？如何解决网络延迟与负载问题？  建站之星后台管理：高效配置与模板优化提升用户体验  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  做企业网站制作流程,企业网站制作基本流程有哪些？  如何快速生成可下载的建站源码工具？  如何在Windows服务器上快速搭建网站？  ppt制作免费网站有哪些,ppt模板免费下载网站？  制作网站的过程怎么写,用凡科建站如何制作自己的网站？  韩国代理服务器如何选？解析IP设置技巧与跨境访问优化指南  如何用y主机助手快速搭建网站？  c++如何打印函数堆栈信息_c++ backtrace函数与符号名解析【方法】  网站制作需要会哪些技术,建立一个网站要花费多少？  如何制作网站标识牌,动态网站如何制作（教程）？  常州企业网站制作公司,全国继续教育网怎么登录？  小自动建站系统：AI智能生成+拖拽模板，多端适配一键搭建  c# await 一个已经完成的Task会发生什么  如何快速搭建虚拟主机网站？新手必看指南  在线教育网站制作平台,山西立德教育官网？  建站主机是否属于云主机类型？  如何实现建站之星域名转发设置？