wx page builder

序文

WeChat イベント ページと H5 の多大な要求に圧倒されていませんか? ドラッグ アンド ドロップで WeChat イベント ページを生成できるツールが必要ですか? このプロジェクトは、この問題点に基づいて開発されたもので、ドラッグ アンド ドロップで H5 ページを生成し、効果をプレビューできるツールです。

Github: ポータルのデモ アドレス: ポータル

インターフェイスのプレビュー:

特徴

• 編集コンポーネントをドラッグ アンド ドロップします。
• H5 ページの生成
• �インターフェイスのプレビュー
• ・H5ページ機能をリリース（開発中）
• WeChat アプレットをサポート (開発中)
• ��サポート要素-UI（開発中）
• PCバックエンドページ編集（開発中）

テクノロジースタック

フロントエンド：
vue : モジュール開発には、angular、react、または vue の 3 つのオプションのいずれかが必要です。ここでは vue を選択しました。
vuex : 状態管理
sass : CSS プリコンパイラー。
element-ui : 車輪の再発明をしないでください。優れた既製の Vue コンポーネント ライブラリがあるので、もちろんそれを使用する必要があります。それがない場合は、自分でカプセル化してください。
loadsh : ツールクラス

サーバ：
koa : バックエンド言語はnodejsを使用しており、expressのオリジナルチームによって構築されたkoaドキュメントや学習教材も多数あります。
mongodb : 分散ファイルストレージに基づいた、より柔軟なデータベース。

読む前の準備

1. vue テクノロジースタック開発を理解する
2. コアを理解する
3. mongodbを理解する

土木工事

プロジェクトのディレクトリ構造

 |-- client					--------前端项目界面代码
    |--assets					--------前端界面对应静态资源
    |--components				--------组件
    |--config					--------配置文件
    |--eventBus					--------eventBus
    |--filter					--------过滤器
    |--mixins					--------混入
    |--pages					--------页面
    |--router					--------路由配置
    |--store					--------vuex状态管理
    |--service					--------axios封装
    |--App.vue					--------App
    |--main.js					--------入口文件
    |--permission.js			--------权限控制
|-- server					--------服务器端项目代码
    |--confog					--------数据库链接相关
    |--middleware				--------中间件
    |--models					--------Schema和Model
    |--routes					--------路由
    |--views					--------ejs页面模板
    |--public					--------静态资源
    |--utils					--------工具方法
    |--app.js					--------服务端入口
|-- common					--------前后端公用代码模块（如加解密）
|-- engine-template			--------页面模板引擎，使用webpack打包成js提供页面引用
|-- docs					--------预留编写项目文档目录
|-- config.json				--------配置文件

フロントエンドエディタの実装

エディターの実装アイデアは次のとおりです。エディターはページの JSON データを生成し、サーバーは JSON データへのアクセスを担当し、レンダリング時に JSON データがサーバーからフェッチされ、処理のためにフロントエンド テンプレートに渡されます。 。

ありがたい

クォーク-h5

ライセンス

Apache ライセンス 2.0