wxparse使用(富文本插件)
生活随笔
收集整理的這篇文章主要介紹了
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標簽,詳情參考官方文檔
總結
以上是生活随笔為你收集整理的wxparse使用(富文本插件)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: TEXT宏
- 下一篇: pb语言是什么计算机语言,pb编程语言