這次帶給大家mpvue小程式markdown適配怎樣實現,mpvue小程式markdown實現的注意事項有哪些,下面就是實戰案例,一起來看一下。
美團點評近日開源了 mpvue ,這是一個使用 Vue.js 開發小程式的前端框架。使用此框架,開發者將獲得完整的 Vue.js 開發體驗,同時為 H5 和小程式提供了程式碼重複使用的能力。如果想將 H5 專案改造為小程序,或開發小程式後希望將其轉換為 H5,mpvue 將是十分契合的一種解決方案。
mpvue 的核心目標是提高開發效率,增強開發體驗。使用該框架,開發者只需初步了解小程式開發規格、熟悉 Vue.js 基本語法即可上手。框架提供了完整的 Vue.js 開發體驗,開發者編寫 Vue.js 程式碼,mpvue 將其解析轉換為小程式並確保其正確運作。此外,框架還透過 vue-cli 工具向開發者提供 quick start 範例程式碼,開發者只需執行一條簡單指令,即可獲得可執行的專案。
主要特性:
徹底的元件化開發能力:提升程式碼
完整的Vue.js 開發體驗
方便的Vuex 資料管理方案:方便建立複雜應用
快速的webpack 建置機制:自訂建置策略、開發階段hotReload
支援使用npm 外部依賴
使用Vue.js 命令列工具vue-cli 快速初始化專案
H5 程式碼轉換編譯成小程式目標程式碼的能力
實作原理:
Vue程式碼
將小程式頁面寫為Vue.js 實作
以Vue. js 開發規範實作父子元件關聯
小程式程式碼
並在此基礎上,附加以下機制
#Vue.js 實例與小程式Page 實例建立關聯
小程式和Vue.js 生命週期建立映射關係,能在小程式生命週期中觸發Vue.js 生命週期
小程式事件建立代理機制,在事件代理函數中觸發與之對應的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 :mdData='mdData'/> </p> </template> <script> import wemark from "mpvue-wemark"; export default { data() { return { mdData: '' }; }, components: { wemark }, mounted() { this.mdData = "## hello, world"; } }; </script>
這樣,就實現了在mpvue小程式中渲染出markdown的內容了
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
##################################################### #以上是mpvue小程式markdown適配怎樣實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!