mpvue で作成した小さなプログラムに Markdown を適応させる方法

今回は mpvue で作成したミニプログラムにマークダウンを適応させる方法を紹介します。 以下は、mpvue で作成したミニプログラムのマークダウンに適応するための注意点です。 mpvue の主な目標は、開発効率を向上させ、開発エクスペリエンスを向上させることです。このフレームワークを使用すると、開発者はミニ プログラム

開発仕様

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

主な機能:

徹底したコンポーネント開発機能: コードの改善
完全な Vue.js 開発経験
便利な Vuex データ管理ソリューション: 複雑なアプリケーションの構築に便利
高速な Webpack ビルドメカニズム: カスタム ビルド戦略、開発段階でのホットリロード
npm 外部依存関係の使用をサポート
Vue.js コマンド ライン ツール vue-cli を使用して、プロジェクトを素早く初期化

6. H5 コード変換ミニプログラムのターゲットコードになる機能
実装原理:

Vueコード

ミニプログラムページをVue.js実装として記述する

1. Vue.js開発を使用親子コンポーネントを実装する仕様 関連付け

2. ミニプログラムコード

ミニプログラム開発仕様書

ビューレイヤー
1. テンプレート
   構成
ライフサイクル
2. 関数、関連データ更新呼び出し
   マップミニプログラムへの Vue.js データ プログラムのデータモデル

3. そしてこれに基づいて、次のメカニズムが付加されます

Vue.js インスタンスはミニプログラム Page インスタンスに関連付けられます

1. ミニプログラムとVue.js ライフ サイクルは、ミニ プログラムと Vue.js ライフ サイクル間のマッピング関係を確立します。Vue.js ライフ サイクルは、プログラム ライフ サイクルでトリガーされます

2. ミニ プログラム イベントが確立されます。プロキシ メカニズム、および対応する Vue.js コンポーネントのイベント レスポンスがイベント プロキシ関数でトリガーされます

3. 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 サイトにあります。

推奨書籍:

Vue.js を使用して WeChat パブリック アカウント メニュー エディターを実装する方法 (詳細なアイデア)

Vue.js を使用して WeChat パブリック アカウント メニュー エディターを実装する方法 (ケース コード)

以上がmpvue で作成した小さなプログラムに Markdown を適応させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。