如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1.把wxParse文件全部放入項目。
2.在wxml中import wxParse.wxml,并把template插入到到對應的位置上
-
-
<import src="../../../wxParse/wxParse.wxml"/>
-
<view class="view-title">{{title}}</view>
-
<view class="view-time-box">
-
<text class="view-date">{{date}}</text>
-
<text class="view-time">{{time}}</text>
-
</view>
-
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
3.在wxss中import wxParse.wxss，并設置樣式；比如‘wxParse-image’是富文本圖片轉化成image組件之后的類名，‘wxParse-p’是p標簽轉化成view組件后設置的類名
-
<!--wxss-->
-
@import "../../../wxParse/wxParse.wxss";
-
page{
-
background: #fff;
-
}
-
.view-title{
-
line-height: 80rpx;
-
font-size: 48rpx;
-
color:#0C0C0C;
-
overflow: hidden;
-
text-overflow: ellipsis;
-
display: -webkit-box;
-
-webkit-line-clamp: 2;
-
-webkit-box-orient: vertical;
-
max-height: 190rpx;
-
min-height: 80rpx;
-
width:690rpx;
-
padding:30rpx 30rpx 0;
-
}
-
.view-time-box{
-
height: 66rpx;
-
line-height: 66rpx;
-
font-size: 30rpx;
-
color:#999999;
-
margin-bottom: 40rpx;
-
padding:0 30rpx;
-
}
-
.view-date{
-
margin-right: 20rpx;
-
}
-
.wxParse-img{
-
margin-top:20rpx;
-
display: block;
-
position:relative;
-
top:0;
-
left:50%;
-
transform: translateX(-50%);
-
}
-
.wxParse-p{
-
text-indent: 2em;
-
margin-top:20rpx;
-
color:#0C0C0C;
-
line-height:50rpx;
-
font-size:34rpx;
-
padding:0 30rpx 30rpx;
-
text-align: justify;
-
}
4.js
-
var WxParse = require('../../../wxParse/wxParse.js');
-
Page({
-
-
-
-
-
data: {
-
title: '',
-
date: "",
-
time: "",
-
id: ''
-
},
-
-
-
-
-
onLoad: function (options) {
-
this.setData({
-
id:options.id
-
})
-
},
-
onShow: function () {
-
wx.showLoading({
-
title: '加載中...',
-
})
-
var that = this;
-
-
-
setTimeout(function () {
-
that.setData({
-
title:'僑寶柑普茶新會陳皮僑寶柑',
-
date:"2018-03-01",
-
time:"13:20:53"
-
})
-
var article = `
-
<img src="../../../imgs/index/s.png"></img>
-
<p>微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）</p>
-
<p>微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）微信小程序如何解析HTML富文本（使用wxParse解析富文本的demo）</p>
-
<img src="../../../imgs/index/s.png"></img>
-
<p>近兩年，小青柑的火爆有目共睹，嬌小玲瓏的產品形態、便攜式的消費場景、柑與茶結合的時尚方式以及獨特的口感和養生功效，都在順應著目前年輕化、多元化、便攜化的茶葉消費市場需求，讓它成為了一大爆品。</p>
-
`;
-
-
-
-
-
-
-
-
-
WxParse.wxParse('article', 'html', article, that, 20);
-
-
-
wx.hideLoading();
-
}, 500)
-
}
-
})
具體的API可以去GitHub上查看：https://github.com/icindy/wxParse
藍藍設計( www.tuitetiyu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
