JD Vue3コンポーネントライブラリはミニプログラム開発の詳細なプロセスをサポートします

ソースコードプレビュー: https://github.com/jdf2e/nutui

NutUI 3.0 公式サイト: https://nutui.jd.com/3x/

ミニプログラムマルチターミナル適応

設計意図

クロスターミナルミニプログラムの開発中に、使用するのに適したコンポーネントライブラリがないことがわかりました。特に、電子商取引モールのシナリオでビジネスを行う場合、ミニプログラムプロジェクトをサポートするために、JD App仕様を満たすコンポーネントライブラリがありませんでした。このギャップを埋め、NutUI コンポーネント ライブラリをより多くの開発者にとってより便利なものにするために、NutUI 3.0 で複数の端末にミニプログラムの機能を追加することにしました。

適応する方法

Taroはミニプログラムのクロスターミナル開発において優れたパフォーマンスを発揮します。Taro 3xも2020年11月にVue3のサポートを発表しており、Taro + Vueテクノロジースタックを使用してミニプログラムで複数のターミナルに適応するという目標を達成できます。

タロウの特徴は以下のとおりです。

- WeChat アプレットのネイティブ コードを WeChat プラットフォーム、Baidu プラットフォームなどに変換できます。

- Taro フレームワークは、JD.com ミニプログラムに適応できる唯一のフレームワークです。

- React/Vue 構文をサポートし、コンポーネント化と TypeScript のサポートを強化しました。

- 業界への大きな影響力、活発なコミュニティ、長期サポートの保証。

- マルチターミナル同期デバッグをサポートし、主流のアプレットに適応可能

Taro のこれらの機能と性能を NutUI コンポーネント ライブラリに追加し、それらの機能を接続できれば、NutUI コンポーネント ライブラリ全体にわたるミニプログラムを開発するという夢を実現できます。チームの専門家のリーダーシップの下、チームはたゆまぬ努力を重ね、試行と探究を繰り返し、簡単なものから難しいものまで、適応方法を次のように改良しました。

- Taro の自己互換性: チェックボックス、ラジオボタン、ステップなどの既存の 3.0 コンポーネント 9 つを Taro で直接使用できます。

- スタイルの適応: 両端のスタイルと CSS セレクターには若干の違いがあり、適切に処理する必要があります。

- DOM API の差別化された処理: 要素の取得方法が異なると、Taro 側のコンポーネントの機能に不具合が生じます。このようなコンポーネントでは、DOM 取得レベルでの調整が必要です。

- ディープ アダプテーション: これはワークロードの最大の部分でもあり、コンポーネントを書き換えるために Taro または WeChat ネイティブ機能を呼び出す必要があります。ピッカー、スワイパー、バックトップなどのより複雑なインタラクションを持つコンポーネントの場合、適応の目的を達成するために、Taro に基づいてカプセル化のレイヤーを作成する必要があります。

各コンポーネントについて、元のコンポーネントのディレクトリ構造に.taro.vueファイルを追加して、特に Taro 互換性を処理しました。デモやドキュメントについては、公式サイトのドキュメントにタブスイッチを追加し、さまざまな環境での使用方法や対応するデモを簡単に閲覧できるようにしました。

もちろん、ミニプログラム環境で効果を確認したい場合は、QR コードを表示する公式サイトのデモのほか、弊社プロジェクトの mobile-taro 配下の vue ディレクトリをコピーし、起動後に効果を確認することもできます。

使い方

NutUI をインポートしてプロジェクトで使用します。

# Vue3 プロジェクト npm i @nutui/nutui@next -S

# NutUI アプレット マルチターミナル プロジェクト npm i @nutui/nutui@taro -S 

NutUI 3.0について

技術的なハイライト:

1. Vue3を採用する

Vue3 の新機能の紹介: Composition API、Teleport、Emits など。

破壊的な変化、包括的なアップグレード

明確な構造とモジュール化された関数を備えた Composition API 構文を使用してリファクタリングされました

コンポーネントの発行イベントはコードの可読性を高めるために個別に抽出されます。

Teleport の新機能を使用してコンポーネントのマウントをリファクタリングする

2. ビルドツールがVite 2.xにアップグレードされました

webpack を廃止し、次世代のフロントエンド構築ツールである Vite を導入します。起動速度が30秒から約500ミリ秒に高速化され、開発効率が大幅に向上します。

3. TypeScriptを最大限に活用する

NutUI 3.0 では、フロントエンド アプリケーションの複雑さが増す中でコンポーネントの保守と拡張が困難になるという問題に対処するため、TypeScript を主要な開発言語として使用しています。

視覚体験の総合的なアップグレード

NutUI 3.0 は最新の JD App 10.0 仕様に基づいており、さまざまな小売アプリケーション シナリオを組み合わせて NutUI コンポーネントを再編成および設計します。

- 冗長な制御を削減

- モバイルデザイナーが基本的なコンポーネントを素早く再利用できるように支援する

- 共通の詳細設計基準を確立する

- インターフェースのモジュール性と汎用性を向上させる

- 設計開発ドッキングの基本基準を確立する

- 生産と研究の出力ドッキングの効率を改善し、出力作業負荷を軽減します。

- JD.comのデザイン言語システムに基づいてシナリオを構築する

- スケルトンを改良してメインプロセスを再構築し、「シーンの移動ライン」を構築して体験をよりスムーズにします

アンケート調査

より良いサービスを提供するために、ご意見やご提案を少しお聞かせいただければ幸いです。ご回答は厳重に秘密にさせていただきます。抽選でプレゼントが当たるアンケートです。アンケートにご回答いただいた方には、JD Joy周辺機器のプレゼントが当たる抽選会を開催いたします。

アンケートリンク: https://get.jd.com/

上記はミニプログラム開発をサポートするJingdong Vue3コンポーネントライブラリです！ Jingdong Vue3 コンポーネント ライブラリの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。