2021-08-25

开发过程中注意：
项目中的公用组件，最好不要随意修改，如果一定要修订也要考虑影响到不要影响其他人的使用【比如公用类名，公用事件、属性等】。如果是组件有bug，影响到其他人的情况下一定要通知其他人【重要】
管理端开发注意：
中台或中台页面模板风格管理端的表单验证，包括页面布局风格。需要参考中台或者迎新（可复制和粘贴类似的页面来修改为你需要的页面）的页面，除非有做特别要求【可咨询刘川、江东阳】
其他注意事项：
1、遇到如图所示应用场景下，为避免在键盘弹起时搜索导致组件无数据提示和页面无数据提示重复出现。请下述该方法，在该页面进行处理。
场景：

方法：

// 监听键盘收起 mounted时调用一次
    getKeyBoard () {
      // console.log(window, 'window对象')
      const ua = navigator.userAgent
      let isShow = false
      if (/(?:Android)/.test(ua)) {
        const innerHeight = cloneDeep(window.innerHeight)
        window.addEventListener('resize', async () => {
          const newInnerHeight = cloneDeep(window.innerHeight)
          isShow = innerHeight > newInnerHeight
          if (!isShow) {
  // 此处调用下拉列表刷新方法
  await this.onPullingDown(true)
          }
        })
      } else if (/(?:iPhone)/.test(ua)) {
        window.addEventListener('focusout', async () => {
          // 键盘收起事件处理
         // 此处调用下拉列表刷新方法
          await this.onPullingDown(true)
        })
      }
    }

2、使用了vue-page-stack插件的项目，如果使用document.title命名的时候，activated和（mounted或created）都要有对document.title命名操作，即使这个页面是最下级的详情。还有document.title最好不要写到公用组件内，如果一定要这样做那么要作为传入参数传进去，但是要提醒用到这个组件的人，注意将自己的标题传入。

3、如果使用管理端公用模板或者第二课堂、预定服务的管理端项目作为开发模板，不使用个人中心时，记得查看是否屏蔽了点击个人头像跳转个人中心的功能。如果未屏蔽，根据具体情况，不需要则屏蔽点击头像跳转个人中心的操作。

4、vscode CRLF自动转LF
4.1、新建 .editorconfig ，放在项目根路径下，配置如下：

vscode 请安装插件：CTRL+SHIFT+X 搜索 EditorConfig 并安装

http://editorconfig.org

root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

具体配置说明，参见：
https://editorconfig.org/

4.2、vscode 请安装插件EditorConfig
CTRL+SHIFT+X 打开搜索 EditorConfig 并安装
这样你新建或者把旧的文件 Ctrl + S，就OK了~

5、新的前端加解密文件。
但不是整个文件替换，因为有的项目里的解密函数名是unencrypt, 有的函数名是decrypt。

6、前端在使用try-catch 时需要注意的
管理端表单的try catch这个catch内一定要做处理，首先是要log出error信息，但message提示不能直接把catch的error放进去，catch的message一般提示操作失败。
7、post下载具体示例，示例仅供参考，其中具体的接口url和参数，请自行替换。
1、post下载接口配置

export function exportOutPort(url,data) {
    return request({
        url,
        method: 'post',
        data,
        responseType: 'blob'
    })
}

2、post下载接口调用示例

exportOut () {
      this.loading = true
      exportOutPort(this.exportUrl, {
        dataRange: this.exportForm.exportScope,
        formInline: this.searchParams,
        ids: this.checkedData.join(',')
      }).then(async res => {
        this.loading = false
        try {
          const translateBlob = JSON.parse(await (new Response(res.data)).text());
          const {
            msg
          } = translateBlob
          if (msg) {
            return this.$message.error(msg)
          }
        } catch (error) {
          return this.downloadUrl(res.data)
        }
      }).catch(error => {
        console.log(error)
        this.loading = false
        return this.$message.error(error)
      })
    }

3、返回数据下载处理
//下载文件

   downloadUrl(data, fileName, fileType) {
      if (!data) {
        return;
      }
      var blob = new Blob([data], {
        type: fileType ? fileType : "application/vnd.ms-excel"
      });
      var url = window.URL.createObjectURL(blob);
      var aLink = document.createElement("a");
      aLink.style.display = "none";
      aLink.href = url;
      aLink.setAttribute(
        "download",
        fileName ? fileName : new Date().getTime()
      );
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink); //下载完成移除元素
      window.URL.revokeObjectURL(url); //释放掉blob对象
    }

4、公司使用的手机号验证的正则：

/^1\d{10}$/