wxmlify下載 - wxmlify源碼下載

wxmlify

Ai源碼

v1.2.0

下載

Wxmlify

一個輕量快速的插件，幫助你在微信小程式中顯示富文本編輯器產生的HTML。

註：新版微信小程式已提供`<rich-text>`富文本元件，但其相容性暫時沒有保證，你可能還是需要第三方解析工具。

優點

體積小輕量- 只需2個文件，總共14kb
不添加多餘樣式，利於自訂文件樣式
可選擇性保留原文檔樣式，如指定保留原文檔的font-size , font-weight等
解析速度較快
用法簡便
支援圖片、影片、table

缺點

偏向對富文本編輯器產生的HTML進行解析，並不適用於所有場景。因為富文本編輯器產生的HTML符合一定的規格。

用法(demo)

把wxmlify 資料夾複製到你的weapp 專案下。
在你需要顯示富文本的頁面js 中引入，並new 一個實例，例如：

 // pages/index/index.js

var Wxmlify = require ( '../../wxmlify/wxmlify.js' )

Page ( {
  onLoad ( ) {
    // 以任何方式获得要解析的Html代码
    var html = getHTMLStringSomehow ( ) 

    // new 一个 wxmlify 实例就好了
    var wxmlify = new Wxmlify ( html , this , { } )
  }
} )

在對應的頁面wxml 中引入模板，例如：

 <!-- pages/index/index.wxml  -->
< import src =" ../../wxmlify/wxmlify.wxml " />

< template is =" wxmlify " data =" {{nodes: wxmlified}} " > </ template >

Doc 查閱

建構函數

 new Wxmlify ( html , page [ , options ] )

參數：
- html: 字串- 要解析的html程式碼字串
- page: 小程式頁面實例- 也就是所有頁面方法內this的指向
- options: 選項
傳回值：一個wxmlify實例，用來呼叫方法

選項

dataKey

解析後資料在頁面data中的key
類型： string
預設： 'wxmlified'
例如：

 new Wxmlify ( html , this , {
  dataKey : 'myRichText'
} )

相應地在wxml中：

 < template is =" wxmlify " data =" {{nodes: myRichText}} " > </ template >

preserveStyles

要保留的css樣式名稱（駝峰格式）
類型：
- 字串'all' ，表示保留所有樣式
- 否定值，如false , 0 , null ，表示移除所有自帶樣式
- 數組，指定保留某些樣式，如['fontSize', 'fontWeight', 'background']
預設： 'all' (預設保留所有樣式)

disableImagePreivew

禁用圖片點擊預覽
類型： boolean
預設： false

onImageTap

圖片點擊處理函數
類型： function
預設： function() {}

方法

wxmlify.getFullNodes()

回傳一個Javascript數組，HTML 被解析後的json資料結構

wxmlify.getHTML()

返回傳入的HTML

wxmlify.getImages()

返回數組，包含所有圖片的url

自訂樣式

. wxmlified-element {
  /* 修改段落块的样式 */
}

. wxmlified-element . h1 {
  /* 修改原<h1>标签块的样式，其它块级标签同理 */
}

. wxmlified-image {
  /* 修改图片的样式 */
}

. wxmlified-text {
  /* 修改文字节点的样式 */
}

. wxmlified-table . table {
  /* table 的样式 */
  border : 1 rpx solid # acacac ;
}

. wxmlified-table . tr {
  /* tr 的样式 */
  border-bottom : 1 rpx solid # acacac ;
}

. wxmlified-table . tr : last-child {
  border-bottom : 0 ;
}

. wxmlified-table . th , . wxmlified-table . td {
  /* th,td 的样式 */
  border-right : 1 rpx solid # acacac ;
  line-height : 2 ;
}

. wxmlified-table . th : last-child , . wxmlified-table . td : last-child {
  border-right : none;
}

. wxmlified-table . th {
  font-weight : bold;
}