如何為mpvue製作的小程式markdown適配

這次帶給大家如何為mpvue製作的小程式markdown適配，為mpvue製作的小程式markdown適配注意事項有哪些，以下就是實戰案例，一起來看一下。

mpvue 的核心目標是提高開發效率，增強開發體驗。使用該框架，開發者只需初步了解小程式開發規格、熟悉 Vue.js 基本語法即可上手。框架提供了完整的 Vue.js 開發體驗，開發者編寫 Vue.js 程式碼，mpvue 將其解析轉換為小程式並確保其正確運作。此外，框架還透過 vue-cli 工具向開發者提供 quick start 範例程式碼，開發者只需執行一條簡單指令，即可獲得可執行的專案。

主要特性：

1. 徹底的元件化開發能力：提升程式碼

2. 完整的Vue.js 開發體驗

3. 方便的Vuex 資料管理方案：方便建立複雜應用

4. 快速的webpack 建置機制：自訂建置策略、開發階段hotReload

5. 支援使用npm 外部依賴

6. 使用Vue.js 命令列工具vue-cli 快速初始化專案

7. H5 程式碼轉換編譯成小程式目標程式碼的能力

實作原理：

Vue程式碼

1. 將小程式頁面寫為Vue.js 實作

2. 以Vue. js 開發規範實作父子元件關聯

小程式程式碼

1. #以小程式開發規範編寫視圖層範本

2. 設定生命週期函數，關聯資料更新呼叫

3. #將Vue.js 資料對應為小程式資料模型

並在此基礎上，附加以下機制

1. #Vue.js 實例與小程式Page 實例建立關聯

2. 小程式和Vue.js 生命週期建立映射關係，能在小程式生命週期中觸發Vue.js 生命週期

3. 小程式事件建立代理機制，在事件代理函數中觸發與之對應的Vue.js 元件事件回應

據悉，mpvue 框架已經在業務專案中實踐和驗證，目前正在美團點評內部大範圍使用。 mpvue 是基於 Vue.js 原始碼進行二次開發，在增加了小程式平台的實作同時，保留了跟隨 Vue.js 版本升級的能力。

相信開發過小程式的人都知道小程式不支援直接插入dom，那麼當我們取得到markdown資料需要渲染的時候就有麻煩。

封裝好的mpvue-wemark 位址

因此github上有很多成熟的小程式markdown渲染方案，但是自己之前寫mpvue的時候發現在mpvue上直接用這些函式庫是不行的，因為wxml和vue的寫法上是不相容的，因此就需要適配mpvue。這裡我選擇wemark這個庫。

主要做了幾步：1、把remarkable.js重新打包成ES版本，mpvue預設腳手架是wepack2不支援es commonjs混用2、把wxml和小程式js層不相容vue的寫法相容了下。

demo如下

<template>
 <p>
  <wemark></wemark>
 </p>
</template>
<script>
import wemark from "mpvue-wemark";
export default {
 data() {
  return {
   mdData: &#39;&#39;
  };
 },
 components: {
  wemark
 },
 mounted() {
   this.mdData = "## hello, world";
 }
};
</script>

這樣，就實現了在mpvue小程式中渲染出markdown的內容了

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何使用Vue.js實作微信公眾號選單編輯器（思維詳解）

如何使用Vue.js實作微信公眾號選單編輯器（案例代碼）

#

以上是如何為mpvue製作的小程式markdown適配的詳細內容。更多資訊請關注PHP中文網其他相關文章！