&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
微信小程序-利用wxParse将html转为wxml
摘要：1、到https://github.com/icindy/wxParse下载2.1在使用的View中引入WxParse模块varWxParse=require('../../wxParse/wxParse.js');2.2在使用的Wxss中引入WxParse.css,可以在app.wxss@import&/wxParse/wxParse.wxss&;3、数据绑定vararticle='我是HTML代码';/***WxParse.wxParse(bindNa
1、到https://github.com/icindy/wxParse下载
2.1 在使用的View中引入WxParse模块
var WxParse = require('../../wxParse/wxParse.js');
2.2 在使用的Wxss中引入WxParse.css,可以在app.wxss
@import &/wxParse/wxParse.wxss&;
3、数据绑定
var article = '我是HTML代码';/*** WxParse.wxParse(bindName , type, data, target,imagePadding)* 1.bindName绑定的数据名(必填)* 2.type可以为html或者md(必填)* 3.data为传入的具体数据(必填)* 4.target为Page对象,一般为this(必填)* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)*/var that =WxParse.wxParse('article', 'html', article, that,5);
4、模版引用
//这里data中article为bindName
目录结构如下:
回复{{index}}:
var WxParse = require('../../wxParse/wxParse.js');Page({
onLoad: function () {
var that =
* 初始化emoji设置
WxParse.emojisInit('[]', &/wxParse/emojis/&, {
&00&: &00.gif&,
&01&: &01.gif&,
&02&: &02.gif&,
&03&: &03.gif&,
&04&: &04.gif&,
&05&: &05.gif&,
&06&: &06.gif&,
&07&: &07.gif&,
&08&: &08.gif&,
&09&: &09.gif&,
&09&: &09.gif&,
&10&: &10.gif&,
&11&: &11.gif&,
&12&: &12.gif&,
&13&: &13.gif&,
&14&: &14.gif&,
&15&: &15.gif&,
&16&: &16.gif&,
&17&: &17.gif&,
&18&: &18.gif&,
&19&: &19.gif&,
* html解析示例
var article = `
wxParse-微信小程序富文本解析组件
支持Html及markdown转wxml可视化
支持的标签
wxParse支持70%的html的标签
strong标签
支持内联样式style
wxParse可以渲染原html带有的style样式
strong标签
支持class潜入
wxParse可以注入html带有的class属性
支持emojis小表情
wxParse可以解析固定格式的小表情标签
这里可以解析出emoji的表情[00][01][02][03][04][05][06][07][08][09]
支持图片自适应
wxParse可以动态计算图片大小并进行自适应适配
支持图片点击预览,左右滑动预览
wxParse可以讲一篇文章中的几个图片一起预览
你可以点击上面的图片,将会进入预览视图,同时左右滑动可以切换图片预览
支持多数据循环渲染
wxParse支持特定设置下的多数据渲染,适用于在评论、多文本分别渲染等
请继续向下看,循环渲染多条html评论
支持短table标签
wxParse目前对于table的支持比较有限
WxParse.wxParse('article', 'html', article, that,5);
* 多数据解析示例
var replyHtml0 = `
wxParse回复0:不错,喜欢[03][04]
var replyHtml1 = `
wxParse回复1:不错,喜欢[03][04]
var replyHtml2 = `
wxParse回复2:不错,喜欢[05][07]
var replyHtml3 = `
wxParse回复3:不错,喜欢[06][08]
var replyHtml4 = `
wxParse回复4:不错,喜欢[09][08]
var replyHtml5 = `
wxParse回复5:不错,喜欢[07][08]
var replyArr = [];
replyArr.push(replyHtml0);
replyArr.push(replyHtml1);
replyArr.push(replyHtml2);
replyArr.push(replyHtml3);
replyArr.push(replyHtml4);
replyArr.push(replyHtml5);
for (let i = 0; i & replyArr. i++) {
WxParse.wxParse('reply' + i, 'html', replyArr[i], that);
if (i === replyArr.length - 1) {
WxParse.wxParseTemArray(&replyTemArray&,'reply', replyArr.length, that)
@import &/wxParse/wxParse.wxss&;
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
新用户大礼包！
现在注册，免费体验40+云产品，及域名优惠！
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
微信小程序-利用wxParse将html转为wxml相关信息，包括
的信息，所有微信小程序-利用wxParse将html转为wxml相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
InternationalwxParse 0.3 微信小程序 HTML/Markdown 富文本解析, 支持多级及 Emoji_搜外问答
wxParse-微信小程序富文本解析组件支持Html及markdown转wxml可视化版本号:0.3作用: 将Html/Markdown转换为微信小程序的可视化方案github地址：[https://github.com/icindy/wxParse](https://github.com/icindy/wxParse)特性支持特性实验功能ToDo[x] HTML的大部分标签解析[x] 小表情emjio[x] table标签[x] 内联style相关截图基本使用方法1. Copy文件夹wxParse- wxParse/
-wxParse.js(必须存在)
-html2json.js(必须存在)
-htmlparser.js(必须存在)
-showdown.js(必须存在)
-wxDiscode.js(必须存在)
-wxParse.wxml(必须存在)
-wxParse.wxss(必须存在)
-emojis(可选)2. 引入必要文件//在使用的View中引入WxParse模块var WxParse = require('../../wxParse/wxParse.js');//在使用的Wxss中引入WxParse.css,可以在app.wxss@import "/wxParse/wxParse.wxss";3. 数据绑定var article = '&div&我是HTML代码&/div&';/*** WxParse.wxParse(bindName , type, data, target,imagePadding)* 1.bindName绑定的数据名(必填)* 2.type可以为html或者md(必填)* 3.data为传入的具体数据(必填)* 4.target为Page对象,一般为this(必填)* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)*/var that =WxParse.wxParse('article', 'html', article, that,5);4. 模版引用//这里data中article为bindName&template is="wxParse" data="{{wxParseData:article.nodes}}"/&高级用法配置小表情emojis/*** WxParse.emojisInit(reg,baseSrc,emojis)* 1.reg，如格式为[00]=&赋值 reg='[]'* 2.baseSrc,为存储emojis的图片文件夹* 3.emojis,定义表情键值对*/WxParse.emojisInit('[]', "/wxParse/emojis/", {
"00": "00.gif",
"01": "01.gif",
"02": "02.gif",
"03": "03.gif",
"04": "04.gif",
"05": "05.gif",
"06": "06.gif",
"07": "07.gif",
"08": "08.gif",
"09": "09.gif",
"09": "09.gif",
"10": "10.gif",
"11": "11.gif",
"12": "12.gif",
"13": "13.gif",
"14": "14.gif",
"15": "15.gif",
"16": "16.gif",
"17": "17.gif",
"18": "18.gif",
"19": "19.gif",
});多数据格式参见wikiFAQ参见wiki二次开发基础数据格式parsedata:{
view:{},//样式存储
nodes:{},//展示需要的存储节点
images:[],//存放图片对象数组
imageUrls:[],//存放图片url数组}参见wiki文章来自：
作者公告牌
第九程序 http://9.cn
管理文章：
微信自媒体实战案例
从零开始玩转微信自媒体
一周发布文章最多的作者
24小时获得「赞」最多的人
45 回复(55 赞)
16 回复(6 赞)
18 回复(5 赞)
(3 个回答)
(3 个回答)
(2 个回答)
(2 个回答)
(1 个回答)
(1 个回答)
(1 分钟前)
(1 小时前)
(2 小时前)
(2 小时前)
(2 小时前)【h5标签转小程序标签】小程序使用wxParse解析html教程
时间： 18:19:32
&&&& 阅读：58
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&一、先下载所需文件，下载地址：& ，下载完毕后会得到一个wxParse文件夹，后面会用到；
二、先拷贝css到app.wxss文件，css如下：
* author: Di (微信小程序开发工程师)
* organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
垂直微信小程序开发交流社区
* github地址: https://github.com/icindy/wxParse
* for: 微信小程序富文本解析
* detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
margin: 0 5px;
font-family: Helvetica,sans-serif;
font-size: 28rpx;
color: #666;
line-height: 1.8;
word-break:break- overflow:
.wxParse-inline{
display: inline;
margin: 0;
padding: 0;
/*//标题 */
.wxParse-div{margin: 0;padding: 0;}
.wxParse-h1{ font-size:2em; margin: .67em 0 }
.wxParse-h2{ font-size:1.5em; margin: .75em 0 }
.wxParse-h3{ font-size:1.17em; margin: .83em 0 }
.wxParse-h4{ margin: 1.12em 0}
.wxParse-h5 { font-size:.83em; margin: 1.5em 0 }
.wxParse-h6{ font-size:.75em; margin: 1.67em 0 }
.wxParse-h1 {
font-size: 18px;
font-weight: 400;
margin-bottom: .9em;
.wxParse-h2 {
font-size: 16px;
font-weight: 400;
margin-bottom: .34em;
.wxParse-h3 {
font-weight: 400;
font-size: 15px;
margin-bottom: .34em;
.wxParse-h4 {
font-weight: 400;
font-size: 14px;
margin-bottom: .24em;
.wxParse-h5 {
font-weight: 400;
font-size: 13px;
margin-bottom: .14em;
.wxParse-h6 {
font-weight: 400;
font-size: 12px;
margin-bottom: .04em;
.wxParse-h1, .wxParse-h2, .wxParse-h3, .wxParse-h4, .wxParse-h5, .wxParse-h6, .wxParse-b, .wxParse-strong
{ font-weight: bolder }
.wxParse-i,.wxParse-cite,.wxParse-em,.wxParse-var,.wxParse-address{font-style:italic}
.wxParse-pre,.wxParse-tt,.wxParse-code,.wxParse-kbd,.wxParse-samp{font-family:monospace}
.wxParse-pre{white-space:pre}
.wxParse-big{font-size:1.17em}
.wxParse-small,.wxParse-sub,.wxParse-sup{font-size:.83em}
.wxParse-sub{vertical-align:sub}
.wxParse-sup{vertical-align:super}
.wxParse-s,.wxParse-strike,.wxParse-del{text-decoration:line-through}
/*wxparse-自定义个性化的css样式*/
/*增加video的css样式*/
.wxParse-strong,.wxParse-s{display: inline}
.wxParse-a{
color: deepskyblue;
word-break:break-all;
overflow:auto;
.wxParse-video{
text-align: center;
margin: 10px 0;
.wxParse-video-video{
width:100%;
.wxParse-img{
/*background-color: #*/
overflow: hidden;
.wxParse-blockquote {
margin: 0;
padding:10px 0 10px 5px;
font-family:Courier, Calibri,"宋体";
background:#f5f5f5;
border-left: 3px solid #dbdbdb;
.wxParse-code,.wxParse-wxxxcode-style{
display: inline;
background:#f5f5f5;
.wxParse-ul{
margin: 20rpx 10rpx;
.wxParse-li,.wxParse-li-inner{
display: flex;
align-items: baseline;
margin: 10rpx 0;
.wxParse-li-text{
align-items: center;
line-height: 20px;
.wxParse-li-circle{
display: inline-flex;
width: 5px;
height: 5px;
background-color: #333;
margin-right: 5px;
.wxParse-li-square{
display: inline-flex;
width: 10rpx;
height: 10rpx;
background-color: #333;
margin-right: 5px;
.wxParse-li-ring{
display: inline-flex;
width: 10rpx;
height: 10rpx;
border: 2rpx solid #333;
border-radius: 50%;
background-color: #fff;
margin-right: 5px;
/*.wxParse-table{
width: 100%;
height: 400
.wxParse-thead,.wxParse-tfoot,.wxParse-tr{
flex-direction:
.wxParse-th,.wxParse-td{
width: 580
.wxParse-u {
text-decoration: underline;
.wxParse-hide{
display: none;
.WxEmojiView{
align-items: center;
width: 16px;
height:16px;
.wxParse-tr{
display: flex;
border-right:1px solid #e0e0e0;
border-bottom:1px solid #e0e0e0;
border-top:1px solid #e0e0e0;
.wxParse-th,
.wxParse-td{
padding:5px;
font-size:28rpx;
border-left:1px solid #e0e0e0;
word-break: break-all;
.wxParse-td:last{
border-top:1px solid #e0e0e0;
.wxParse-th{
background:#f0f0f0;
border-top:1px solid #e0e0e0;
.wxParse-del{
display: inline;
.wxParse-figure {
overflow: hidden;
background: #f0f0f0;
height: 100%;
.container{
padding: 0;
margin: 0;
height: 100%;
.content-scroll{
height: 100%;
overflow: hidden;
clear: both;
color: #d95940;
color: #3399ff;
color: #19ad19;
color: #f4ce2b;
display: none;
width: 272rpx;
height: 88rpx;
position: fixed;
left: 50%;
margin-left: -136rpx;
margin-top: -44rpx;
background: transparent;
border: none
.sqbtn::after {
display: none;
min-width: 320rpx;
margin: 30rpx 0;
padding-top: 56rpx;
font-size: 26rpx;
color: #bbb;
display: none;
text-align: center;
background: url(http://xcx.gzzh.co/zhyxcx-gg.png) no-repeat center 0/auto 50rpx;
.zhygg view{
display: none
.zhygg text{
color: #364a79;
width: 690rpx;
height: 180rpx;
margin:30rpx auto;
position: relative;
display: none
.adv image{
width:100%;
height: 100%;
.adv text{
font-size: 24rpx;
color: #fff;
background: rgba(0, 0, 0, .6);
padding: 5rpx 10rpx;
border-radius: 2rpx;
position: absolute;
bottom: 16rpx;
right: 6rpx;
button::after{
display: none;
三、在你所要渲染页面的.js文件引入所下载的文件，如下（红色内容为主要要用的）：
var app = getApp()
var WxParse = require(‘../../wxParse/wxParse.js‘)
* 页面的初始数据
* 生命周期函数--监听页面加载
onLoad: function (options) {
var that = this;
var data = {
app.ajax(‘Igoods/detailinfo‘, data, function (res) {
console.log(res.data)
if(_type == 0){
var content = res.data.success.content_rule
}else if(_type == 1){
var content = res.data.success.content_bx
WxParse.wxParse(‘content‘, ‘html‘, content, that, 0);
//content是所要渲染的变量，that是作用域里的this
第四、在wxml里引入组件和所需内容：
&view class=‘content_wrap‘&
&import src="../../wxParse/wxParse.wxml" /&
&template is="wxParse" data="{{wxParseData:content.nodes}}" /&
最后目录结构如下（我是在help页面解析html的，红色框框里是上面所改的内容文件）：
&标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：https://www.cnblogs.com/xiaohuizhang/p/9101505.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！下载wxParse，只拷贝wxParse文件夹即可。
1、引入wxss
@import "../wxParse/wxParse.wxss";
2、引入wxml
&import src="../wxParse/wxParse.wxml"/&
&view class="wxParse"&
&template is="wxParse" data="{{wxParseData:article_content.nodes}}"/&
3、引入js并加载数据
var app = getApp();
var WxParse = require('../wxParse/wxParse.js');
motto: 'jxcat',
serverUrl: app.globalData.ajaxUrl,
baseUrl: app.globalData.baseUrl,
title: "文章详情",
article_title: "",
article_content: "",
onLoad: function (options) {
var that = this
var result
//serverUrl = app.globalData.ajaxUrl
wx.request({
url: app.globalData.ajaxUrl,
c: 'article' ,
a: 'info',
aid: options.aid
'content-type': 'application/json'
success: function(res) {
that.setData({
article_title:res.data.article_title,
article_content:WxParse.wxParse('article_content', 'html', res.data.article_content, that, 5)
小程序解析html - 使用wxParse 解析
第一步：去 https://github.com/icindy/wxParse 下载wxParse，注意：只拷贝wxParse文件夹。
1、引入wxss
@import “../wx...
使用wxParse插件直接解析从后台获取的html
我是wxParse官方文档，点我原理（个人理解）：
- 利用了微信小程序中的扩展，达到解析html的效果
- 都是小程序不能插入dom的锅基本使用方法：
Copy文件夹wxParse
微信小程序开发(十三)富文本插件wxParse的wxParseImgTap的bug修复
在上一篇微信小程序开发(十二)富文本插件wxParse的使用中，我已经使用了wxParse插件。下午有时间就仔细的把玩了一下，发现了一个bug。问题描述
仔细看报错，我们会发现是wxParse.js...
微信小程序wxparse内容页显示不出来不能正确解析html代码
这个是wxparse代码的一个bug,在一些特殊的手机里面，在wxparse/html2json.js中的第112和119行，都有一个console.dir(这个函数的使用，把这个函数注释掉，内容就可...
微信小程序Markdonw、HTML富文本内容显示解决办法
TowxmlTowxml 是一个可将HTML、markdown转换为WXML(WeiXin Markup Language)的渲染库。由于微信小程序不能直接渲染HTML，因此富文本编辑器生成的HTML...
1. wxParse 是微信小程序用来解析富文本编辑器的内容的
下载地址：https://github.com/icindy/wxParse
此处我把，wxParse放入了项目根目录下，也就是跟p...
这个是wxparse代码的一个bug,在一些特殊的手机里面，在wxparse/html2json.js中的第112和119行，都有一个console.dir(这个函数的使用，把这个函数注释掉，内容就可...
微信小程序开发(十二)富文本插件wxParse的使用
昨天一位网友问我小程序怎么解析富文本。他尝试过把html转出小程序的组件，但是还是不成功，我说可以把内容剥离出来。但是这两种方法都是不行了。后来找到了wxParse-微信小程序富文本解析组件。特性
微信小程序富文本展示，wxParse使用
wxParse的下载地址：https://github.com/icindy/wxParse
1、上述地址中下载wxParse文件
2、 解压文件将wxParse中内容拷贝到项目中如下图所示：
wxParse 0.3 微信小程序 HTML/Markdown 富文本解析, 支持多级及 Emoji
wxParse-微信小程序富文本解析组件，支持Html及markdown转wxml可视化
没有更多推荐了，工作中有遇到过在小程序中需要解析后台管理系统设置的富文本内容，一，可以使用wxParse插件解析html使用方法1.在github中下载 下载地址
https://github.com/icindy/wxParse/tree/master/wxParse2.下载后复制到自己的小程序项目中3.设置全局样式/**app.wxss**/
@import "./wxParse/wxParse.wxss";4.在需要调用插件的页面中引入js// pages/about/about.js
var WxParse = require('../../wxParse/wxParse.js4.使用方法，直接在方法中使用就可以了// pages/about/about.js
onLoad: function (options) {
const that = /*** WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)*/
var temp = WxParse.wxParse('article', 'html', data, that, 5);
},5.最后&!--pages/about/about.wxml--&
&import src="../../wxParse/wxParse.wxml"/&
&view class="content"&
&!-- 这一块是富文本 显示的内容区 --&
&template is="wxParse" data="{{wxParseData:article.nodes}}"/&
&/view&二，可以使用小程序自带的富文本组件基本使用方法1.在rich-text.wxml页面中使用 rech-text 标签&!-- rich-text.wxml --&
&rich-text nodes="{{nodes}}"&&/rich-text&2.在rich-text.js页面中使用 绑定数据 // rich-text.js
* 页面的初始数据
* 生命周期函数--监听页面加载
onLoad: function (options) {
const that =
let data = '&div&&h3&javascript - &em&js同步编程&/em&与异步编程的区别,异步有哪些优点,为什么...&/h3&&div&&span&日 - &/span&从编程方式来讲当然是&em&同步编程&/em&的方式更为简单,但是同步有其局限性一是假如是单线程那么一旦遇到阻塞调用,会造成整个线程阻塞,导致cpu无法得到有效利用...&/div&&div&&div&&/div&&span &&span &&/span&&/span& - 百度快照&/div&&div &&span&为您推荐：&/span&js同步和异步ajax异步和同步的区别&/div&&/div&';
that.setData({ nodes:data })
微信小程序解析html富文本插件wxParse
最近在开发微信小程序，因为一些文章的详情页面是富文本，但是小程序不支持html标签，所解析的时候需要将html标签转换为小程序可支持标签，在小程序社区里面发现一个插件应该是目前来说比较好用的插件，不多...
微信小程序富文本解析
富文本解析我用的是wxParse这个插件。
1.首先先下载这个插件到微信小程序对应的文件夹中
附上下载地址：https://github.com/icindy/wxParse
2.在.js...
浅谈小程序开发的坑——富文本解析
今天写着着代码，读取数据库的内容时突然跳出&&span&、&p&、&&这些HTML...
[微信小程序] rich-text富文本
rich-text是一个新增的微信小程序插件,从基础库1.4.0开始,低版本需要做兼容处理nodes属性可为Array和String类型,但推荐使用Array.由于String类型最终也会转为Arra...
微信小程序之HTML富文本解析
在最近微信小程序开发过程中，遇到一些文章内容是HTML富文本的，但是偏偏微信小程序本身是支持HTML标签的，所以我们在解析内容的时候就需要将内容中的HTML标签转换成微信小程序所支持的标签，其实刚开始...
昨天一位网友问我小程序怎么解析富文本。他尝试过把html转出小程序的组件，但是还是不成功，我说可以把内容剥离出来。但是这两种方法都是不行了。后来找到了wxParse-微信小程序富文本解析组件。特性
*版权证明: 只允许上传png/jpeg/jpg/gif格式的图片,且小于3M
*详细原因:
交 &em&微信小程序解析&/em&html&em&富文本&/em&插件 3积分 立即下载 ...
2、在项目文件中使用（1）在需要使用的wxml文件中引入WxParse.wxml示例：&!--index.wxml--&
&import src=&...
wxParse-微信小程序富文本解析组件，支持Html及markdown转wxml可视化
最近几天和同事做小程序，采坑无数，本来是要做一个效果，一串文字，中间有一段文字可点击。像这样
当时他跟我说你要不要看看官方文档的富文本。然后我就用了，结果发现了一个问题，我这种情况用富文...
没有更多推荐了，}