H5 Dooring Vue
1.0.0
H5-Dooringは、強力でオープンソースで無料のH5ビジュアルページ構成ソリューションであり、使いやすく、プロフェッショナルで信頼性が高く、無限に可能なシンプルで便利でプロフェッショナルで信頼性の高いH5ランディングページのベストプラクティスのセットを提供することに取り組んでいます。テクノロジースタックは主に反応し、背景はnodejsを使用して開発されます。
貢献、問題、機能のリクエストは大歓迎です！
[問題]ページを自由に確認してください。
このプロジェクトがあなたを助けたなら、♥を与えてください！
視覚エディターは主に次の部分で構成されています。
私たちのキャンバスはドラッグ可能でズームインしているため、 React-DNDとReact-Draggableを使用できます。
2番目はH5エディターパーツで、これはコア関数であり、後で詳細に分析します。また、プレビュー、プレビューリンクの生成、 JSONファイルの保存、これらの機能の保存などの機能もありますが、現在は視覚的な構造技術の一般的な方法の1つです。これらの機能のデモを見てみましょう。
H5ページのビジュアルエディターは、 UMIを足場ツールとして使用しています。
UMIは、ルーティングに基づいてスケーラブルなエンタープライズレベルのフロントエンドアプリケーションフレームワークであり、ルーティング機能が完全であり、関数拡張が実行されるように、構成されたルーティングとコンベンションルーティングの両方をサポートします。次に、完全なライフサイクルを備えたプラグインシステムが装備されており、ソースコードから製品を構築するためにあらゆるライフサイクルをカバーし、さまざまな機能拡大とビジネス要件をサポートします。
このようにして、プロジェクトではANTDを直接使用でき、現在人気のあるCSSモジュールを統合することができます。
// 创建并进入工程目录
mkdir dooring && cd dooring
// 创建umi应用
yarn create @ umijs / umi - app
// 安装依赖
yarn // 或者使用npm install簡単な3段階の戦略は、プロジェクトを簡単に構築できますが、これらの方法を使用する前に、最初にローカルノードバージョンが10.13以上であることを確認します）
プロジェクトが作成された後、コミュニティの選択したコンポーネントを調査した後、必要なサードパーティコンポーネントをインストールする必要があります。
プロジェクトを実行する前に、上記のコンポーネントを自分でインストールできます。
プロジェクト開発の最良の準備の後、H5ページのビジュアルエディターであるドアリングの設計を開始します。
H5 Visual Editorは主に4つのパートを必要とします。これらは記事の冒頭で分析されています。ここでは、上記が最も基本的でコア機能するディスプレイモデルであり、1つずつ解体します。
私たちは皆、いくつかの人気のあるページ視覚化ソリューションがあることを知っています：
著者は、次のように、利点と短所の比較チャートを作成しました。
| プラン | カスタマイズの学位 | 欠点 |
|---|---|---|
| オンラインでコードを編集します | 最高 | 高額の使用コスト、非技術者に対して非友好的で、効率が低い |
| JSONオンラインを編集します | より高い | JSONに精通している必要があり、特定の使用コストがあり、非技術的な人員に友好的ではなく、一般的に効率的です |
| コードドラッグアンドドロップの実装はありません | 高い | 使用コストが低く、基本的に操作のしきい値がなく、高効率 |
上記の分析によると、著者に適した視覚エディターを開発するために、著者はそれを実装するために、Yiqixiu、Tuzhan、Baidu H5などを実装します。
コンポーネントのカスタマイズ機能を提供するには、コンポーネント要件の変更によってもたらされるメンテナンスの利点を実現するために、非常に利用可能なデータ構造のセットを定義する必要があります。
データ構造の設計を開始する前に、最初にモジュールを分解しましょう。異なるコンポーネントは、異なる「編集領域」に対応しています。
上記の分析の後、著者は次のようなデータ構造を設計しました。
"Text" : {
"editData" : [
{
"key" : "text" ,
"name" : "文字" ,
"type" : "Text"
} ,
{
"key" : "color" ,
"name" : "标题颜色" ,
"type" : "Color"
} ,
{
"key" : "fontSize" ,
"name" : "字体大小" ,
"type" : "Number"
} ,
{
"key" : "align" ,
"name" : "对齐方式" ,
"type" : "Select" ,
"range" : [
{
"key" : "left" ,
"text" : "左对齐"
} ,
{
"key" : "center" ,
"text" : "居中对齐"
} ,
{
"key" : "right" ,
"text" : "右对齐"
}
]
} ,
{
"key" : "lineHeight" ,
"name" : "行高" ,
"type" : "Number"
}
] ,
"config" : {
"text" : "我是文本" ,
"color" : "rgba(60,60,60,1)" ,
"fontSize" : 18 ,
"align" : "center" ,
"lineHeight" : 2
}
}この標準化された構造設計の後、必要な編集ページの機能を簡単に実装できます。これは、編集者が以前に書かれたソリューションを編集するために設定を追加する必要があります。
React（VUEと同じ）に基づいて一般的なフォーム管理構成プラットフォームを構築する
コンポーネントライブラリの設計における重要な問題は、コンポーネントライブラリがますます遅くなることを意味します。そのため、コンポーネントとコードセグメンテーションを非同期に実装する必要があります。
import { dynamic } from 'umi' ;
export default dynamic ( {
loader : async function ( ) {
// 这里的注释 webpackChunkName 可以指导 webpack 将该组件 HugeA 以这个名字单独拆出去
const { default : HugeA } = await import ( /* webpackChunkName: "external_A" */ './HugeA' ) ;
return HugeA ;
} ,
} ) ;上記の方法では、各コンポーネントをラップするコンポーネントを定義します。
ここでは、コンポーネントの実装の簡単な例を紹介します。これは、誰もが理解するのに便利です。
const Header = memo ( ( props ) => {
const {
bgColor ,
logo ,
logoText ,
fontSize ,
color
} = props
return < header className = { styles . header } style = { { backgroundColor : bgColor } } >
< div className = { styles . logo } >
< img src = { logo && logo [ 0 ] . url } alt = { logoText } />
</ div >
< div className = { styles . title } style = { { fontSize , color } } > { logoText } </ div >
</ header >
} )上記のヘッダーコンポーネントのプロップ属性は、以前に設計したJSON構造によって完全に定義されます。最後のステップは、これらのコンポーネントを動的に渡すことです。
プレビュー関数は、ユーザーが生成したJSONデータをH5レンダリングするだけです。
これをオンラインでダウンロードするには、オープンソースライブラリを使用する必要があります。これは、フロントエンドのダウンロード例の難易度を特に解決します。
var FileSaver = require ( 'file-saver' ) ;
var blob = new Blob ( [ "Hello, world!" ] , { type : "text/plain;charset=utf-8" } ) ;
FileSaver . saveAs ( blob , "hello world.txt" ) ;上記のコードは、入っているデータをTXTファイルにダウンロードできます。
バックエンドのパートは多くの知識ポイントを含み、この記事の焦点ではないので、ここでは、 PHP 、 Java 、 Python 、または卵などのバックエンドサービスを実装できます。
特定のコードについては、私による別のフルスタック開発記事を参照してください。
nodejsに基づいて0から1のCMSフルスタックプロジェクトを実装する
パターンは基本的に同じです。
git clone https://github.com/MrXujiang/h5-Dooring.git cd ./h5-Dooringyarn installアプリケーションを開始します
yarn run startバージョン1.3のアップグレード、お楽しみに...
