mpvue で作成した小さなプログラムに Markdown を適応させる方法-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-05-31 09:47:16

オリジナル

1875 人が閲覧しました

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

開発仕様

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

主な機能:

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

Vueコード

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

Vue.js開発を使用親子コンポーネントを実装する仕様関連付け
ミニプログラムコード

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

テンプレート
構成
関数、関連データ更新呼び出し
マップミニプログラムへの Vue.js データプログラムのデータモデル
そしてこれに基づいて、次のメカニズムが付加されます

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

ミニプログラムと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 サイトにあります。

推奨書籍:

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

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

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