wx page builder Télécharger - wx page builder Téléchargement du code source

wx page builder

Autres catégories

1.0.0

Télécharger

Préface

Êtes-vous submergé par les lourdes demandes des pages d'événements WeChat et H5. Voulez-vous un outil capable de générer des pages d'événements WeChat par glisser-déposer ? Ce projet a été développé sur la base de ce pain point, un outil qui peut glisser-déposer pour générer des pages H5 et prévisualiser les effets.

Github : Adresse de démonstration du portail : Portail

Aperçu de l'interface :

Interface de connexion gestion de projet Édition par glisser-déposer

Fonctionnalité

Glisser-déposer des composants d'édition
Générer une page H5
�Aperçu de l'interface
�Publier la fonction page H5 (en cours de développement)
Prise en charge de l'applet WeChat (en cours de développement)
��Support Element-UI (en cours de développement)
Modifier la page backend du PC (en cours de développement)

pile technologique

l'extrémité avant:
vue : Le développement modulaire nécessite l'une des trois options suivantes : angulaire, réagir ou vue. Ici, j'ai choisi vue.
vuex : gestion de l'état
sass : précompilateur CSS.
element-ui : Ne réinventez pas la roue. Il existe d'excellentes bibliothèques de composants Vue prêtes à l'emploi, vous devez donc bien sûr les utiliser. Si vous ne l’avez pas, encapsulez-en vous-même.
loadsh : classe d'outils

Serveur:
koa : Le langage back-end utilise nodejs. Il existe également de nombreux documents et matériels d'apprentissage koa. Il a été construit par l'équipe originale d'express, ce qui est parfait.
mongodb : Une base de données basée sur un stockage de fichiers distribué, plus flexible.

Préparation avant la lecture

1. Comprendre le développement de la pile technologique vue
2. Comprendre le koa
3. Comprendre MongoDB

Travaux d'ingénierie

Structure du répertoire du projet

 |-- 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				--------配置文件

Implémentation d'un éditeur front-end

L'idée d'implémentation de l'éditeur est la suivante : l'éditeur génère des données JSON de page, le serveur est responsable de l'accès aux données JSON et lors du rendu, les données JSON sont récupérées du serveur et transmises au modèle frontal pour traitement. .