wxparse使用(富文本插件)


優點:目前已知唯一可以轉化HTML到小程序識別的插件

缺點:轉換一個HTML標簽可能需要大量的微信小程序標簽還有樣式

配置:第一步,下載

https://github.com/icindy/wxParse
第二步,放入項目中,我選擇pages目錄下
第三步,配置
wxml加入:
<import src="../wxParse/wxParse.wxml"/>
在需要的地方使用:
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
其中article是后台html值的變量名
 
js加入:
var WxParse = require('../wxParse/wxParse.js');
這里貌似使用es6的import會有錯誤
我在onload事件寫下了:
WxParse.wxParse('article', 'html', this.data.article, this, 5);
注意的是第三個和第四個參數,前幾個可以固定不變但是第一個要和數據變量名一致,第三個是后台數據,第四個是指的小程序標簽,可以注冊多個wxparse
wxss加入:
@import '../wxParse/wxParse.wxss';
到此完成,但是要注意的是a標簽的轉化,需要加入一個方法,示例如下:
wxParseTagATap: function (e) {
var href = e.currentTarget.dataset.src;
console.log(href);
wx.redirectTo({
url: href
});
}
這個在點擊a標簽的時候控制台其實是輸出了警告信息的
此外url也只能是小程序內部地址,這是個限制,他不能跳到外部,這里我想后台編輯的時候可以用二維碼替代,小程序跳轉外部地址可以使用web-view標簽,詳情參考官方文檔
 


免責聲明!

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



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