https://github.com/rexhang/arseeds-wx-h5

arseeds活动H5页面
https://github.com/rexhang/arseeds-wx-h5

Last synced: about 1 year ago
JSON representation

arseeds活动H5页面

• Host: GitHub
• URL: https://github.com/rexhang/arseeds-wx-h5
• Owner: rexhang
• Created: 2020-02-05T12:25:15.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2020-02-05T12:29:46.000Z (over 6 years ago)
• Last Synced: 2025-01-24T12:45:42.206Z (over 1 year ago)
• Language: JavaScript
• Size: 43.1 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 微信H5页面-前后端分离方式实现

# 作者: 顾航（1134916452）

# 时间: 2017.05.09

# 仅供参考

## 1.项目简述

* 1.搭建Nond.js环境，安装下载关于gulp下相关插件包到本地目录。

* 2.构建前端页面目录结构，规划前端架构。

* 3.拆分前端静态页面，划分出视图层，控制层以及数据层。

* 4.编写关于应用app的入口文件，构建路由，分发任务到各控制器、数据层。

* 5.分别编写控制器、以及数据模型的数据交互，设计API接口与后台数据的调用。

* 6.编写DOM操作相关的用户交互效果。

* 7.编写Gulp自动化前端架构，处理前端的优化（代码和图片的压缩，代码合并，代码混淆，语法检测，浏览器自动更新，单元测试，整体测试等）功能性代码。

## 2.环境搭建 Node.js环境

* 3.目录划分

  > 目录结构

    + wx_h5(项目名称) ------------------------------- 项目开发目录

     - compile_sass ----------------------------------- sass编译为css的目录, 已自动化注入

     - css -------------------------------------------- css目录, 已自动化引入注入

     - injectFiles ------------------------------------ 文件inject样板目录, 已拷贝至根目录

     - js --------------------------------------------- js目录, 已自动化引入注入

     - lib -------------------------------------------- 第三方插件目录, 需要主动引入

     - mock ------------------------------------------- 模拟接口数据

     - ng-js ------------------------------------------ angularjs相关库

     - node_modules ----------------------------------- Node模块

     - sass ------------------------------------------ .scss文件编写目录, 自动编译至compile_sass

     - template --------------------------------------- 路由模板目录

     - webpack_build ---------------------------------- webpack构建目录

     - app.js ----------------------------------------- 应用程序配置目录

     - entrance.js ------------------------------------ webpack入口文件配置目录

     - factory.app.js --------------------------------- app的factory配置

     - gulpfile.js ------------------------------------ gulpfile配置目录

     - index.html ------------------------------------- 应用程序入口文件

     - package.json ----------------------------------- Node模块配置文件

     - README.md -------------------------------------- 应用程序说明书

     - webpack.config.js ------------------------------ webpack配置目录

* 4.代码编写顺序

    * 1）、通过cnpm install 安装相关包(注意：之前请先npm install -g cnpm –registry=https://registry.npm.taobao.org | npm install --global gulp | npm install webpack -g)

    * 2）、编写路由配置文件，以分发到各个控制器、数据模型中处理事务。

    * 3）、编写相关的控制器，抽离出service服务。

    * 4）、编写相关指令文件，控制DOM操作元素。

    * 5）、编写其它相关文件。

    * 6）、编写gulp测试文件gulpfile.js用于对项目的架构，应用于正式环境的部署文面。

    * 7）、编写单元测试文件与用户真实测试环境文件。

    * 8）、改动./scss/*.scss文件会自动编译导入;

    * 9）、改动./**/*.html文件会实时刷新浏览器;

    * 10）、改动./template/**/*.Controller.js文件会自动刷新浏览器;