首頁 > web前端 > js教程 > 主體

mpvue小程式markdown適配怎樣實現

php中世界最好的语言
發布: 2018-05-23 10:57:59
原創
2272 人瀏覽過

這次帶給大家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 範例程式碼,開發者只需執行一條簡單指令,即可獲得可執行的專案。

主要特性:

  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 :mdData=&#39;mdData&#39;/>
 </p>
</template>
<script>
import wemark from "mpvue-wemark";
export default {
 data() {
  return {
   mdData: ''
  };
 },
 components: {
  wemark
 },
 mounted() {
   this.mdData = "## hello, world";
 }
};
</script>
登入後複製

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

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

推薦閱讀:

JS累加、迭代、窮舉、遞迴等常用演算法使用總結

#React全家桶環境建構程式碼解析

##################################################### #

以上是mpvue小程式markdown適配怎樣實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!