微信小程序使用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#数据同步中基本步骤和用到的相关函数
			C#数据同步中基本步骤和用到的相关函数 数据同步对比步骤: 1.将两数据库中对应的数据表分别生成XML文件 /// <summary> /// 将一个DataTable以xml方式存入指定 ... 
- Appium+Python自动化 4 -appium元素定位
			appium定位app上的元素方式 在前面文章中有介绍,(通过UIautomator工具查看app元素) appium定位app上的元素,可以通过id,name,class这些属性定位到 1.id 定 ... 
- Java中如何创建一个新的对象的/Creating Objects/
			The Java Tutorials have been written for JDK 8. Examples and practices described in this page don't ... 
- Python 知识小tips
			python进制转换函数: 二进制转换成十进制:v = "0b1111011" # int(v,2) 十进制转换成二进制:v = 18 # ... 
- php日志报错child exited with code 0 after seconds from start
			因为日志文件老是有这种提示: [27-May-2015 15:13:48] NOTICE: [pool www] child 3998 started [27-May-2015 15:13:59] N ... 
- ps最最基础的文档
			因为学习PHP,但是公司没有前端工程师,修图的时候只好找被人帮忙,一个简答的问题,其实几分钟就搞定了,还要麻烦别人,就自己学了一下ps.一共花了3天时间.学习了一些简单的操作. 工具:Adobe Ph ... 
- Day12  (黑客成长日记)   函数
			一.递归函数: 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. #计算阶乘: def fact(n): if n == 1: return 1 return n ... 
- 记录做一个类似于探探的卡片式布局的Recycleview有数据一直不显示
			使用了别人的项目 https://github.com/JerryChan123/ReSwipeCard/blob/master/README_zh.md 之前找recycleview有数据不显示的原 ... 
- CCNA(001):Packet Tracer简单使用
			这几天看一些网络书籍,正好看到CCNA,顺便查了一下. CCNA是什么呢?通俗的说,就是专门研究思科设备的知识,再通俗点说就是研究路由器和交换机,其中也包括配置和设备互连,基本就这几个东西,仅限于当前 ... 
- MFC编程汇总
			1.visual2017专业版MFC编程环境搭建及第一个MFC程序的创建 2.通过MFC设计一个简单的计价程序 3.控件——静态空间.编辑框控件.命令按钮.复选框和单选控件 4.控件添加——静态控件. ... 
