1.git在两个开发分支之间切换产生问题

切换分支的注意事项：

只有提交了文件才可以切换分支

但是当没有提交全部的文件时，就切换分支，会报如下的错误：

解决方案1：

1.储藏你的修改：如果你想临时保存修改而不提交它们，你可以储藏这些修改。储藏允许你存储修改并将工作目录恢复到你要切换的分支的状态。使用以下命令：

git stash

2.储藏修改后，你可以使用最初尝试的命令切换分支：

git checkout feature/b-improve-0606

3.一旦你在目标分支上，你可以使用以下命令恢复储藏的修改：

git stash pop

解决方案 2：

1.将状态回退到更改之前，这样就不需要 commit 了

git checkout .

2.回退之后，就可以切换分支了

git checkout feature/b-improve-0606

2.js获取时间的时间戳

Date类的.getTime()方法可以获取时间戳

当前时间：毫秒数（时间戳）

let timestamp = Date.now();

当前时间：秒数

var timestampInSeconds = Math.floor(Date.now() / 1000); //Math.floor四舍五入
console.log(timestampInSeconds);

获取2010年8月的时间戳：

var date = new Date(2010, 7); // 月份从0开始计数，所以8月对应的是7
var timestamp = date.getTime();
console.log(timestamp);

获取当前月份的时间戳：

var currentDate = new Date();
var currentMonth = currentDate.getMonth(); //当前的月份数
var currentYear = currentDate.getFullYear(); //当前的年数

var date = new Date(currentYear, currentMonth);
var timestamp = date.getTime();
console.log(timestamp);

3.js将时间戳进行格式化

function formatTimestamp(timestamp) {
  var date = new Date(timestamp);
  var year = date.getFullYear();
  var month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份从0开始计数，需要加1并补零
  var day = ("0" + date.getDate()).slice(-2); // 补零
  var hours = ("0" + date.getHours()).slice(-2); // 补零
  var minutes = ("0" + date.getMinutes()).slice(-2); // 补零
  var seconds = ("0" + date.getSeconds()).slice(-2); // 补零

  var formattedDate = year + "-" + month + "-" + day;
  var formattedTime = hours + ":" + minutes + ":" + seconds;

  return formattedDate + " " + formattedTime;
}

// 使用示例
var timestamp = Date.now();
var formattedTimestamp = formatTimestamp(timestamp);
console.log(formattedTimestamp);

注意：var date = new Date(timestamp);输出的格式是Mon Oct 18 2021 14:30:15 GMT+0000 (Coordinated Universal Time)这样的

所以需要进一步进行格式化和拼接等操作，最终出来的格式会是2023-06-06 14:30:15这样子的

如果直接用函数：

new Date(picker).format('yyyy-MM'); //format函数里面直接写格式

4.html2canvas把html转为img

html2canvas 可以把html转为img并生成一个img链接，方法

模板：

主要流程就是，把poster组件传入battalionPoster组件的slot插槽内，将poster组件的html内容转换为图片，生成url传入battalionPoster组件组件然后进行图片的展示！

<van-popup style="width: 100%" v-model="isShowPopUpDialog">
  <battalionPoster
    :posterUrl="poster.posterUrl"
    :isShow="poster.isShow"
    @OnCancelPoster="handleCancelPoster"
  >
    <div id="posterContainer">
      <poster
        :qrCodeUrl="qrCodeUrl"
        :studentBaseInfo="studentBaseInfo"
        :caseInfo="caseInfo"
        :improveScoreData="improveScoreData"
        v-if="poster.isPoster === 1"
      ></poster>
    </div>
  </battalionPoster>
</van-popup>

async lookPoster() {
  Toast.loading({ message: "加载中...", forbidClick: true, duration: 0 });
  this.poster.isPoster = 1;
  this.isShowPopUpDialog = true;
  // 等待生成二维码
  await this.createQRCode();
  setTimeout(() => {
    const dom = document.querySelector("#posterContainer");
    const targetDom = dom.firstChild;
    const config = {
      useCORS: true,
      logging: true,
      width: targetDom.offsetWidth,
      height: targetDom.offsetHeight - 4,
    };
    html2canvas(targetDom, config).then((canvas) => {
      this.poster.isShow = true;
      this.poster.posterUrl = canvas.toDataURL();
      this.poster.isPoster = -1;
      Toast.success("长按保存"); //Toast是vantUI里面的一个组件！用于消息提示的弹窗！
      // gio("track", "onShareBattleReport", { onSharePosters: "ShareLogo" });
    });
  }, 200);
},

battalionPoster组件：

