微信小程序使用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的时候,因为存储的是图片的相对路径, ...
- 微信小程序扫码解析小程序码
通过微信扫小程序码,跳转到应用小程序内, 如何解析小程序码的参数呢? 一般小程序码会跳转到设置的页面,如首页, 可以直接跳转到小程序首页,然后解析小程序携带的参数,再打开某个页面. (小程序码的路径要 ...
随机推荐
- c#串口测试
软件和代码网盘下载 https://pan.baidu.com/s/1dFrE1pv#list/path=%2F SerialPort 类 https://msdn.microsoft.com/zh- ...
- nginx常用服务配置
一.nginx.conf的配置方式,创建新vhost user nginx; worker_processes ; worker_cpu_affinity ; worker_rlimit_nofile ...
- 问题:计算foldRight(1)(_-_) 与foldLeft(1)(_-_)值不一样
List(1,2,3,4)问题:计算foldRight(1)(_-_) 与foldLeft(1)(_-_)值不一样首先看foldRight(1)(_-_)计算过程((( (1-1)-2)-3)-4) ...
- USB设备类学习笔记
usb audio class 版本目前有3个版本 分别是1.0,2.0,3.0:1.0针对各个厂家的设备具有不同的描述符,而2.0则将它们统一简化,3.0则是最新的,还没有与2.0作进一步比较:因 ...
- CodeForces 935E Fafa and Ancient Mathematics (树形DP)
题意:给定一个表达式,然后让你添加 n 个加号,m 个减号,使得表达式的值最大. 析:首先先要建立一个表达式树,这个应该很好建立,就不说了,dp[u][i][0] 表示 u 这个部分表达式,添加 i ...
- 宝塔Linux面板 - 7月4日更新 - 5.9免费版
官网地址:https://www.bt.cn/bbs/thread-1186-1-1.html 安装要求: Python版本: 2.6/2.7(安装宝塔时会自动安装) 内存:128M以上,推荐512M ...
- objec类中方法介绍
java.lang.object,是Java中所有类(当然Object类除外)的终极父类,其中数组也继承了Object类,但是接口是不继承Object类的. Object中方法如下(11个): Cla ...
- JAVA程序CPU 100%问题排查
做JAVA开发的同学一定遇到过的爆表问题,看这里解决 https://www.cnblogs.com/qcloud1001/p/9773947.html 本文由净地发表于云+社区专栏 记一次Ja ...
- 代码雨 html实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- Snapshot Types
Volume managers Some Unix systems have snapshot-capable logical volume managers. These implement cop ...