npm加速

npm config list
npm config set registry https://registry.npmmirror.com
或者直接下载cnpm
npm install cnpm -g –registry=https://registry.npmmirror.com
安装依赖cnpm install –save-dev

代码规范

ESLint错误提示

创建文件 .eslintrc 和 .eslintignore

.eslintrc中

{
  "extends": [
    "plugin:vue/base",
    "plugin:vue/recommended",
  ],
  "plugins": ["vue"],
  "env": {
    "browser": true,
    "node": true
  },
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 2017,
    "sourceType": "module"
  },
  "rules": {
    "no-unused-vars": [2, {"args": "none"}],
    "strict": "off",
    "valid-jsdoc": "off",
    "jsdoc/require-param-description": "off",
    "jsdoc/require-param-type": "off",
    "jsdoc/check-param-names": "off",
    "jsdoc/require-param": "off",
    "jsdoc/check-tag-names": "off",
    "linebreak-style": "off",
    "array-bracket-spacing": "off",
    "prefer-promise-reject-errors": "off",
    "comma-dangle": "off",
    "newline-per-chained-call": "off",
    "no-loop-func": "off",
    "no-empty": "off",
    "no-else-return": "off",
    "no-unneeded-ternary": "off",
    "no-eval": "off",
    "prefer-destructuring": "off",
    "no-param-reassign": "off",
    "max-len": "off",
    "no-restricted-syntax": "off",
    "no-plusplus": "off",
    "no-useless-escape": "off",
    "no-nested-ternary": "off",
    "radix": "off",
    "arrow-body-style": "off",
    "arrow-parens": "off",
    "vue/multi-word-component-names": "off",
    "vue/valid-v-for": "off",
    "vue/no-multiple-template-root": "off"
  },
  "globals": {
    "$": true,
    "axios": true,
    "Vue": true
  }
}

.eslintignore中放不需要做校验的文件

node_modules/
public/

package.json文件中

// 校验js和vue文件 静默不报错
  "scripts": {
    "lint": "eslint --quiet --ext js,vue ."
  },

配置好后运行 npm run lint

代码提交规范

我工作上是用Sourcetree代码可视化git平台去管理的
git checkout 创建或切换分支
main分支 develop 研发分支 永远固定存在的分支
feature-a feature-b 功能分支 来源于develop最后也会合并到develop分支上
hotfix分支 专门处理线上bug的 合并到master

规范

<type>(<scope>): <sybject>

• feat: 新功能 (feature)
• fix: 修补bug
• docs: 文档 (documentation)
• style: 格式 (不影响代码运行的变动)
• refactor: 重构 (既不是新增功能，也不是修改bug的代码变动)
• test: 增加测试
• chore: 构建过程或者辅助工具的变动

如何让每位同学都使用到这个规范呢
validate-commit-msg库
提交规范和代码错误检测整合到正常提交代码的流程中
ghooks库
npm install ghooks –save-dev

package.json中 自己可根据文档配置

{
  …
  "config": {
    "ghooks": {
      "pre-commit": "npm run lint",
      "commit-msg": "validate-commit-msg",
    }
  }
  …
}

移动端适配方案

1. rem 适配方案:使用 rem 单位代替 px，通过动态设置根元素 的 font-size 来实现不同屏幕下的等比例缩放。可搭配 postcss-pxtorem 插件自动把 px 转 rem。

     // 基于设计稿 375px 的宽度
   (function () {
     //375px 屏幕时，html font-size = 37.5px 设置 1rem = 37.5px
     const baseSize = 37.5; // 设计稿是 375px 宽 => 1rem = 10px
     function setRem() {
       const scale = document.documentElement.clientWidth / 375; //屏幕相对于设计稿的缩放比例：
       document.documentElement.style.fontSize = baseSize * scale + 'px';
     }
     setRem();
     window.addEventListener('resize', setRem);
   })();
   

   缺点：对设计稿要求统一（比如统一使用 375px 或 750px）；
2. viewport 适配方案（百分比布局 + meta viewport）
   通过设置 viewport 的缩放比例 + 使用百分比、vw/vh 单位进行布局，使页面在不同设备下显示一致。

   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

   使用 vw / vh 单位开发页面：

   .container {
     width: 100vw; /* 屏幕宽度 */
     height: 100vh; /* 屏幕高度 */
   }

   或者使用百分比配合媒体查询、flex 等布局方式。
   总结：

   移动端适配主要有 rem 和 viewport 两种方案。
   rem 适配通过动态设置 html 的 font-size + 使用 rem 单位，能做到设计稿等比例缩放，适合大多数项目开发。
   viewport 适配则更轻量，基于 vw/vh 单位，但在一些机型上兼容性稍差。
   实际开发中我常使用 rem + postcss-pxtorem 插件配合，兼顾适配效果和开发效率。

虚拟滚动

只渲染视口（可见区域）中的 DOM 元素，避免一次性渲染所有数据，提升性能。
设定参数： 显示多少行数据； 行高； 截取起始下标； 截取末尾下标；总数据列表的数组
挂载后拿到 :

• 滚动列表高度 = 行高 * 显示多少行数据
• 滚动条高度（所有数据的高度） = 行高 * 整个数据组成的数组.length

绑定滚动事件：做个节流

• 拿到卷进去高度 scrollTop
• 卷进去的行数 = 卷进去高度 / 行高 【四舍五入一下】
• 截取起始下标 = 卷进去的行数
• 截取末尾下标 = 截取起始下标 + 显示多少行数据
• 卷进去的高度再平移回来内容：translateY(${offsetTop}px)

总结：

uniapp做小程序登陆

1.调用uni.login这个api会返回code
2.请求微信一键登录接口把code传递给后端
会发生两种情况
2-1：用户在平台登陆并注册过，会直接返回用户的内容 + token
2-2；没有注册过用户第一次进入小程序，返回openId用户唯一标识、 会话密钥sessionKey、用户在微信开放平台账号下的唯一标识UnionID 进入到注册环节，uni.getUserProfile返回iv偏移量、rawData原始数据、encryptedData加密数据、signature签名
传递的参数就有openId,sessionKey,UnionID ＋ uni.getUserProfile返回的数据
以上注册后会返回token

小程序支付

用户点击立即下单会向后端传递数据时间戳、uuid、关于商品的、备注、地址
后端给前端返回支付参数
调用API-uni.requestPayment({})把支付参数传过去
支付成功逻辑，跳转到“支付成功页”，支付失败处理，提示“支付已取消”

小程序分享

小程序分享主要依赖于页面生命周期中的 onShareAppMessage 和 onShareTimeline 这两个钩子函数来配置分享内容，分别对应：
分享给好友（聊天窗口）
分享到朋友圈（仅支持在具有权限的小程序中）
按钮加 open-type = ‘share’