H5ビジュアルエディタのリアルタイムプレビューと実機スキャンコードプレビュー機能の実現方法

過去に素晴らしい

序文

WYSIWYGのデザインコンセプトは、常にWEB IDE分野で注目を集めている機能であり、Webコーダーのプログラミングエクスペリエンスとプログラミング効率を大幅に向上させることもできます。次に、作成者はH5ビジュアルエディターをリアルタイムでプレビューおよびプレビューします。実機スキャンコードプレビュー機能は、計画分析を行い、同様の製品を設計する際にすべての人にいくつかのアイデアを提供します。

上記の機能の実装を分析するケースとして、著者が開発したH5ドアビジュアルエディタを引き続き使用します。

あなたは得るでしょう

リアルタイムプレビューアプリケーションのシナリオと実際のケース
キャンバス要素と属性エディタのリアルタイムリンケージスキーム
リアルタイムプレビューの一般的な考え方
実機スキャンコードプレビューの実現アイデア
nodejs中間層に基づくリアルタイムの高可用性プレビューソリューション

テキスト

通常の状況では、リアルタイムプレビュー機能はフロントエンドに渡され、よく見られるWeChat開発者ツールのプレビュー、Alipayアップルトのプレビュー、vscodeのプレビュープラグインなど、よりクラシックなDWには強力なリアルタイムプレビュー機能も組み込まれています。、次に、H5ドアオンラインプログラミングのリアルタイムプレビューモジュールを見てみましょう。

H5ページ視覚化プラットフォームでは、キャンバスでリアルタイムに有効にできる特定のプロパティの変更など、構成ページの効果をリアルタイムで確認したり、携帯電話で実際のマシンの効果を表示したりして、このリアルタイムを提供したいと考えています。プレビュー機能は、間違いなくビジュアル構成プラットフォームに必要なだけです。次の場合：

PCで携帯電話のプレビューをシミュレートします。

実機のプレビューエントリと効果：

したがって、リアルタイムプレビューの設計の鍵は、エラーとエクスペリエンスを最大化できるように、キャンバス内のユーザーの構成を忠実に復元する方法です。

次に、著者は、上記のプレビュー方法を実装する方法と、可用性の高いプレビュープログラムを設計する方法を具体的に紹介します。

1.キャンバス要素と属性エディタのリアルタイムリンケージスキーム

キャンバス要素と属性エディターのリアルタイムリンケージスキームは、主に、属性エディターの変更がキャンバス要素にリアルタイムで同期される方法を指し、次の概念として抽象化されます。

右側のプロパティエディタがコンテンツを変更し、キャンバスをリアルタイムで更新できることを実現するには、「リンケージ」の概念である左側と右側を関連付けるモードを実装する必要があります。すべてのビジュアルコンポーネントに一意のスキーマに対応して（H5-Dooringの記事で紹介されており、興味のある友人は理解を学ぶことができます）、スキーマの構造は次のようになります。

{
    "config": {
        "color": "#fff",
        "name": "徐小夕"
    },
    "editData": [
        {
            "type": "Text",
            "key": "name"
        },
        {
            "type": "Color",
            "key": "color"
        }
    ]
}

复制代码

このようなデータ構造が設計されると、エディターのフォームを動的にレンダリングし（editDataを介して）、変更された値をコンポーネントに同期させることができます（editData->構成マッピングを介して）。

次に、共有データソースを定義する必要があります。vuex（たとえば、vueテクノロジースタックの場合）またはdva（reactテクノロジースタックの場合）を使用できます。一般的な設計のアイデアは次のとおりです。

基本的には、プロパティエディターでアクションをトリガーし、対応するコンポーネントの構成を変更してから、キャンバスコンテンツを更新します。pointDataは、キャンバス上のコンポーネントのデータセットであり、H5ページの編集アイテムと動的レンダリングプロパティエディターを表示するために使用されます。導入されるプレビュー機能は、pointDataによって提供されるデータにも依存します。

2.リアルタイムプレビューの一般的な考え方

著者の前回の記事では、Web IDEのリアルタイムプレビューを実装する方法、つまりnodejs + iframeメソッドについて詳しく説明しましたが、H5ドアビジュアルエディターでは、別のメソッドが必要になる場合があります。つまり、ユーザーはプレビューが必要な場合は、実際のマシンのプレビューまたは実際のマシンのプレビューを手動でシミュレートできます。ここでは通常、エディターインターフェイスにプレビューボタンがあります。ユーザーがクリックすると、次のようにプレビュービューにジャンプできます。

