# requirejs-tools-mobile

**Repository Path**: xiaoheFE/requirejs-tools-mobile

## Basic Information

- **Project Name**: requirejs-tools-mobile
- **Description**: 基于requirejs-移动端模块化解决方案
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2018-04-22
- **Last Updated**: 2023-11-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于requirejs-移动端模块化解决方案

## 主要技术栈

+ Zepto       : 不解释
+ require     : AMD模块化工具，项目的主要构件。源文件目录src/js，生成目录dist/。
+ Less        : CSS预编译语言。源文件目录src/less，生成目录dist/css。
+ Mock        : 解决方案有2种：
1. 基于mock.js假数据的解决方案。用于模拟数据接口格式即假数据，文件位置src/js/mock。(用于接口不存在的情况)
2. 接口反向代理(用于接口存在的情况)
+ artTemplate : HTML模板引擎。源文件目录src/template，生成目录dist/。

## 主要插件
+ layer-mobile 页面弹窗  文档地址：http://layer.layui.com/mobile/
+ echarts 数据图表  文档地址：http://echarts.baidu.com/
+ TouchSlide.1.1 轮播图，tab选项卡 文档地址：http://www.superslide2.com/TouchSlide/
+ wheelpicker 筛选组件  文档地址：http://cople.github.io/WheelPicker/
+ iscroll 滑动加载（不再建议使用，建议使用betterscroll，后续会替换掉）
+ photoswipe 相册 文档地址：http://photoswipe.com/

## 命令

```
npm install     // 安装gulp及插件
+ 建议安装cnpm，下载node包速度会快一些，下面是安装指令   // mac安装需要sudo权限
+ npm install -g cnpm --registry=https://registry.npm.taobao.org
npm run dev     // 启动开发版本，不压缩，启用css map
npm run pro     // 启动生产版本，压缩图片和js，不启用css map
npm run build     // 启动生产版本，压缩图片和js，不启用css map，不启动本地sever
npm run clean   // 删除dist文件夹(需在gulp do之前执行)
npm run sftp    // 将 dist/** 上传至sftp（上传至本地研发服务器）

```

## 基于gulp架构，详见package.json

**注意：如要使用ES6/ES7/ES8，babel-preset-env可以转为ES5，IE8以下版本无法支持。**

+ babel-core             : babel内核，用于支持babel-preset-env。
+ babel-preset-env       : babel-preset-es2015已经停用，唯一的babel插件。
+ browser-sync           : http环境。
+ gulp-babel             : babel基于gulp的插件，需要和babel-preset-env一同使用。
+ gulp-changed           : 只编译改变的文件。
+ gulp-clean             : 删除文件及文件夹。
+ gulp-file-include      : 使html有Include的功能。
+ gulp-htmlmin           : html代码压缩。
+ gulp-if                : 条件语句。
+ gulp-imagemin          : 图片压缩。
+ gulp-less              : less编译。
+ less-plugin-autoprefix : css3补全前缀。
+ gulp-plumber           : 防止产生错误终止gulp。
+ gulp-sequence          : task同步队列。
+ gulp-sftp              : sftp上传。
+ gulp-sourcemaps        : css map。
+ gulp-uglify            : js压缩。
+ gulp-strip-debug       : 移除js压缩信息。
+ gulp-watch             : 检测。
+ minimist               : 处理node参数。

## 基于Node.js

### 项目版本相关配置: 

配置文件位置：**/src/projectConfig.json**

- **version**包括前端版本控制（用于清除缓存便于测试）
- **svnVersion**版本控制（生产环境真实版本-与version保持一致即可）
- **title**项目名称（用于页面title和gulp提示）
- **sftpProjectConfig**sftp相关配置

```
{
  "version"           : "1.0.0",
  "svnVersion"        : "1.0.0",
  "title"             : "机构专属家长App",
  "sftpProjectConfig" : {
    "host"       : "192.168.1.10",
    "port"       : "22",
    "user"       : "xiaohe",
    "pass"       : "Wfzf6&uoxGwzcpvA4+eRgiuMbH6oZv^P^C",
    "remotePath" : "/home/xiaohe/www/app/business.xiaohe.com.cn/bin/webroot/dist/"
  }
}
```

### 接口反向代理:

配置文件位置：**/src/mockRouteConfig.json**

用于实现反向代理，利于前后端分离，进行本地开发：
1. **path**为代理别名即ajax.url = "/api/vote"
2. **to**为被代理地址
3. http开头为跨域地址，/开头为本地地址。

```
{
  "routes": [
    {
      "path": "/api/vote", 
      "to": "http://www.baonahao.com/Ajaxs/getCategoryNameAndCourseNum",
      "commons": "接口信息备注"
    },
    {
      "path": "/api/getUserInfo",
      "to": "/mock/post1.json",
      "commons": "接口信息备注"
    }
  ]
}
```

## 目录结构
<pre>
requirejs-tools-mobile
│  .babelrc
│  .gitignore
│  deploy.sh
│  gulpfile.babel.js
│  package.json
│  README.md
│  tree.txt
│  YanagouJSBridge.js.txt
│  
├─gulp
│      agent_module.js
│      clean_module.js
│      create_version.js
│      css_module.js
│      getProjectConfig.js
│      html_module.js
│      image_module.js
│      js_module.js
│      options_module.js
│      rev_module.js
│      server_module.js
│      sftp_module.js
│      toProxy.js
│      watch_module.js
│      
└─src
    │  index.html
    │  mockRouteConfig.json
    │  projectConfig.json
    │  
    ├─agent
    │  │  agent_test.html
    │  │  Conf.php
    │  │  index.php
    │  │  RequestApi.php
    │  │  Sign.php
    │  │  VerificationCode.php
    │  │  
    │  └─tmp
    │          66411763d7484b502ad25cd16a3203b3.png
    │          
    ├─img
    │  └─slidebox
    │          dotte.png
    │          dotte_on.png
    │          round01.jpg
    │          
    ├─include
    │  │  header-common.html
    │  │  
    │  └─layout
    ├─js
    │  │  config.js
    │  │  init.js
    │  │  
    │  ├─config
    │  │      path.js
    │  │      
    │  ├─page-DemoShow
    │  │      entry-layer.js
    │  │      entry-webviewBridge.js
    │  │      entry-zeptoAnimate.js
    │  │      
    │  ├─page-Index
    │  │      entry-index.js
    │  │      
    │  └─public
    │      ├─business
    │      │      backEndStatusCode.js
    │      │      headAndFoot.js
    │      │      layerFz.js
    │      │      location.js
    │      │      
    │      ├─layout
    │      ├─service
    │      └─tools
    │              ajax.js
    │              artTempFun.js
    │              bridgeScript.js
    │              loadStyle.js
    │              method.js
    │              PhotoSwipe.js
    │              scrollLoad.js
    │              
    ├─less
    │  │  normalize.less
    │  │  public.less
    │  │  
    │  ├─component
    │  │      layer-default.less
    │  │      layout.less
    │  │      slidebox.less
    │  │      
    │  ├─page-DemoShow
    │  │      entry-layer.less
    │  │      entry-webviewBridge.less
    │  │      entry-zeptoAnimate.less
    │  │      
    │  ├─page-Index
    │  │      entry-index.less
    │  │      
    │  └─variable
    │          variable.less
    │          
    ├─lib
    │  ├─css
    │  │      animate.min.css
    │  │      wheelpicker.min.css
    │  │      
    │  └─js
    │      │  css.min.js
    │      │  decimal.js
    │      │  echarts.min.js
    │      │  layer-mobile.js
    │      │  mock-min.js
    │      │  require.js
    │      │  template-web.js
    │      │  text.js
    │      │  TouchSlide.1.1.js
    │      │  wheelpicker.min.js
    │      │  zepto-1.2.0.min.js
    │      │  
    │      ├─iscroll
    │      │  │  iscroll-probe.js
    │      │  │  iscroll.css
    │      │  │  iscroll.js
    │      │  │  
    │      │  └─img
    │      │          icon_pull.png
    │      │          load_page.gif
    │      │          
    │      ├─layer-mobile
    │      │      layer-default.css
    │      │      layer-mobile.js
    │      │      
    │      └─photoswipe
    │          │  photoswipe-ui-default.min.js
    │          │  photoswipe.css
    │          │  photoswipe.min.js
    │          │  
    │          └─default-skin
    │                  default-skin.css
    │                  default-skin.png
    │                  default-skin.svg
    │                  preloader.gif
    │                  
    ├─mock
    │  └─DemoShow
    ├─template
    └─view
        │  index.html
        │  
        └─DemoShow
                demo-webview.html
                layer.html
                webviewBridge.html
                zeptoAnimate.html
</pre>

## 代理接口调用(php接口代理层，用于解决跨域问题)
1. 示例地址：https://doc.oschina.net/jigou-web2.0
2. 密码：xiaohe.com

## 接口文档
文档地址：xxx

## css3兼容性速查
http://caniuse.com/#search=%3A%3Aafter