微信小程序使用wxParse解析html的方法教程

前言

最近在做一个微信小程序项，遇到了文章的详情页面是富文本的情况，内容是通过接口读取的服务器中的富文本内容，是html格式的，小程序默认是不支持html格式的内容显示的，那我们需要显示html内容的时候，就可以通过wxParse来实现。下面话不多说了，来一起看看详细的介绍吧

wxParse官方下载地址：https://github.com/icindy/wxParse (本地下载)

使用方法：

一，下载完之后我们需要用到此目录下的wxParse文件夹，把他拷贝到我们小程序项目的根目录下：

二，配置文件

首先在xx.wxml导入文件，在文件头写上：

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

然后再wxss导入文件，在文件头写上：

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

三，在页面xx.js里的onLoad()方法里面写上：

var WxParse = require('../../wxParse/wxParse.js');
WxParse.wxParse('content', 'html', content, that,5)

此方法的含义为：

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

四，在页面中引用模板

<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
//这里data中article为bindName

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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 在微信小程序中渲染HTML内容的方法示例

    大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxParse 小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「 wxParse 」的库.它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来. rich-text 后来,小程序增加了「rich-text」组件用于展示富文本内容.然而,这个组件存在一个极

  • 微信小程序使用wxParse解析html的方法示例

    微信小程序使用wxParse解析html的方法示例

    本文实例讲述了微信小程序使用wxParse解析html的方法.分享给大家供大家参考,具体如下: 首先去 https://github.com/icindy/wxParse 下载wxParse,只拷贝wxParse文件夹即可. 或者点击此处本站下载. 一.首先将插件文件夹复制到项目里面 二.导入文件 首先在xx.wxml导入文件,在文件头写上: <import src="../../wxParse/wxParse.wxml"/> 然后再wxss导入文件,在文件头写上: @im

  • 微信小程序使用wxParse解析html的实现示例

    最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现. 首先我们在github上下载wxParse https://github.com/icindy/wxParse 下载完之后我们需要用到目录下的wxParse文件夹,把他拷贝到我们的项目目录下 下面是具体的使用步骤 1.在app.wxss全局样式文件中,需要引入wxParse的样

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

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

    前言 最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现. 准备工作: 首先我们下载wxParse github地址:https://github.com/icindy/wxParse 本地下载:http://xiazai.jb51.net/201704/yuanma/wxParse-master(jb51.net).rar wx

  • 如何去除富文本中的html标签及vue、react、微信小程序中的过滤器

    在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除html标签及 空格 let richText = ' <p style="font-size: 25px;color: white">       sdaflsjf的丰富及饿哦塞尔</p><span>dsfjlie</span>'; /* 去除富

  • 微信小程序调用PHP后台接口 解析纯html文本

    微信小程序调用PHP后台接口 解析纯html文本

    微信小程序调用PHP后台接口,解析纯html文本,效果图片预览 1.微信js动态传参: wx.request({ url: 'https://m.****.com/index.php/Home/Xiaoxxf/activity_detail?a_id='+options.id,//含富文本html data: { is_detail:1 }, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT heade

  • 浅谈高大上的微信小程序中渲染html内容—技术分享

    大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxParse 小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「 wxParse 」的库.它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来. rich-text 后来,小程序增加了「rich-text」组件用于展示富文本内容.然而,这个组件存在一个极

  • 微信小程序使用wxParse解析html的方法教程

    微信小程序使用wxParse解析html的方法教程

    前言 最近在做一个微信小程序项,遇到了文章的详情页面是富文本的情况,内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过wxParse来实现.下面话不多说了,来一起看看详细的介绍吧 wxParse官方下载地址:https://github.com/icindy/wxParse (本地下载) 使用方法: 一,下载完之后我们需要用到此目录下的wxParse文件夹,把他拷贝到我们小程序项目的根目录下: 二,

  • 微信小程序页面间传递数组对象方法解析

    这篇文章主要介绍了微信小程序页面间传递数组对象方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 方法1:A页面跳转链接添加参数,B页面onLoad 接收 方法2:设置全局变量 globalData,用的少,一般适用于全局共享的一份信息,如用户open_id等 // A页面 // 数组.对象都需要stringify var listData = JSON.stringify(that.data.listData) var taskArray

  • 微信小程序跨页面传递data数据方法解析

    微信小程序跨页面传递data数据方法解析

    这篇文章主要介绍了微信小程序跨页面传递data数据方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 Q:小程序怎么把页面data里的数据传到另外的页面? 或者小程序怎么吧表单里的数据传到另外的页面? A:1.可以使用url传递数据. 例如在A页面中传递数据,需要注意的是,wx.switchTab中的url不能传参数. wx.navigateTo({ url:'../pageB/pageB?name=raymond&gender=male'

  • 微信小程序获取用户openId的实现方法

    微信小程序获取用户openId的实现方法 前端: wx.login({ success: function (res) { res.code }) 获取到code后,传到后台, 然后请求微信接口 https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code 把参数替换为自己的参数,这个接口就直接返回openId了

  • 微信小程序返回多级页面的实现方法

    微信小程序返回多级页面的实现方法 微信小程序开发中,返回上一页是很普遍的操作,最常见的是点击手机的返回键和点击自定义的按钮返回上一页这两种情况.点击手机的返回键我们不需要做处理,如果是自定义按钮实现返回效果,就要调用微信提供的API: wx.navigateBack(OBJECT) 也可以通过 wx.navigateBack 方法实现返回多级页面,只要设置 delta 的值就可以: //在C页面内 navigateBack,将返回A页面,delta = 1 时与 wx.navigateBack(

  • 微信小程序引用公共js里的方法的实例详解

    微信小程序引用公共js里的方法的实例详解

    微信小程序引用公共js里的方法的实例详解 一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们该如何实现呢. 在根目录下有一个app.js文件.这个根目录的js 文件我们可以通过getApp()轻松调用. //app.js App({ globaData:'huangenai' }) //test.js var app = getApp(); Pag

  • 微信小程序 Windows2008 R2服务器配置TLS1.2方法

    微信小程序 Windows2008 R2服务器配置TLS1.2方法

    微信小程序 Windows2008 R2服务器配置TLS1.2方法 微信小程序免费SSL证书https.TLS版本问题的解决方案<二十四>request:fail错误(含https解决方案)(真机预览问题把下面的代码复制到PowerShell里运行一下,然后重启服务器.# Enables TLS 1.2 on ... 请首先阅读本文: 微信小程序免费SSL证书https.TLS版本问题的解决方案<二十四>request:fail错误(含https解决方案)(真机预览问题 把下面的代

  • 微信小程序获取手机网络状态的方法【附源码下载】

    微信小程序获取手机网络状态的方法【附源码下载】

    本文实例讲述了微信小程序获取手机网络状态的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml布局文件代码 <view>手机网络状态:{{netWorkType}}</view> index.js逻辑文件代码 Page({ data: { netWorkType:'' }, onLoad: function () { var that=this wx.getNetworkType({ success: function(res) { that.s

随机推荐