プレビューデータソースとして前述したjsonスキーマに基づいて、プレビューページのデータソースを介してH5ページを再レンダリングすることを簡単に考えることができます。アイデアは次のとおりです。

プレビューページがH5-Dooringの実装などの新しいページである場合、プレビューする前にこのデータソースをlocalStorageに保存する必要があります。localStorageの特性により、同じドメインのページ間でデータを共有できるため、実装すると非常に便利です。要件：レンダリングエンジン部分については、react-grid-layoutによって提供されるデータ供給ソリューションのみを使用する必要があります。コードは次のとおりです。

<GridLayout
  className={styles.layout}
  cols={24}
  rowHeight={2}
  width={vw > 800 ? 375 : vw}
  margin={[0, 0]}
>
  {pointData.map((value: PointDataItem) => (
    <div className={styles.dragItem} key={value.id} data-grid={value.point}>
      <DynamicEngine {...(value.item as any)} />
    </div>
  ))}
</GridLayout>

复制代码

DynamicEngineの実装については、著者のH5-Dooringソースコードを参照して特定の実装プロセスを理解できますが、ローカルストレージのみを使用するソリューションにはいくつかの問題があります。これについては、次の章で詳しく説明します。

3.実デバイススキャンコードプレビューの実現アイデア

実機スキャンコードプレビューの実現スキームである著者は、次の図に示すように簡単に要約します。

上記のプロセスでnodejsサービスを使用する理由は、実機のプレビューを実現するために携帯電話をPC構成に関連付ける必要があるためです。この関連付けは、構成データが比較的大きいため、urlパラメーターまたはurlパラメーター+要求モードを介して行うことができます。、後者が採用されています。urlパラメータを使用してリソースパスを特定し、H5マスタープロジェクトのパラメータに従って特定のデータを要求してページを表示します。これは現在人気のある実機プレビューソリューションでもあります。qrcodeを使用して動的に生成できます。 QRコード、QRコードの形式は次のとおりです。

const url = `${window.location.protocol}//${window.location.host}/h5_plus/preview?tid=${tid}`

复制代码

nodejsを使用して指定されたパラメーターを持つファイルを返す方法については、これは比較的簡単であり、ここでは1つずつ実装しませんが、上記の実機プレビューの実装プロセスを理解する必要があります。

4. nodejs中間層に基づいて、可用性の高いリアルタイムプレビューソリューションを実現します

localStroageを介したプレビューデータ共有を実現するために作成者が以前に作成したソリューションには、いくつかの欠点があります。たとえば、ユーザーAは、H5-Dooringによって構成されたH5ページをユーザーBと共有したいと考えています。これは、2つの異なるコンピューターに存在するため、ユーザーBプレビューデータを取得できないため、他の人が設定したH5ページを表示できません。また、ユーザーがブラウザの認識モードを開いたため、プレビューページがプレビューできない場合があるため、これら2つのシナリオでは次のことを行う必要があります。リアルタイムプレビューをより使いやすくするために、いくつかの最適化が行われました。

では、ユーザーがlocalStroageを正常に使用できない場合でも、構成ページにアクセスするにはどうすればよいでしょうか。答えはapiリクエストを使用することです。nodejsを再度使用してユーザー構成データを保存し、プレビュー中にlocalStroageがデータを取得できるかどうかを判断します。、次に、localStroageデータを直接使用します（使用できない場合）。apiリクエストに直接アクセスします。ロジックはおおまかに次のとおりです。

上記の実装は簡単ですが、プレビューの使いやすさとエクスペリエンスは、上記のように最適化することで提供でき、製品機能を設計するときに参照できます。

5.まとめ

上記のチュートリアルの作成者はH5-Dooringに統合されています。より複雑なインタラクティブ機能については、合理的な設計によって実現できます。自分で探索して学習することができます。

github ????：h5-ドア開放

やっと

H5ゲーム、webpack、node、gulp、css3、javascript、nodeJS、キャンバスデータの視覚化、その他のフロントエンドの知識と実際の戦闘について詳しく知りたい場合は、「興味深いフロントエンド」で一緒に勉強して話し合い、フロントエンドの境界を一緒に探索してください。

コメントエリア