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

https://github.com/icindy/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':
},
header: {
'content-type': 'application/json'
},
success: function(res) {
var article = res.data[].post;
WxParse.wxParse('article', 'html', article, that,);
}
})
}
})

4.在页面中引用模板

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

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

微信小程序使用wxParse解析html的更多相关文章

  1. 微信小程序 使用wxParse解析html

    微信小程序 加载 HTML 标签:https://blog.csdn.net/zclengendary/article/details/54312030 微信小程序 使用wxParse解析html:h ...

  2. 小程序html转wxml,微信小程序用wxParse解析html

    1.首先下载 wxParse脚本,到https://github.com/icindy/wxParse下载,将wxParse文件夹放置到小程序根目录,即跟pages同级目录 2.在样式页面 wxss ...

  3. 【h5标签转小程序标签】小程序使用wxParse解析html教程

    一.先下载所需文件,下载地址:https://pan.baidu.com/s/1umZO9uI24zUTRd7VqaWbAg  ,下载完毕后会得到一个wxParse文件夹,后面会用到: 二.先拷贝cs ...

  4. [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息

    因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...

  5. 微信小程序使用wxParse实现接入富文本编辑

    简介 微信小程序中比如活动说明,简介这样的图文介绍说明页面,后台通常配置成富文本编辑框,由后台直接输入内容,然后在小程序界面展现. 但是富文本编辑提取到内容是html格式的,写法与小程序的wxml并不 ...

  6. 微信小程序登录流程解析

    小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识openid,快速建立小程序内的用户体系. 登录流程时序: 1.首先,调用 wx.login获取code ,判断用户是否授权读取用户 ...

  7. 微信小程序-富文本解析插件wxParse基础使用及问题解决

    一.插件准备 在github上可以直接下载该插件:https://github.com/icindy/wxParse 二.基本使用 1.将插件导入项目: 将wxParse文件夹放在项目目录下,如图: ...

  8. 微信小程序使用wxParse,解决图片显示路径问题

    我们经常用到发布文章,用的是UEditor百度富文本编辑器,方便排版,存储的也是html代码,这样小程序解析出来的也是排版的样式,但是使用wxParse解析html的时候,因为存储的是图片的相对路径, ...

  9. 微信小程序扫码解析小程序码

    通过微信扫小程序码,跳转到应用小程序内, 如何解析小程序码的参数呢? 一般小程序码会跳转到设置的页面,如首页, 可以直接跳转到小程序首页,然后解析小程序携带的参数,再打开某个页面. (小程序码的路径要 ...

随机推荐

  1. Appium+Python自动化 1 环境搭建(适用windows系统-Android移动端自动化)

    一.安装并配置 java jdk ①下载 java jdk后 安装,安装完成后,配置环境变量 打开计算机->系统属性->高级系统设置->环境变量->新建(系统变量),如图所示: ...

  2. CCS中CMD文件解析

    http://blog.csdn.net/u011392772/article/details/49760897 gel文件中主要包含了PLL.DDR等的初始化工作,具体可以看一下gel源码就明白了: ...

  3. python 基础———— 字符串常用的调用 (图2)

    1.  replace 2.  join 3.split 4 rsplit 5. strip : 去除字符串左右两边特定(指定)的字符 7. rstrip  :  去除右边特定(指定)的字符 8. l ...

  4. 20155205 郝博雅 Exp2 后门原理与实践

    20155205 郝博雅 Exp2 后门原理与实践 一.基础问题回答 后门(木马) 专用程序 投放 隐藏(免杀) 启动(自启动.绑定) (1)例举你能想到的一个后门进入到你系统中的可能方式? 答:上学 ...

  5. B树/[oracle]connect BY语句

    读大神的书,出现很多没有见过的函数和便捷操作,特此记录 connect by 之前没有接触过,为了学习这个语句,先了解一下B树数据类型是最好的方法. [本人摘自以下博客] https://www.cn ...

  6. 第二次scrum

    scrum说明 在第一次已有的基础上,进行了具体的实现.完成了具体的界面设计,还有各个栏目,如:发帖,搜索,禁言等. 类图 依次是外观模式图,发帖图,禁言图. 外观模式图 发帖图 禁言图 团队成员 潘 ...

  7. 基于SVG.js实现网页初始化线条描绘效果

    前端实现看到一个网页的效果很cool(参考https://tympanus.net/Development/SVGDrawingAnimation/index2.html),决定自己去实现以下这个效果 ...

  8. Freeradius服务器的搭建流程

    Freeradius服务器的搭建流程 一.服务器方面的配置 1 .安装radius服务器,数据库扩展插件 预先安装mysql数据库,然后安装freeradius,以及freeradius的数据库扩展插 ...

  9. jwt vs session 以rails 为例 (翻译部分)

    原文地址:https://pragmaticstudio.com/tutorials/rails-session-cookies-for-api-authentication 普通方式: 令牌为基础的 ...

  10. #218 Iterate with JavaScript For Loops

    一个条件语句只能执行一次代码,而一个循环语句可以多次执行代码. JavaScript 中最常见的循环就是“for循环”. for循环中的三个表达式用分号隔开: for ([初始化]; [条件判断]; ...