wx page builder

머리말

WeChat 이벤트 페이지와 H5의 과도한 요구에 압도당하고 있습니까? 드래그 앤 드롭으로 WeChat 이벤트 페이지를 생성할 수 있는 도구를 원하십니까? 이 프로젝트는 이러한 문제점을 기반으로 개발되었으며, 드래그 앤 드롭으로 H5 페이지를 생성하고 효과를 미리 볼 수 있는 도구입니다.

Github: 포털 데모 주소: 포털

인터페이스 미리보기:

특징

• 드래그 앤 드롭 편집 구성요소
• H5 페이지 생성
• �인터페이스 미리보기
• �H5 페이지 기능 출시(개발중)
• WeChat 애플릿 지원(개발 중)
• ��지원 Element-UI(개발중)
• PC 백엔드 페이지 편집(개발 중)

기술 스택

프런트 엔드:
vue : 모듈식 개발에는 각도, 반응 또는 vue의 세 가지 옵션 중 하나가 필요합니다. 여기서는 vue를 선택했습니다.
vuex : 상태 관리
sass : CSS 프리컴파일러.
element-ui : 이미 만들어진 뛰어난 Vue 구성 요소 라이브러리가 있으므로 이를 사용해야 합니다. 없는 경우 직접 캡슐화하십시오.
loadsh : 도구 클래스

섬기는 사람:
koa : 백엔드 언어는 nodejs를 사용합니다. Koa 문서와 학습 자료도 많이 있습니다. Express의 원래 팀이 만든 것입니다.
mongodb : 보다 유연한 분산 파일 스토리지 기반 데이터베이스입니다.

읽기 전 준비사항

1. Vue 기술 스택 개발 이해
2. 코아를 이해하라
3. 몽고디비 이해하기

엔지니어링 건설

프로젝트 디렉터리 구조

 |-- 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

특허

아파치 라이센스 2.0