微信小程式Markdown渲染庫
1. 準備工作:
下載並拷貝wemark目錄到小程式根目錄
WXSS中引用樣式:@import '../wemark/wemark.wxss'
WXML中引用結構:<import src="../wemark/wemark.wxml"/>
JS中引用wemark:var wemark = require('wemark')
2. JS部分
首先需要確定一個用於wemark渲染使用的資料名稱(預設為wemark),然後在頁面的data中指定:
page({
data:{ // 決定一個資料名稱 wemark:{}
}
});
接下來在Page的生命週期函數(如onReady)中,呼叫wemark.parse(md, this, options)即可。
具體的參數說明:
md,必填,需要渲染的Markdown字串
this,必填,Page實例
options,其它的參數
imageWidth,圖片的寬度,如包含圖片,則為必填,以px為單位 新版小程式圖片可以自適應寬高
name,對應上面指定的資料名稱,預設為wemark
3. WXML部分
// data中的參數和上方確定的資料名稱保持一致
<template is="wemark" data="{{...wemark}}"></template>
實例
// 引入wemark var wemark = require('../wemark/wemark'); // 需要渲染的Markdown文本var md = '# hello, world\n\nI love you, wemark!'; Page({
data: { // 確定一個資料名稱 wemark:{}
}, onReady: function(){ wemark.parse(md, this, { // 新版小程式可自適應寬高// imageWidth: wx.getSystemInfoSync().windowWidth - 40, name: 'wemark' })
}
});
本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性!本站所有資源僅供學習參考。請不要將它們用於商業目的。否則,一切後果都由您負責!如有侵權,請聯絡我們刪除。聯絡方式:admin@php.cn
相關文章
25 Oct 2018
這篇文章帶給大家的內容是關於微信小程式如何渲染html內容(程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
16 Aug 2018
這篇文章帶給大家的內容是關於微信小程式實例:如何取得和渲染資料(附程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
23 Oct 2018
這篇文章帶給大家的內容是關於微信小程式多層嵌套渲染清單及資料取得的程式碼,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
05 Mar 2020
這篇文章介紹了微信小程式從資料庫載入真實資料的方法,主要是配置網域名稱伺服器和編寫後台api,以及微信小程式中發送請求程式碼的編寫,希望對學習小程式開發的朋友有幫助!
31 May 2023
隨著微信小程式的普及,越來越多的企業和個人開始關注微信小程式的開發和應用。在微信小程式中,圖庫展示和管理是一個非常重要的功能。本文將介紹如何使用PHP實作微信小程式中的圖庫展示與管理。一、微信小程式圖庫概述微信小程式中的圖庫指的是儲存和管理圖片的服務。它可以幫助我們快速地上傳、展示和管理圖片。在微信小程式中,圖庫主要用於以下幾個方面:商品展示:在微信小程式中
Hot tools Tags
Hot Tools
微信小程式demo:仿商城
微信小程式demo:仿商城,上手簡單,對商城的一些基本的功能有很好的涉及
外帶:實現類似錨點功能
正是大家需要的類似錨點功能,另外也實現了一些外帶app的典型點菜功能,推薦學習研究;
微信小程式demo:樂助
微信小程式demo:樂助:類似基於地理位置的到位;助人應用,與張小龍的小程式精神有點相似。
微信小程式遊戲類demo挑選不同色塊
微信小程式遊戲類demo挑選不同色塊
微信小程式demo:輪播圖變換
輪播圖樣式變換,簡單的一個用小程式實現的輪播圖,寫法容易