<div>
    <slot></slot>
    <div class="poster-bac" :class="[isFixHeight?'isFixHeight':'']" v-if="isShow"
         @touchstart="handlerTouchstart"
         @touchmove="handlerTouchmove"
         @touchend="handlerTouchend"
          >
        <img class="poster-image" :src="posterUrl" alt="">
    </div>
</div>

5.node版本不匹配导致安装npm i报错

把package.json里面的：

"node-sass": "^4.12.0",
"sass-loader": "^8.0.2",

换成：

"sass": "^1.26.5",
"sass-loader": "^8.0.2",

6.处理链接列表的方法模板

<ul class="modular">
    <li
      class="modular-item"
      v-for="(item, index) in sing.contentData"
      :key="index"
      @click="handleTempPage(item.id)"
    >
      <div class="con">
        <img class="icon" :src="item.img" />
        <span>{{ item.name }}</span>
      </div>
    </li>
</ul>

handleTempPage(index) {
  switch (index) {
    case 0:
      this.$router.push("/expand/orderList");
      break;
    case 1:
      this.$router.push("/expand/agreementList");
      break;
    case 2:
      this.$router.push("/expand/rankingProvinces");
      break;
    case 3:
      this.$router.push("/expand/dealerRanking");
      break;
    case 4:
      this.$router.push("/expand/agentRanking");
      break;
  }
  console.log(index);
},

signingList: [
    {
      title: "签约管理",
      contentData: [
        {
          id: 0,
          img: require("../../../assets/image/expand/agent/agent1.png"),
          name: "订单审核",
        },
        {
          id: 1,
          img: require("../../../assets/image/expand/agent/agent2.png"),
          name: "合同审核",
        },
      ],
    },
    {
      title: "打地基数据",
      contentData: [
        {
          id: 2,
          img: require("../../../assets/image/expand/agent/agent3.png"),
          name: "省份排行",
        },
        {
          id: 3,
          img: require("../../../assets/image/expand/agent/agent4.png"),
          name: "经销商排行",
        },
        {
          id: 4,
          img: require("../../../assets/image/expand/agent/agent4.png"),
          name: "代理商排行",
        },
      ],
    },
],

大多数情况下，这个signingList，即链接的列表是要从后端进行返回的！

7.钉钉小程序的介绍

钉钉小程序是一种在钉钉平台上开发和运行的小程序，它提供了一种快速构建企业级应用的方式。

钉钉小程序具有类似于其他小程序平台的特性，如可视化开发、数据展示、交互能力和应用扩展等。

min-height: calc(100vh - 200px); //calc进行计算

8.VConsole介绍

VConsole是一个轻量级的移动端前端调试工具，它可以在移动设备上显示控制台日志、网络请求、性能数据等信息，方便开发者进行移动端调试和性能优化。

VConsole提供了以下功能：

1. 控制台输出：在移动设备上显示控制台的log信息，包括普通log、警告和错误等。
2. 网络请求监控：显示移动设备上的网络请求信息，包括请求URL、请求方法、请求头、请求体、响应状态等。
3. 设备信息：显示移动设备的操作系统、浏览器信息、屏幕分辨率等。
4. 手势操作：支持手势操作来切换VConsole的显示和隐藏。
5. 自定义插件：支持自定义插件扩展功能，如添加自定义面板、自定义命令等。

9.calc+vw/vh实现响应式的样式

（1）font-size: calc(100vw / 13.66);

font-size: calc(100vw / 13.66); 是一个CSS样式规则，用于设置元素的字体大小（font-size）。这里使用了CSS的calc()函数来计算字体大小的值。

在这个规则中，100vw 表示视口宽度的百分比，即相对于浏览器窗口宽度的百分比。13.66 是一个常数，用于计算字体大小的比例。

该规则的计算公式是将视口宽度分成13.66等分，然后将每个等分作为字体大小的单位。例如，如果视口宽度为1366px，那么字体大小将为100px（1366px / 13.66 = 100px）。

这种方式可以根据视口的宽度动态调整字体大小，以适应不同屏幕大小的设备。在响应式设计中，这种技术常用于创建自适应的字体大小。

（2）min-height: calc(100vh - 200px);

min-height: calc(100vh - 200px); 是一个CSS样式规则，用于设置元素的最小高度（min-height）。这里同样使用了CSS的calc()函数来计算最小高度的值。

在这个规则中，100vh 表示视口高度的百分比，即相对于浏览器窗口高度的百分比。200px 是一个固定值，表示要减去的像素数。

该规则的计算公式是将视口高度减去200像素，作为元素的最小高度。例如，如果视口高度为800px，那么元素的最小高度将为600px（800px - 200px = 600px）。

