ホームページ > ウェブフロントエンド > Vue.js > WeChat ミニ プログラムは vue.js を使用できますか?

WeChat ミニ プログラムは vue.js を使用できますか?

coldplay.xixi
リリース: 2020-11-17 18:20:03
オリジナル
8365 人が閲覧しました

WeChat ミニ プログラムは vue.js を使用できます。mpvue は、[Vue.js] を使用して WeChat ミニ プログラムを開発するフロントエンド フレームワークです。このフレームワークを使用すると、開発者は完全な [Vue.js] 開発を取得できます。 H5 およびミニ プログラムのコード再利用機能を提供しながら。

WeChat ミニ プログラムは vue.js を使用できますか?

【おすすめ関連記事:vue.js

WeChat ミニ プログラムは vue.js を使用できます

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

ミニ プログラム開発の特徴

WeChat ミニ プログラムは、簡潔な開発方法を推奨し、複数ページの集約によって軽量な製品機能を完成させます。ミニ プログラムはオフライン パッケージとしてローカルにダウンロードされ、WeChat クライアントを通じてロードおよび起動されます。開発仕様はシンプルで、テクノロジーは徹底的にカプセル化されており、独自の開発システムを備えています。ネイティブや H5 の影がありますが、決して同じではありません。

アプレット自体は単純な論理ビュー層フレームワークとして位置付けられており、複雑なアプリケーションの開発は公式には推奨されていませんが、ビジネス要件の簡素化は困難です。複雑なアプリケーションでは、コンポーネントとモジュール化、自動構築と統合、コードの再利用と開発効率など、開発方法に対するより高い要件が求められます。しかし、プログラムの開発仕様が小さいと、これらの機能が大幅に制限されます。上記の問題を解決し、より良い開発エクスペリエンスを提供するために、Vue.js を使用して WeChat ミニ プログラムを開発する mpvue を作成しました。

mpvue とは

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

なぜ mpvue を行うのか

ミニ プログラムの内部テストの開始時に、H5 のベンチマークを行う製品実装を迅速に反復する予定です。中心的な魅力は次のとおりです。迅速な実装、コードの再利用、低コストと高効率... その後、複数のミニ プログラムの構築を経て、ビジネス シナリオ、テクノロジの選択、ミニ プログラムの開発方法を組み合わせて、開発段階で直面する主な問題を整理しました。

  • コンポーネント化メカニズムは完璧ではありません

  • コードのマルチエンド再利用機能が不足しています

  • # #小規模なプログラムフレームワークとチームテクノロジースタックを有機的に組織することができない
  • #ミニプログラムの学習コストが十分に低くない
  • ##と組み合わせる#コンポーネントの仕組み:
ミニ プログラム ロジックとビュー層のコードは分離されています。パブリック コンポーネントは抽出後に 1 つのファイル エントリに集約できません。コンポーネントはビュー層とロジック層にそれぞれ導入する必要があります。コンポーネントには名前空間メカニズムがなく、イベント コールバックはグローバル関数として設定する必要があるコンポーネントの設計には名前の競合のリスクがあり、データのカプセル化は不可能です。開発者は、

ES モジュールを介した 1 回限りのインポート、コンポーネント データが適切にカプセル化された使いやすいコード編成方法を必要としています。成熟したコンポーネントメカニズムはエンジニアリング開発にとって極めて重要です。

複数端末の多重化:

一般的なビジネス シナリオが 2 つあり、既存の H5

製品を小規模プログラム アプリケーションに変換する、またはその逆の変換です。効率の観点から、開発者はコードを再利用して開発を完了したいと考えていますが、ミニプログラム開発フレームワークではそれができません。静的コード解析により H5

コードを小さなプログラムに変換しようとしましたが、ビュー レイヤの変換のみで、それ以上のメリットは得られませんでした。マルチエンド コードの再利用には、より成熟したソリューションが必要です。

Vue.js の紹介:

小規模なプログラムの開発手法は H5 に似ているため、H5 でのコードの再利用を考慮します。チームのテクノロジー スタックの選択に従って、ミニ プログラム開発仕様として Vue.js を決定しました。 Vue.js を使用して小規模なプログラムを開発すると、次のような開発効率の向上が直接的にもたらされます:

H5 コードは最小限の変更で小規模なプログラムに再利用できます
  • Vue.js コンポーネントの仕組みを使用して小さなプログラムを開発すると、小さなプログラムと H5 コンポーネントの再利用が実現できます
  • 技術スタックが統合された後、小さなプログラムの学習コストが発生しますが削減され、開発者は H5 から小規模なプログラムに切り替える このプログラムにはさらなる学習は必要ありません
  • Vue.js コードにより、すべてのフロントエンドが開発とメンテナンスに直接参加できます
  • なぜ Vue.js なのか?これはチームの技術スタックの選択に依存するものであり、新たな選択の導入は技術スタックの統一や開発効率の向上に反し、開発ツールサービス事業の本来の意図に反します。

mpvue の進化

mpvue の形成はビジネス シナリオとニーズから始まり、最終計画の決定には 3 つの段階を経ました。

フェーズ 1:初めてのコード開発の効率を向上させるために設計されたビュー レイヤー コード変換ツールを実装しました。 H5 ビュー レイヤー コードを HTML タグ マッピング、Vue.js テンプレート、スタイル変換を含むミニ プログラム コードに変換することにより、このターゲット コードの二次開発を実行します。限定的なコードの再利用は実現しましたが、コンポーネント開発と小規模プログラムの学習のコストは効果的に改善されていません。

第 2 フェーズ: コードのコンポーネント化メカニズムの改善に重点を置きます。コード編成フォームは Vue.js

コンポーネント仕様を参照して設計されており、コードはコード変換ツールを通じて小さなプログラムに解析されました。変換ツールは主に、データの同期、ライフサイクルの関連付け、コンポーネント間の名前空間の問題を解決します。最終的に、

Vue.js 構文サブセットを実装しましたが、さらに多くの機能を実装したり、Vue.js バージョンの反復に従いたい場合、ワークロードの見積もりが難しくなり、終わりがないように感じられます。

第 3 段階: 私たちの目標は、Vue.js 構文の完全なセットをサポートし、Vue.js を使用して小規模なプログラムを開発するという目的を達成することです。また、Vue.js ランタイムを導入することにより、Vue.js 構文がサポートされるため、人間による構文の適応が回避されます。この時点で、

Vue.js を使用して小さなプログラムを開発するという目的は完了しました。テクノロジースタックの統合、コンポーネントベースの開発、マルチエンドコードの再利用、学習コストの削減、開発効率の向上という目標は、よりよく達成されています。

関連する無料学習の推奨事項:
javascript

(ビデオ)、WeChat アプレット開発チュートリアル

以上がWeChat ミニ プログラムは vue.js を使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート