這篇文章主要介紹了mpvue的小程序markdown適配的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)鳳翔,10余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

 mpvue是一個使用 Vue.js 開發(fā)小程序的前端框架。使用此框架，開發(fā)者將得到完整的 Vue.js 開發(fā)體驗，同時為 H5 和小程序提供了代碼復(fù)用的能力。如果想將 H5 項目改造為小程序，或開發(fā)小程序后希望將其轉(zhuǎn)換為 H5，mpvue 將是十分契合的一種解決方案。

mpvue 的核心目標(biāo)是提高開發(fā)效率，增強(qiáng)開發(fā)體驗。使用該框架，開發(fā)者只需初步了解小程序開發(fā)規(guī)范、熟悉 Vue.js 基本語法即可上手。框架提供了完整的 Vue.js 開發(fā)體驗，開發(fā)者編寫 Vue.js 代碼，mpvue 將其解析轉(zhuǎn)換為小程序并確保其正確運(yùn)行。此外，框架還通過 vue-cli 工具向開發(fā)者提供 quick start 示例代碼，開發(fā)者只需執(zhí)行一條簡單命令，即可獲得可運(yùn)行的項目。

主要特性：

1. 徹底的組件化開發(fā)能力：提高代碼

2. 完整的 Vue.js 開發(fā)體驗

3. 方便的 Vuex 數(shù)據(jù)管理方案：方便構(gòu)建復(fù)雜應(yīng)用

4. 快捷的 webpack 構(gòu)建機(jī)制：自定義構(gòu)建策略、開發(fā)階段 hotReload

5. 支持使用 npm 外部依賴

6. 使用 Vue.js 命令行工具 vue-cli 快速初始化項目

7. H5 代碼轉(zhuǎn)換編譯成小程序目標(biāo)代碼的能力

實現(xiàn)原理：

Vue代碼

1. 將小程序頁面編寫為 Vue.js 實現(xiàn)

2. 以 Vue.js 開發(fā)規(guī)范實現(xiàn)父子組件關(guān)聯(lián)

小程序代碼

1. 以小程序開發(fā)規(guī)范編寫視圖層模板

2. 配置生命周期函數(shù)，關(guān)聯(lián)數(shù)據(jù)更新調(diào)用

3. 將 Vue.js 數(shù)據(jù)映射為小程序數(shù)據(jù)模型

并在此基礎(chǔ)上，附加如下機(jī)制

1. Vue.js 實例與小程序 Page 實例建立關(guān)聯(lián)

2. 小程序和 Vue.js 生命周期建立映射關(guān)系，能在小程序生命周期中觸發(fā) Vue.js 生命周期

3. 小程序事件建立代理機(jī)制，在事件代理函數(shù)中觸發(fā)與之對應(yīng)的 Vue.js 組件事件響應(yīng)

據(jù)悉，mpvue 框架已經(jīng)在業(yè)務(wù)項目中得到實踐和驗證，目前正在美團(tuán)點(diǎn)評內(nèi)部大范圍使用。mpvue 是基于 Vue.js 源碼進(jìn)行二次開發(fā)，在增加了小程序平臺的實現(xiàn)同時，保留了跟隨 Vue.js 版本升級的能力。

相信開發(fā)過小程序的人都知道小程序不支持直接插入dom，那么當(dāng)我們獲取到markdown數(shù)據(jù)需要渲染的時候就有麻煩。

封裝好的 mpvue-wemark 地址

因此github上有很多成熟的小程序markdown渲染方案，但是自己之前寫mpvue的時候發(fā)現(xiàn)在mpvue上直接用這些庫是不行的，因為wxml和vue的寫法上是不兼容的，因此就需要對mpvue進(jìn)行適配。這里我選擇wemark這個庫。

主要做了幾步 ：1、把remarkable.js重新打包成ES版本，mpvue默認(rèn)腳手架是wepack2不支持es commonjs混用 2、把wxml和小程序js層不兼容vue的寫法兼容了下。

demo如下

<template>
 <div>
  <wemark :mdData='mdData'/>
 </div>
</template>

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

 }
};
</script>

這樣，就實現(xiàn)了在mpvue小程序中渲染出markdown的內(nèi)容了

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“mpvue的小程序markdown適配的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

當(dāng)前題目：mpvue的小程序markdown適配的示例分析
URL鏈接：http://chinadenli.net/article14/iphhge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、App開發(fā)、App設(shè)計、Google、搜索引擎優(yōu)化、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)