Unduhan wxmlify - pengunduhan kode sumber wxmlify

wxmlify

Kode Sumber AI

v1.2.0

Unduh

Wxmlify

Plug-in ringan dan cepat yang membantu Anda menampilkan HTML yang dihasilkan oleh editor teks kaya di program mini WeChat.

Catatan: Program mini WeChat versi baru sudah menyediakan komponen teks kaya `<rich-text>` kaya>, namun kompatibilitasnya tidak dijamin untuk saat ini. Anda mungkin masih memerlukan alat penguraian pihak ketiga.

keuntungan

Kecil dan ringan - hanya 2 file, total 14kb
Tidak ada gaya berlebihan yang ditambahkan, sehingga nyaman untuk menyesuaikan gaya dokumen
Anda dapat secara selektif mempertahankan gaya dokumen asli, seperti menentukan untuk mempertahankan font-size , font-weight dll. dari dokumen asli.
Penguraian lebih cepat
Mudah digunakan
Mendukung gambar, video, tabel

kekurangan

Lebih suka mengurai HTML yang dihasilkan oleh editor teks kaya , dan tidak cocok untuk semua skenario. Karena HTML yang dihasilkan oleh rich text editor memenuhi spesifikasi tertentu.

Penggunaan (demo)

Salin folder wxmlify ke proyek weapp Anda.
Perkenalkan ke dalam js halaman tempat Anda perlu menampilkan teks kaya, dan buat instance baru, misalnya:

 // pages/index/index.js

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

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

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

Perkenalkan template ke halaman terkait wxml, misalnya:

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

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

Tampilan Dokumen

Konstruktor

 new Wxmlify ( html , page [ , options ] )

parameter:
- html: string - string kode html yang akan diurai
- halaman: Contoh halaman program mini - yaitu, this di semua metode halaman
- pilihan: pilihan
Nilai yang dikembalikan: instance wxmlify yang digunakan untuk memanggil metode

Pilihan

kunci data

Kunci data yang diurai dalam data halaman
Jenis: string
Bawaan: 'wxmlified'
Misalnya:

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

Sejalan dengan itu di wxml:

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

melestarikanStyles

nama gaya css yang akan dipertahankan (format huruf unta)
jenis:
- String 'all' berarti mempertahankan semua gaya
- Nilai negatif, seperti false , 0 , null , berarti menghapus semua gaya bawaan
- Array, menentukan untuk mempertahankan gaya tertentu, seperti ['fontSize', 'fontWeight', 'background']
Default: 'all' (biarkan semua gaya secara default)

nonaktifkanImagePreivew

Nonaktifkan pratinjau klik gambar
Jenis: boolean
Bawaan: false

diImageTap

Fungsi pemrosesan klik gambar
Jenis: function
Bawaan: function() {}

metode

wxmlify.getFullNodes()

Mengembalikan array Javascript, struktur data json setelah HTML diurai

wxmlify.getHTML()

Mengembalikan HTML yang diteruskan

wxmlify.getImages()

Mengembalikan array yang berisi URL semua gambar

Gaya khusus

. 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;
}