最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是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. 渗透测试的理论部分3——ISSAF的详细描述

    ISSAF即信息系统安全评估框架(Information Systems Security Assessment Framework)是另外一种开放源代码的安全性测试和安全分析框架.为了解决安全评估工 ...

  2. iBtais 多重嵌套循环

    iBatis支持集合循环, 但是如何做到双重循环, 请见下例子 例子描述: 需要去三张结构相同的表中获取信息, 需要将信息拼合去重后返回 入参数据类型: Map<String,Object> ...

  3. H3C 路由策略(人为打环)

    拓扑如上 任务1:去除环路双ospf 引入 造成路由环路一边是 1             一边是10关掉任意lo口都会生成新的路由表 但是路由表指向不对 变成了一个圆 我们可以采用引入路由打上tag ...

  4. flask-钩子函数&g对象

    常用钩子函数 在Flask中钩子函数是使用特定的装饰器装饰的函数.钩子函数可以在正常执行的代码中,插入一段自己想要执行的代码.那么这种函数就叫做钩子函数.(hook) before_first_req ...

  5. Android 极光推送造成IM服务绑定失败bug

    由于极光推送对8.0的支持问题,升级到了最新版本的极光推送.但是最新版本的极光推送,默认将推送服务设置到了新的进程里面,由此引发 Android 极光推送多进程造成的application运行两次 和 ...

  6. Leetcode11 Container With Most Water 解题思路 (Python)

    今天开始第一天记录刷题,本人编程小白,如果有写的不对.或者能更完善的地方请个位批评指正! 准备按tag刷,第一个tag是array: 这个是array的第一道题:11. Container With ...

  7. MFC之几类消息的区别

    1.ON_COMMAND与ON_UPDATE_COMMAND_UI 开发MFC程序,给菜单子项添加消息处理函数时,会碰到ON_COMMAND和ON_UPDATE_COMMAND_UI两个消息. ON_ ...

  8. C# WebSocket Fleck 调用非托管C++ DLL 实现通信(使用char*接收)

    [DllImport(@"C:XXX.dll", CallingConvention = CallingConvention.StdCall)] unsafe public sta ...

  9. 'An instance 0x155e74a0 of class UIWebView was deallocated while key value observers were still registered with it.

    在iOS和html混编的时候,当用iOS原生的navigation导航pop回去的时候,出现 *** Terminating app due to uncaught exception 'NSInte ...

  10. QEMU KVM libvirt手册(4) – images

    RAW raw是默认的格式,格式简单,容易转换为其他的格式.需要文件系统的支持才能支持sparse file 创建image # qemu-img create -f raw flat.img 10G ...