微信小程序使用wxParse解析html
最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是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的更多相关文章
- 微信小程序 使用wxParse解析html
微信小程序 加载 HTML 标签:https://blog.csdn.net/zclengendary/article/details/54312030 微信小程序 使用wxParse解析html:h ...
- 小程序html转wxml,微信小程序用wxParse解析html
1.首先下载 wxParse脚本,到https://github.com/icindy/wxParse下载,将wxParse文件夹放置到小程序根目录,即跟pages同级目录 2.在样式页面 wxss ...
- 【h5标签转小程序标签】小程序使用wxParse解析html教程
一.先下载所需文件,下载地址:https://pan.baidu.com/s/1umZO9uI24zUTRd7VqaWbAg ,下载完毕后会得到一个wxParse文件夹,后面会用到: 二.先拷贝cs ...
- [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息,wx.getLocation,腾讯地图小程序api,微信小程序经纬度逆解析地理信息
因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...
- 微信小程序使用wxParse实现接入富文本编辑
简介 微信小程序中比如活动说明,简介这样的图文介绍说明页面,后台通常配置成富文本编辑框,由后台直接输入内容,然后在小程序界面展现. 但是富文本编辑提取到内容是html格式的,写法与小程序的wxml并不 ...
- 微信小程序登录流程解析
小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识openid,快速建立小程序内的用户体系. 登录流程时序: 1.首先,调用 wx.login获取code ,判断用户是否授权读取用户 ...
- 微信小程序-富文本解析插件wxParse基础使用及问题解决
一.插件准备 在github上可以直接下载该插件:https://github.com/icindy/wxParse 二.基本使用 1.将插件导入项目: 将wxParse文件夹放在项目目录下,如图: ...
- 微信小程序使用wxParse,解决图片显示路径问题
我们经常用到发布文章,用的是UEditor百度富文本编辑器,方便排版,存储的也是html代码,这样小程序解析出来的也是排版的样式,但是使用wxParse解析html的时候,因为存储的是图片的相对路径, ...
- 微信小程序扫码解析小程序码
通过微信扫小程序码,跳转到应用小程序内, 如何解析小程序码的参数呢? 一般小程序码会跳转到设置的页面,如首页, 可以直接跳转到小程序首页,然后解析小程序携带的参数,再打开某个页面. (小程序码的路径要 ...
随机推荐
- java39
String a= "hello.a.java;b.java;hello.java;hello.toha;"; //将每个分号的内容取出来 String[] res=a.split ...
- OO第9-11作业总结
一. 规格化设计 规格化抽象,即将执行的细节抽象为用户所需求的行为(模块做什么). 主要作用在于提高工程设计中的可维护性,可读性,明确功能,使整个编程任务变得清晰有序以减少程序BUG. 说其发展历 ...
- windows环境下wamp安装redis拓展
环境: wamp集成环境 安装分为两部 1.安装redis客户端 https://github.com/ServiceStack/redis-windows/raw/master/download ...
- python文件操作打开模式 r,w,a,r+,w+,a+ 区别辨析
主要分成三大类: r 和 r+ "读"功能 r 只读 r+ 读写(先读后写) 辨析:对于r,只有读取功能,利用光标的移动,可以选择要读取的内容. 对于r+,同时具有读和写 ...
- NIOS II 之串口学习
UART中有6个寄存器分别为control, status, rxdata, txdata, divisor,endofpacket. 的寄存器是16位位宽的. UART会产生一个高电平的中断,当接收 ...
- 再探haproxy
一 设置haproxy输出log 1.1 调整配置文件 默认haproxy是不会输出log到文件的,这样很大程度在查询问题时会很不方便,haproxy是可以输出日志到文件的,配置文档类似于如下: ]# ...
- 修改MariaDB 路径
1.把mariadb服务停掉: service mariadb stop 2.把/var/lib/mysql整个目录复制到/work, sudo mkdir /work/data sudo cp -a ...
- Linux-3.0.8 input subsystem代码阅读笔记
先乱序记录一下阅读Linux input subsystem代码的笔记. 在input device driver的入口代码部分,需要分配并初始化input device结构,内核提供的API是inp ...
- LeetCode刷题:第七题 整数翻转 第九题 回文数
第七题题目描述: 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入 ...
- python基础自学 第二天
注释 分类 单行注释 多行注释 作用 使用自己熟悉的语言,在程序中对某些代码进行标注说明,增强程序可读性 单行注释(行注释) 以 # 开头,#右边所有的东西就被当成说明文字,而不是要执行的程序,只是说 ...