生活随笔
收集整理的這篇文章主要介紹了
小程序wxParse
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第一步：下載wxParse
下載地址：https://github.com/icindy/wxParse
點擊下載
壓縮包包含的文件，【紅框文件】需要拷貝到小程序根目錄
第二步：使用教程
官網教程
（原本想說的，還是算了，如果想看的直接去作者：https://github.com/icindy/wxParse 這里看就行了！我看了這個文檔，竟然進了一次坑！直接曬我的教程吧！）
我的教程
第一步：配制xx.wxml文件（配制到你用到的頁面中）
[html]?view plaincopy
<import?src="../../wxParse/wxParse.wxml"/>???第二步：配制xx.wxss文件（配制到你用到的頁面中）
[html]?view plaincopy
@import?"../../wxParse/wxParse.wxss";??第三步：配制xx.js文件（配制到你用到的頁面中）
頭部引用?
[html]?view plaincopy
var?WxParse?=?require('../../wxParse/wxParse.js');??
onLoad()方法里使用
article_content:WxParse.wxParse('article_content', 'html', res.data.article_content, that, 5)
?????????第四步：xx.wxml文件里引用（引用到你用到的頁面）
[html]?view plaincopy
<view><template?is="wxParse"?data="{{wxParseData:content.nodes}}"?/></view>??完成這四步，就完美完成了，但是有得編輯器里面的圖片不是絕對地址，所以會引起圖片不顯示的問題！
圖片不顯示問題
修改文件【html2json.js】
代碼所在位置
這里的【server_url】就是指你的域名，我是直接在頂部【 ver】了一個變量【server_url】賦值的域名地址，所以你看到的這塊代碼出現了【server_url】！
1.把wxParse文件全部放入項目。
2.在wxml中import wxParse.wxml,并把template插入到到對應的位置上
[html]?view plaincopy
??<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組件后設置的類名
[css]?view plaincopy
<!--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
[javascript]?view plaincopy
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)????}??})??
總結
以上是生活随笔為你收集整理的小程序wxParse的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
