背景

目前一项目是巡查端，另一项目是统计领导端；要合并一起做重构处理准备；

整理点

• 组件功能部分：

  • 列表顶部搜索复杂筛选功能统一；

  • 加载loading组件，及网络请求的加载；

  • title头部组件，返回上一页跟uni-app开发的h5返回冲突；

  • 首页头部定制；

  • iconfont 确定库是否统一；

  • leaflet地图处理；两个项目都有用到；

  • ucharts地图和图表组件统一处理；

  • 地图导航打开功能；

  • 行政区选择组件及配合相关的搜索；

  • previewImage图片预览组件，文件下载功能；

• 公共业务部分

  • 网络请求request.js

  • 路由不同权限拦截部分；

  • uni-app通用的api;

  • 多媒体图片，拍照，文件，选择相册及删除操作功能；目前两个项目的拍照功能非常大的不同； 选择文件原生native.js中的；

  • 导航，地图相关功能统一；

  • 公共常用方法，做extends或者mixin，以及vue3中的hooks处理；

• app特殊部分；

  • 升级功能定制；版本名称及版本号错了问题；

  • app内部开发用的话，可以设置切换环境；【也可以装两个】

  • 新appid问题，还考虑不同id是否影响到升级及增量升级【服用原来yss的appid】；

  • android权限申请弹框提示处理，针对不同系统的机制；

  • app单独的离线功能机制-localfostage/localstage数据库；

  • 地图是否要考虑离线缓存；

  • 统一平台判断方式；

    // #ifdef APP-PLUS
    setStorageSync(cacheKey,data)
    // #endif
    
    // #ifdef H5
    setForage(cacheKey,data)
    // #endif
    

• 巡查/汛前检查部分

• 开发测试提交数据，【一定要控制到测试环境验证】；

• 项目大，提示不明显，不好维护，引入TS; 兼容js。

• 新功能可以是使用Composition API过渡新语法vue3

• 部署构建定制；包名及版本格式；

• 问题定位及开发调试断点使用，sentry接入；

• 两项目有复用的也页面，要统一路径和路由；

  • 水雨晴 waterCondition

  • 综合查询 comprehensiveQuery

  • 汛前检查统计 preFloodInspectStatistics

  • 水库列表

  • 水库详情

  • 登录页面；

重构中碰到的问题

预处理参数

路由动态处理

根据参数通过nodejs

ts兼容js处理

• import引入改为不用详细到.js文件；

• 配置tsconfig.json

  { 
    "compilerOptions": {
      "target": "esnext",
      "module": "esnext",
      "strict": true,
      "jsx": "preserve",
      "importHelpers": true,
      "moduleResolution": "node",
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "experimentalDecorators":true,
      "sourceMap": true,
      "skipLibCheck": true,
      "allowJs": true,
      "baseUrl": ".",
      "types": [
        "webpack-env",
        "@dcloudio/types",
        "@types/uni-app",
        "miniprogram-api-typings",
        "mini-types",
        "node"
      ],
      "paths": {
        "@/*": [
          "./src/*"
        ]
      },
      "lib": [
        "esnext",
        "dom",
        "dom.iterable",
        "scripthost"
      ]
    },
    "exclude": [
      "node_modules",
      "unpackage",
      "dist",
      "src/**/*.nvue"
    ]
  }
  

• 配置jsconfig.js

  {
      "compilerOptions": {
        "types": [
          "@dcloudio/types",
          "miniprogram-api-typings",
          "mini-types"
        ]
      },
      "vueCompilerOptions": {
        "target": 2,
        "extensions": [
          ".vue"
        ]
      }
    }
  

scss语法处理

原因

• 在开发过程中总碰见图片中的这样报错，造成这样问题我做过一下这些猜想，
• 一、可能是sass版本过于太低，不能识别/deep/穿透，
• 二、可能是其他依赖造成的，依赖安装的过多；
• 导致第二种情况无法证实，所以改用另一种写法，::v-deep穿透，

在一次机缘巧合的开发中，卸载了"sass":"~1,45.0"后，再安装"node-sass":"~4.14.1"

之后，使用/deep/格外的流畅，所以针对于之前的方法，卸载sass-loader，安装sass-loader@7.0.0版本的基础上，补充一点，卸载sass(npm uninstall sass)，安装node-sass

方案

• /deep/替换成::v-deep

某些预处理器(例如Sass)可能无法>>>正确解析。

• 在这些情况下，可以用/deep/
• 如果/deep/报错，可以使用**::v-deep**
• 组合器-两者都是它们的别名，>>> 并且工作原理完全相同。

组件处理

• 选择省市区组件addvcdSelect统一;为addvcdSelect.vue引入改为/addvcdSelect

路由拦截