微信小程序 不支持富文本 編輯器 直接顯示 WxParse 有bug


 首先眾所周知,微信小程序不支持后台富文本編輯器直接編輯的html,經查詢得知有wxParse 這個東西做解析,用法大致列一下:

     首先 下載 引用,wxParse

//在使用的View中引入WxParse模塊 var WxParse = require('../../wxParse/wxParse.js');
//在使用的Wxss中引入WxParse.css,可以在app.wxss @import "/wxParse/wxParse.wxss";

 

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 = this; WxParse.wxParse('article', 'html', article, that, 5);
// 引入模板 <import src="你的路徑/wxParse/wxParse.wxml"/> //這里data中article為bindName <template is="wxParse" data="{{wxParseData:article.nodes}}"/>


二 引入完了發現,富文本編輯器里面的單位出來居然是 pt ,然而小程序對於pt的支持如下,可謂是慘不忍睹


不忍直視,最明顯的布局是不能看,然后就是 有些標簽不能像瀏覽器一樣忽略或者處理。

針對於圖中不能識別的<o:p>全局替換為空串。

針對於布局,主要在於單位是pt,pt 與 小程序的rpx 基本是兩倍的關系,
所以,全局替換 pt 為 x2rpx

如下圖:

效果如下:

 

是不是看起來好多了,但是還有個問題是,一些不標准的標簽,沒有閉合的標簽,是不識別的,暫時沒有好的處理辦法,看看哪位大神有了辦法處理這個事情(如下圖)

----------------------------------------------------------------------------更新,2019-01-19--------------------------------------------------------------------------------------------------------------

這個wxParse編輯器,后續發現一個問題,就是只能解析十層代碼,更多層的html代碼無法解析,下面是wxParse.wxml:

 

 

 

 

基於這個問題,不滿足我司的需求,我司需要的是99.9%的展示率,我也不能做一個瀏覽器解析器吧,果斷,換思路,發現有web-view可以內嵌h5頁面,結果展示出來果然效果不錯。

但是我司還有個需求是需要在當前頁面轉發和分享當前編輯的頁面,這個過程又出現了一些問題,有興趣的同學看另一篇 小程序webview 轉發 分享朋友圈

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM