【零售App】—— react/ant design mobile项目总结（一）

目录结构

环境

• 任何文件都能拿到环境变量 process.env.Node_ENV
• scripts目录下三个文件中命名了当前环境变量，development是开发环境（本地环境），production是生产环境（正式环境)，test是测试环境

  // start.js
  // Do this as the first thing so that any code reading it knows the right env.
  process.env.BABEL_ENV = ‘development‘;
  process.env.NODE_ENV = ‘development‘;
  

  // build.js
  // Do this as the first thing so that any code reading it knows the right env.
  process.env.BABEL_ENV = ‘production‘;
  process.env.NODE_ENV = ‘production‘;
  

  // test.js
  // Do this as the first thing so that any code reading it knows the right env.
  process.env.BABEL_ENV = ‘test‘;
  process.env.NODE_ENV = ‘test‘;

• util目录下util.js中，通过方法isDev（是否是development开发环境）判断定义dev变量，控制当前环境

  export function isDev() {
      if (process.env.NODE_ENV === ‘production‘) {
          return false
      }
      return true
  }
  
  let dev = !isDev();                         //  此时为开发环境，测试环境需要去掉 ！，改为isDev()
  
  export function setProHost(type) {          //  环境下配置不同接口
      // if ( dev|| type === 2) {             //  测试环境打开注释
      //     return ‘‘
      // }
      if (dev) {
          switch (type) {
              case 0:
                  return ‘:9099‘;
                  break
              case 1:
                  return ‘:8099‘;
                  break
          }
      } else {
          switch (type) {
              case 0 :
                  return ‘https://testsec.ljq.cn‘;
                  break
              case 1:
                  return ‘https://testback.ljq.cn‘;
                  break
          }
      }
  
  }
  

  打包：去掉！，打开注释，0与1的服务器地址中去掉‘test‘，打包的是正式地址，加上‘test‘，打包的是测试地址

主文件　　

• index.html —— public目录下单页面项目构建后生成的HTML

1. webloader上传视频插件、Eleditor富文本插件、webapi.amp高德地图接口、fastclick消除移动端点击延迟

   <script src="./editor/webuploader.min.js"></script>
   <script src="./editor/Eleditor.min.js"></script>
   
   <!--<script src="./editor/Eleditor.js"></script>-->
   
   <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
   
   <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=f69b59752849c4c77aaf9b2e122574d1&plugin=AMap.Geocoder"></script>

2. 解决兼容性问题，处理数据，传给后台、安卓处理webview

   <script>
       if (‘addEventListener‘ in document) {
         document.addEventListener(‘DOMContentLoaded‘, function() {
           FastClick.attach(document.body);
         }, false);
       }
       if(!window.Promise) {
         document.writeln(‘<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"‘+‘>‘+‘<‘+‘/‘+‘script>‘);  
       }
    </script>

3. Editor全局DOM，使富文本在全局都可使用 （component/eleditor - index.js封装了富文本组件，jquery打开）

   <div id="editor" class="editor"   style="width:auto;padding:20px 20px 65px;"></div>

• area.json 省市区地理位置数据 —— common/data目录中
  

  [{"value":"110000","label":"北京市","children":[{"value":"110100","label":"北京市","children":[{"value":"110101","label":"东城区"},{"value":"110102","label":"西城区"},
  {"value":"110105","label":"朝阳区"},
  {"value":"110106","label":"丰台区"},
  {"value":"110107","label":"石景山区"},{"value":"110108","label":"海淀区"},
  {"value":"110109","label":"门头沟区"},{"value":"110111","label":"房山区"},
  {"value":"110112","label":"通州区"},
  {"value":"110113","label":"顺义区"},{"value":"110114","label":"昌平区"},{"value":"110115","label":"大兴区"},{"value":"110116","label":"怀柔区"},{"value":"110117","label":"平谷区"},{"value":"110228","label":"密云区"},{"value":"110229","label":"延庆区"}
  ]}]},
  {"value":"120000","label":"天津市",

  View Code　

注：转载请注明出处

【零售App】—— react/ant design mobile项目总结（一）

原文：https://www.cnblogs.com/ljq66/p/11957430.html