【h5标签转小程序标签】小程序使用wxParse解析html教程

时间:2021-09-29 05:11:03

一、先下载所需文件,下载地址:https://pan.baidu.com/s/1umZO9uI24zUTRd7VqaWbAg  ,下载完毕后会得到一个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
*/ .wxParse{
margin: 0 5px;
font-family: Helvetica,sans-serif;
font-size: 28rpx;
color: #666;
line-height: 1.8;
}
/* view{
word-break:break-all; overflow:auto;
} */
.wxParse-inline{
display: inline;
margin:;
padding:;
}
/*//标题 */
.wxParse-div{margin:;padding:;}
.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:;
margin-bottom: .9em;
}
.wxParse-h2 {
font-size: 16px;
font-weight:;
margin-bottom: .34em;
}
.wxParse-h3 {
font-weight:;
font-size: 15px;
margin-bottom: .34em;
}
.wxParse-h4 {
font-weight:;
font-size: 14px;
margin-bottom: .24em;
}
.wxParse-h5 {
font-weight:;
font-size: 13px;
margin-bottom: .14em;
}
.wxParse-h6 {
font-weight:;
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: #efefef;*/
overflow: hidden;
} .wxParse-blockquote {
margin:;
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: 400px;
}
.wxParse-thead,.wxParse-tfoot,.wxParse-tr{
display: flex;
flex-direction: row;
}
.wxParse-th,.wxParse-td{
display: flex;
width: 580px;
overflow: auto;
}*/ .wxParse-u {
text-decoration: underline;
}
.wxParse-hide{
display: none;
}
.WxEmojiView{
align-items: center;
}
.wxEmoji{
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{
flex:;
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;
} page{
background: #f0f0f0;
height: 100%;
}
.container{
padding:;
margin:;
height: 100%;
}
.content-scroll{
height: 100%;
overflow: hidden;
}
.cl{
clear: both;
} .red{
color: #d95940;
}
.blue{
color: #3399ff;
}
.green{
color: #19ad19;
}
.golden{
color: #f4ce2b;
}
.sqbtn{
display: none;
width: 272rpx;
height: 88rpx;
position: fixed;
left: 50%;
top: 50%;
margin-left: -136rpx;
margin-top: -44rpx;
background: transparent;
border: none
}
.sqbtn::after {
display: none;
}
.zhygg{
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;
}
.adv{
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')
Page({ /**
* 页面的初始数据
*/
data: { }, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { var that = this;
var data = {
id: id
}
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}}" /> </view>

最后目录结构如下(我是在help页面解析html的,红色框框里是上面所改的内容文件):

【h5标签转小程序标签】小程序使用wxParse解析html教程

【h5标签转小程序标签】小程序使用wxParse解析html教程的更多相关文章

  1. 微信小程序——智能小秘&OpenCurlyDoubleQuote;遥知之”源码分享(语义理解基于olami)

    微信小程序智能生活小秘书开发详解 >>>>>>>>>>>>>>>>>>>>&gt ...

  2. 【requireJS路径加载】与程序员小卡的交流

    这两天正好看到了程序员小卡同学的一篇博客,里面对requireJS路径的解析做了一些说明,里面有点问题待解决,我这里正好知道一点,所以整理成文,不知对小卡同学是否有帮助. http://www.cnb ...

  3. Android开发5:应用程序窗口小部件App Widgets的实现

    前言 本次主要是实现一个Android应用,实现静态广播.动态广播两种改变 widget内容的方法,即在上篇博文中实验的基础上进行修改,所以此次实验的重点是AppWidget小部件的实现啦~ 首先,我 ...

  4. 微信小程序之小豆瓣图书

    最近微信小程序被炒得很火热,本人也抱着试一试的态度下载了微信web开发者工具,开发工具比较简洁,功能相对比较少,个性化设置也没有.了解完开发工具之后,顺便看了一下小程序的官方开发文档,大概了解了小程序 ...

  5. 玩玩小程序:使用 WebApi 交互打造原生的微信小程序 - 图灵小书架

    使用 WebApi 交互打造原生的微信小程序 - 图灵小书架 目录 介绍 源码地址 扫一扫体验 代码分析 其它相关信息(互联网搜集) 介绍 定时抓取图灵社区官网的首页.最热.推荐和最新等栏目的相关图书 ...

  6. 【开源】微信小程序、小游戏以及 Web 通用 Canvas 渲染引擎 - Cax

    Cax 小程序.小游戏以及 Web 通用 Canvas 渲染引擎 Github → https://github.com/dntzhang/cax 点我看看 DEMO 小程序 DEMO 正在审核中敬请 ...

  7. &lbrack;微信小程序&rsqb; 微信小程序富文本-wxParse的使用

    最近小程序蛮火的,公司要做于是学了一点点小程序 不知道你们有没有遇到过这种问题: 从公司服务器获取的文章内容是有HTML标签格式的一段内容,但是微信是不支持这些标签的,怎么办呢? 1.一般网站后台的文 ...

  8. 微信小程序 使用wxParse解析html

    微信小程序 加载 HTML 标签:https://blog.csdn.net/zclengendary/article/details/54312030 微信小程序 使用wxParse解析html:h ...

  9. APP跳转小程序,小程序跳转APP

    关注公共号,搜索 "APP跳转小程序,小程序跳转APP",查看原文 前置条件: 开发环境:windows 开发框架:uni-app , H5+,nativeJS,mpvue 编辑器 ...

随机推荐

  1. python endswith和startwith

    转载:http://blog.sina.com.cn/s/blog_5dd2af0901012rmn.html 做文本处理的时候经常要判断一个文本有没有以一个子串开始,或者结束.Python为此提供了 ...

  2. PL&sol;SQL Developer记住用户名密码

    在使用PL/SQL Developer时,为了工作方便希望PL/SQL Developer记住登录Oracle的用户名和密码: 设置方法:PL/SQL Developer ->tools-&gt ...

  3. 扩展easyui 的表单验证 (转)

    From:http://www.cnblogs.com/gengaixue/archive/2012/07/14/2591054.html easyui 的validatebox()提供了自定义验证的 ...

  4. Magento文件系统目录结构

    magento │  .htaccess│  cron.php //系统cron程序,修改 linux的cron运行,加入magento的一些定时处理│  cron.sh│  favicon.ico ...

  5. &lbrack;转&rsqb;mac 10&period;9&period;4下配置apache

    出处:http://yjmyzz.cnblogs.com mac 10.9.x已经自带了apache,可按如下步骤开启: 1.启动 sudo apachectl start 启动后,访问 http:/ ...

  6. 伸展树&lpar;三&rpar;之 Java的实现

    概要 前面分别通过C和C++实现了伸展树,本章给出伸展树的Java版本.基本算法和原理都与前两章一样.1. 伸展树的介绍2. 伸展树的Java实现(完整源码)3. 伸展树的Java测试程序 转载请注明 ...

  7. 【springmvc】之常用的注解

    原理这里不叙述,只讲怎么用 1. spring mvc中的@PathVariable是用来获得请求url中的动态参数的 @RequestMapping(value="/user/{userI ...

  8. Shell符号展开

    字符 展开 * 这个 “*” 字符意味着匹配文件名中的任意字符 shell 把 “*” 展开成了另外的东西 ,在 echo 命令被执行前. ~家目录 算术表达式展开 算术表达式展开使用这种格式: $( ...

  9. brief introduction JAVA new I&sol;O &lpar;NIO&rpar;

    Reference document: Getting started with new I/O (NIO) Preface: NIO was introduced with JDK1.4 for h ...

  10. C&num;模板打印功能-模板为WPS或Excel

    //---WPS----- using EtApp = ET; using System.Reflection; using System.Runtime.InteropServices; using ...