wemark
1.0.0
Program mini ini memiliki dukungan asli untuk rendering HTML dan pada dasarnya dapat menggantikan wemark. Perpustakaan ini sudah lama rusak dan saat ini tidak sedang dalam pemeliharaan. Harap gunakan dengan hati-hati.
Digunakan untuk merender teks Markdown di program mini.
Sebelum lahirnya program mini, rendering Markdown umumnya memerlukan penguraian ke dalam HTML, dan kemudian merender HTML yang diurai. Namun, program mini tidak menyediakan fungsi rendering HTML. Oleh karena itu, sebelum lahirnya wemark, hampir semua pustaka rendering Markdown tidak dapat berfungsi dengan baik di bawah program mini.
wemark dapat merender konten Markdown dalam program kecil dan mendukung sebagian besar fitur Markdown termasuk gambar dan tabel.
rich-text asliwemark ke direktori root program miniwemark di file konfigurasi halaman {
"usingComponents" : {
"wemark" : " ../wemark/wemark "
}
}<wemark md="{{md}}" link highlight type="wemark"></wemark>Kode detailnya dapat ditemukan di direktori
demo, yang merupakan proyek "cuplikan kode" program kecil yang lengkap. Anda dapat menjalankannpm run copydi direktori root wemark terlebih dahulu, lalu menambahkannya ke "cuplikan kode" pengembang WeChat. alat untuk pengalaman.
Deskripsi parameter:
md , wajib diisi, string penurunan harga yang perlu dirender;link , apakah akan mengurai link tersebut. Jika false , maka akan ditampilkan menggunakan komponen navigator program mini, yang dapat melompat ke dalam program mini.highlight , apakah akan menyorot kode, defaultnya adalah false ;type , metode rendering, wemark akan menggunakan struktur data dan templat wemark untuk rendering, rich-text akan menggunakan komponen rich-text yang ada di dalam program mini untuk rendering (lompatan tautan dan video tidak didukung).Catatan: Penyorotan kode akan menambah jumlah tag dan jumlah data yang diurai, yang dapat menyebabkan masalah kinerja rendering. Harap gunakan sebagaimana mestinya berdasarkan kebutuhan sebenarnya.
Mpvue mendukung pengenalan komponen khusus WeChat. Anda dapat menambahkan konfigurasi di file .js halaman, referensi wemark , dan kemudian menggunakan wemark langsung di bagian template file .vue :
export default {
config : {
// 这儿添加要用的小程序组件
usingComponents : {
wemark : '../../static/wemark/wemark'
}
}
} < wemark :md =" md " link highlight type =" wemark " > </ wemark >Catatan: Untuk mengaktifkan mpvue untuk mengemas paket
wemarkke dalam direktoridistsaat pengemasan, disarankan untuk menempatkanwemarkdi direktoristatickode sumber.
Direktori mpvue proyek ini berisi proyek demonstrasi applet mpvue lengkap. Anda dapat menjalankan npm run copy di direktori root wemark , lalu membuka dan menggunakannya di alat pengembang WeChat.
Lakukan modifikasi berikut pada proyek talas yang ada:
wemark ke dalam direktori src , yaitu direktori src/wemarkwemark yang akan disalin selama kompilasi, ubah config/index.js , dan tambahkan wemark ke item pengaturan copy . copy : {
patterns : [
{
from : 'src/wemark' ,
to : 'dist/wemark' ,
} ,
] ,
options : {
}
} ,remarkable.js saat kompilasi, dan terus memodifikasi config/index.js Referensinya adalah sebagai berikut: weapp: {
compile : {
exclude : [
'src/wemark/remarkable.js' ,
]
} ,
...
}wemark di halaman, seperti src/pages/index/index.js : config = {
navigationBarTitleText : '首页' ,
usingComponents : {
wemark : '../../wemark/wemark'
}
}
state = {
md : '# headingnnText'
}
//...
render ( ) {
return (
< View className = 'index' >
< wemark md = { this . state . md } link highlight type = 'wemark' />
</ View >
)
}global.d.ts (khusus proyek TypeScript) declare namespace JSX {
interface IntrinsicElements {
wemark : any
}
} Direktori taro proyek ini berisi proyek demonstrasi applet taro lengkap. Anda dapat menjalankan npm run copy di direktori root wemark , lalu membuka dan menggunakannya di alat pengembang WeChat.
Terima kasih khusus kepada @Songkeys yang telah menindaklanjuti penggunaan talas selama proses berlangsung. Lihat #36 untuk detailnya.
npm install
npm test MIT
Jika Anda juga menggunakan wemark, silakan kirimkan PR untuk menambahkan program mini Anda sendiri ke dalam daftar.
rich-text menggunakan komponen teks kaya program minivideo[poster] untuk menambahkan gambar sampul video #15 oleh @kilik52widthFix dan tidak lagi menghitung tinggi #11 #12 secara dinamis~~deleted~~ )
