mpvue アプレットのマークダウン適応を実装する方法

今回は mpvue アプレットのマークダウン適応を実装する方法を説明します。 mpvue アプレットのマークダウン実装に関する 注意事項 とは何ですか。実際のケースを見てみましょう。

Meituan-Dianping は最近、Vue.js を使用して小規模なプログラムを開発するためのフロントエンド フレームワークである mpvue をオープンソース化しました。このフレームワークを使用すると、開発者は完全な Vue.js 開発エクスペリエンスを得ることができると同時に、H5 およびミニ プログラムのコード再利用機能を提供します。 H5 プロジェクトを小さなプログラムに変換したい場合、または小さなプログラムを開発して H5 に変換したい場合、mpvue は非常に適したソリューションになります。

mpvue の中心的な目標は、開発効率を向上させ、開発エクスペリエンスを向上させることです。このフレームワークを使用すると、開発者はミニ プログラム

開発仕様 を予備的に理解し、Vue.js の基本構文に精通しているだけで開始できます。このフレームワークは、完全な Vue.js 開発エクスペリエンスを提供します。開発者は Vue.js コードを作成し、mpvue がそれを解析して小さなプログラムに変換し、それが正しく実行されることを確認します。さらに、このフレームワークは、vue-cli ツールを介して開発者にクイック スタート サンプル コードを提供します。開発者は、簡単なコマンドを実行するだけで実行可能なプロジェクトを取得できます。

主な機能:

1. 徹底したコンポーネント開発機能: コードの改善

2. 完全な Vue.js 開発経験

3. 便利な Vuex データ管理ソリューション: 複雑なアプリケーションの構築に便利

4. 高速な Webpack ビルドメカニズム: カスタム ビルド戦略、開発段階でのホットリロード

5. npm 外部依存関係の使用をサポート

6. Vue.js コマンド ライン ツール vue-cli を使用して、プロジェクトを素早く初期化

H5 コード変換ミニプログラムのターゲットコードになる機能

実装原理:

Vueコード

ミニプログラムページをVue.js実装として記述する
Vue.js開発を使用親子コンポーネントを実装するための仕様 関連する
ミニプログラム開発仕様に従って記述された

ミニプログラムコード

1. ビューレイヤー
テンプレート

2. 設定

   ライフサイクル
関数、関連するデータ更新呼び出し
Vue.js データをミニ プログラムにマップします プログラム データ モデル

とこれに基づいて、次のメカニズムが付加されます
Vue.js インスタンスはミニ プログラム ページ インスタンスに関連付けられます
ミニ プログラムVue.js ライフ サイクルは、ミニ プログラムと Vue.js ライフ サイクル間のマッピング関係を確立できます。Vue.js ライフ サイクルは、プログラム ライフ サイクルでトリガーされます
ミニ プログラム。イベントはプロキシメカニズムを確立し、対応する Vue.js コンポーネントのイベント応答はイベントプロキシ関数でトリガーされます

mpvue フレームワークはすでにビジネスプロジェクトにあることが報告されています実践および検証されており、現在広く普及しています美団点評内で使用されます。 mpvue は、Vue.js のソース コードに基づいた二次開発であり、Vue.js のバージョン アップグレードに追従する機能を維持しながら、ミニ プログラム プラットフォームの実装を追加します。

ミニ プログラムを開発したことがある人ならご存知だと思いますが、ミニ プログラムは DOM への直接挿入をサポートしていないため、マークダウン データを取得してレンダリングする必要があるときに問題が発生します。

カプセル化された mpvue-wemark アドレス

そのため、github には小さなプログラム用の成熟したマークダウン レンダリング ソリューションが多数ありますが、以前 mpvue を書いたとき、wxml とvue は互換性がないので、mpvue を適応させる必要があります。ここでは wemark ライブラリを選択します。

主にいくつかの手順を実行します。 1. mpvue のデフォルトのスキャフォールディングは wepack2 であり、es commonjs の混合使用をサポートしません。 2. wxml とミニ プログラム js レイヤーの記述方法を互換します。 vue と互換性がありません。

デモは次のとおりです

<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アプレットでレンダリングできます

この記事の事例を読んだ後、あなたは方法をマスターしたと思います。さらにエキサイティングなコンテンツについては、注目してください。その他の関連記事は PHP 中国語 Web サイトにあります。

🎜推奨読書: 🎜

JSの蓄積、反復、枯渇、再帰などの一般的なアルゴリズムの使用の概要

Reactファミリーのバケット環境構築コード分析

以上がmpvue アプレットのマークダウン適応を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。