这种方式可以用于创建具有响应式高度的元素，使其在不同屏幕大小的设备上保持一定的高度，并根据视口高度进行动态调整。

10.rem的含义

rem 是 CSS 中的一个单位，表示相对于根元素（即 <html> 元素）的字体大小的倍数。

在网页中，根元素的默认字体大小通常是 16 像素（px）。因此，如果使用 1rem，它将等于 16 像素。如果使用 2rem，它将等于 32 像素，依此类推。

如果设置了如下

html{

​ font-size: calc(100vw / 13.66);

}

那么当vw为1366px时，font-size为100px，那么此时的1rem=100px

rem和 em 的区别：

"rem" 和 "em" 是用于定义相对字体大小的单位。它们在使用上有一些区别：

1. rem（root em）：相对于根元素（html）的字体大小来计算。通常，根元素的字体大小是浏览器默认的 16 像素（可以通过 CSS 设置修改）。例如，如果根元素的字体大小设置为 16 像素，那么 1rem 就等于 16 像素。如果某个元素的字体大小设置为 2rem，那么它的字体大小将是根元素字体大小的两倍。
2. em（element em）：相对于其父元素的字体大小来计算。如果一个元素的字体大小设置为 2em，那么它的字体大小将是父元素字体大小的两倍。如果嵌套了多个具有不同字体大小的元素，那么 em 单位会逐级相对于父元素进行计算。

主要区别：

• rem 相对于根元素的字体大小进行计算，而 em 相对于父元素的字体大小进行计算。
• rem 可以提供更一致的字体大小，因为它不会受到嵌套元素的影响。
• em 在某些情况下更灵活，可以根据嵌套层级进行动态调整，但也可能导致字体大小的不一致性。

一般情况下，推荐使用 rem 单位来设置字体大小，因为它相对于根元素，更容易实现一致的字体大小控制。而 em 单位则更适合在特定的嵌套场景中使用，以实现相对于父元素的字体大小调整。

11.用h5开发小程序页面

其实不用做什么响应式适配，如果这个代码就是专门给小程序来用的

那么就直接开启手机模式，然后就正常写代码就可以了！

必要时可以设置 height: 100vh;

12.process.env.VUE_APP_ENV介绍

process.env.VUE_APP_ENV 是一个特定于 Vue CLI 的环境变量。它是在构建过程中由 Vue CLI 注入到你的应用程序中的一个变量。

通常情况下，process.env.VUE_APP_ENV 用于指定当前所处的环境，例如开发环境、测试环境或生产环境。你可以根据不同的环境值来执行不同的逻辑或配置不同的参数。

说白了就是用来判断当前所处环境的！

13.对于多个new Vue的js文件的理解

app目录，创建了很多Vue对象！

其实相当于把每个功能模块进行了独立！有自己的router、特定的样式全局文件、按需引入特定的UI组件等！

每一个模块对应了不同的view里面的文件夹，但是components里面的组件是各个模块共用的小组件！

从而根据自己的router，当/不同的功能名字，就可以进入不同的功能板块，有不同的Vue实例对象！

——>这样做就类似于把多个小的Vue项目，合成了一个总的Vue项目，每一个Vue项目在总项目里面作为一个模块

其中一个changeBind.js：

import Vue from 'vue'
import store from '@/store'
import router from '@/router/changeBind' //自己的router
import ChangeBind from '@views/ChangeBind/ChangeBind.vue'

import 'vant/lib/index.less'; //自己的样式
import "../assets/style/animate.min.css"

sessionStorage.removeItem("isReload")

Vue.config.productionTip = false

new Vue({
    router,
    store,
    render: h => h(ChangeBind)
}).$mount('#app')

对于render的理解：

render: h => h(ChangeBind) 是 Vue 实例的渲染函数，用于指定要渲染的组件。

这段代码的作用是将名为 ChangeBind 的组件渲染到 Vue 实例上。h 是一个 createElement 函数，用于创建虚拟 DOM 元素。h(ChangeBind) 表示使用 createElement 创建一个 ChangeBind 组件的虚拟 DOM 元素。

通过指定渲染函数，你告诉 Vue 实例将 ChangeBind 组件作为根组件进行渲染。这样，ChangeBind 组件将成为应用程序的入口组件，并在页面上显示。

如果你直接将 ChangeBind 组件写在 App.vue 文件中，将其作为 App.vue 的子组件，并在 App.vue 中进行渲染，效果是相同的。

但是这里为了动态渲染，多个Vue实例共用一个App.vue文件，所以选用render函数！