<h2 style="box-sizing: border-box; outline: 0px; margin: 24px 0px 8px; padding: 0px; font-family: 'PingFang SC', 'Microsoft YaHei', SimHei, Arial, SimSun; font-size: 20px; color: #4f4f4f; line-height: 30px; font-synthesis-style: auto; overflow-wrap: break-word; font-variant-ligatures: no-common-ligatures; background-color: #ffffff;">配置miniprogram-ci</h2>
<img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/65a908ed63ea621ed9b1c7e7c11489b1.png" alt="" width="428" height="204" />
在微信公众平台-开发-开发管理
下载生成密钥
<img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/78b04f27a7067cfc8b6f457ac9f19531.png" alt="" width="245" height="269" />
将下载的privatekey.key放在根目录中
&nbsp;
1. 安装<span style="background-color: #ffffff; font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-variant-ligatures: no-common-ligatures;">miniprogram-ci
<pre class=""><code class="hljs language-css">npm install miniprogram-ci --D
</code></pre>
&nbsp;
2.在根目录创建ci.js
<pre class=""><code class="hljs language-php">const ci = require('miniprogram-ci');
let { version } = require('./package.json');

const project = new ci.Project({
 appid: 'wxdceb2827bb1af952', 
 type: 'miniProgram',
 projectPath: 'dist/build/mp-weixin', // uniapp打包后的路径
 privateKeyPath: 'privatekey.key', // 微信公众平台密钥，建议放项目根目录
 ignores: ['node_modules/**/*'],
});
/** 上传 */
ci.upload({
 project, // 项目对象
 version, 
 desc: '👊性能优化', // 项目描述
 setting: {
 minifyWXML: false, // 压缩 WXML 代码
 minifyWXSS: false, // 压缩 WXSS 代码
 minifyJS: false, // 压缩 JS 代码
 codeProtect: false, // 对应小程序开发者工具的 "代码保护"
 minify: true, // 压缩所有代码，对应小程序开发者工具的 "压缩代码"
 es6: true, // 对应小程序开发者工具的 "es6 转 es5"
 es7: true, // 对应小程序开发者工具的 "增强编译"
 autoPrefixWXSS: true, // 对应小程序开发者工具的 "样式自动补全"
 },
 onProgressUpdate: () =&gt; {}, // 进度更新监听函数
})
 .then(() =&gt; {
 console.log('上传成功！');
 })
 .catch((error) =&gt; {
 console.log('上传失败，原因：', error);
 process.exit(-1);
 });
</code></pre>
&nbsp;
3&nbsp;<span style="background-color: #ffffff; font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-variant-ligatures: no-common-ligatures;">修改package.json
<span style="background-color: #ffffff; color: rgba(0, 0, 0, 0.75); font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-size: 16px; font-variant-ligatures: no-common-ligatures;">在指令后追加&amp;&amp; node ci.js&nbsp;
<pre class=""><code class="hljs language-json">"build:mp-weixin-pro-upload": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build &amp;&amp; node ci.js"</code></pre>
&nbsp;
<span style="color: rgba(0, 0, 0, 0.75); font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-size: 16px; font-variant-ligatures: no-common-ligatures; background-color: #ffffff;">然后在微信公众平台就能看到拉
<img style="display: block; margin-left: auto; margin-right: auto;" src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/8aba6894fa7232e53d864448b90fdc0f.jpg" alt="" width="816" height="144" />
&nbsp;

miniprogram-ci 实现uniapp 微信小程序自动部署

在页面中设置省略样式，页面中会生效但是 html2canvas生成的图片并未生效
<pre class=""><code class="hljs language-cpp">&lt;div class="plyaer-name ellipsis"&gt;这是球员名称这是球员名称&lt;/div&gt; 
width: 35vw;
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 添加省略号 */
</code></pre>
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/c7ec1313b1610fec049cba9ef1f25fc5.png" alt="" width="987" height="638" />图：生成图片未出现省略号
&nbsp;
解决：
1.创建一个自定义指令判断文本长度可容器长度&nbsp;
<pre class=""><code class="hljs language-javascript">// src/directives/truncateText.js
import Vue from 'vue';

function calculateMaxWidth(value) {
 if (value.endsWith('vw')) {
 return parseFloat(value) * window.innerWidth / 100;
 } else if (value.endsWith('px')) {
 return parseFloat(value);
 }
 return 0; // 默认值，可以根据需要调整
}

function truncateText(element, maxWidth) {
 console.log("🚀 ~ truncateText ~ element:", element)
 console.log("🚀 ~ truncateText ~ maxWidth:", maxWidth)
 const text = element.textContent;
 let truncated = text;
 element.textContent = truncated; 
 
 Vue.nextTick(() =&gt; {
 console.log("🚀 ~ truncateText ~ element.scrollWidth:", element.scrollWidth)
 let attemptCount = 0;
 const maxAttempts = 100; // 设置一个安全退出阈值
 while (element.scrollWidth &gt; maxWidth &amp;&amp; attemptCount &lt; maxAttempts) {
 truncated = truncated.slice(0, -1);
 element.textContent = truncated + '...';
 attemptCount++;
 }
 if (attemptCount &gt;= maxAttempts) {
 console.warn("文本截断操作超过了最大尝试次数，可能存在问题。");
 }
 });
}

export default {
 bind(el, binding) {
 console.log('el', el);
 const maxWidth = calculateMaxWidth(binding.value);
 console.log('maxWidth', maxWidth);
 const handler = () =&gt; truncateText(el, maxWidth);
 Vue.nextTick(handler); 
 el.__vueTruncateTextHandler__ = handler;
 window.addEventListener('resize', handler);
 },
 unbind(el) {
 window.removeEventListener('resize', el.__vueTruncateTextHandler__);
 delete el.__vueTruncateTextHandler__;
 }
};
</code></pre>
2.全局注册自定义指令
<pre class=""><code class="hljs language-javascript">// src/main.js
import truncateText from './directives/truncateText';
Vue.directive('truncate-text', truncateText);</code></pre>
3.在页面中使用 <code>v-truncate-text</code> 指令
<pre class=""><code class="hljs language-xml">&lt;div class="plyaer-name ellipsis" v-truncate-text="'35vw'"&gt;这是球员名称这是球员名称&lt;/div&gt;</code></pre>
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/0a7c37f650313495940e945177713c98.png" alt="" width="1076" height="509" />
图：正常生成省略号的图片。
&nbsp;
11-16 修复 html2canvas 底部白边问题&nbsp;
获取dom 高度-1即可
<pre class=""><code class="language-javascript hljs">export const exportCardAsImage = async (element, fileName = 'card.png') =&gt; {
 console.log('🚀 ~ exportCardAsImage ~ element:', element)
 try {
 const canvas = await html2canvas(element, {
 useCORS: true,
 logging: true,
 backgroudColor: null,
 height: element.scrollHeight - 1, //canvas高, 高度减 1 是为了解决底部出现白线问题
 width: element.scrollWidth, //canvas宽
 })
 const dataURL = canvas.toDataURL('image/png')

 // 将 dataURL 转换为 Blob
 const blob = dataURLtoBlob(dataURL)

 // 上传图片并获取 URL
 const imageUrl = await qiniuUpload(blob)
 return imageUrl
 } catch (error) {
 console.error('上传失败:', error)
 throw error
 }
}</code></pre>
&nbsp;

html2canvas 生成图片遇到的坑 

数智赛事小程序 生产球员pdf报告
&nbsp;
在node中同时多个生成请求会造成无头浏览器崩溃（服务器配置不高的情况下）
<pre class=""><code class="language-javascript hljs"> pdfRenderTaskQuene.addTask(taskId,callback,[url, fileKey, generateType, generateConf, storageConf], taskProcessor);</code></pre>
所以生成前先创建个队列&nbsp;
&nbsp;
<pre class=""><code class="language-javascript hljs">async function taskProcessor(accessUrl, fileKey, generateType, gerateConf, storeConf){
 const filePath = path.join(fileTempDir, fileKey);
 const localFilePath = generateType == "image" ? await justGenerateImg(accessUrl, filePath, gerateConf) 
 : await justGeneratePdf(accessUrl, filePath, gerateConf);
 const url = await justUploadFile(localFilePath, fileKey, storeConf);

 return url;
} </code></pre>
将要调用的方法添加到队列中
&nbsp;
&nbsp;
<pre class=""><code class="language-javascript hljs"> addTask(id,callback,taskArg,processor,forceAndPriority=false) {
 const newTask = {
 id: id,
 callbacks: callback ? [callback] : null,
 taskArg: taskArg,
 processor: processor ? processor : this._processor
 };
 console.info("开始添加任务:", id);
 // 是否该任务是否存在于未消费队列
 let taskInQueue = this._findTask(id,this._tasksQueue);
 // 是否存在于正在执行的队列中
 let tasktInCurrent = false;
 if(!taskInQueue) tasktInCurrent = this._findTask(id,this._currentTask); 
 // 如果该任务不存在
 if(!taskInQueue &amp;&amp; !tasktInCurrent){
 this._tasksQueue.push(newTask);
 }else if(forceAndPriority){
 if(tasktInCurrent) this._delTask(tasktInCurrent,this._currentTask);
 if(taskInQueue) this._delTask(taskInQueue,this._tasksQueue);
 // 如果当前存在该任务，则在原有的任务项的回调列表里增加新的回调
 // existentTask.callbacks.push(callback);
 }
 // 纪录运行器的繁忙状态
 const isBusy = this.ifBusy();
 // 若不繁忙则立即执行新添加的任务
 // 如果存在优先级则立即执行
 if(forceAndPriority || (!isBusy &amp;&amp; !tasktInCurrent &amp;&amp; !taskInQueue)){
 this._runTask(newTask,forceAndPriority);
 }
 console.info(`当前执行队列任务数量:${this._tasksQueue.length}`);
 return !isBusy;
 }</code></pre>
添加任务的方法。若任务不在队列中，添加到任务队列。若&nbsp;<code>forceAndPriority</code>&nbsp;为真，优先执行。根据繁忙状态决定是否立即执行任务。
&nbsp;
&nbsp;
运行任务
<pre class=""><code class="language-javascript hljs">_runTask(task, priority = false) {
 console.info(`正在执行任务: ${task.id}`);
 const that = this;
 keepRunningTask = keepRunningTask.bind(this);
 !priority ? this._currentTask.push(task) : this._currentTask.unshift(task);
 this._delTask(task, this._tasksQueue);
 const taskRun = task.processor.apply(this, task.taskArg);
 if (taskRun.then) {
 return taskRun.then(result =&gt; {
 this._delTask(task, this._currentTask);
 invokeCallbacks(null, result);
 keepRunningTask();
 }).catch(err =&gt; {
 this._delTask(task, this._currentTask);
 invokeCallbacks(err ? err : new Error());
 keepRunningTask();
 });
 }
 invokeCallbacks(taskRun);
 keepRunningTask();
 this._delTask(task, this._currentTask);
 function keepRunningTask() {
 if (this._tasksQueue.length) {
 this._runTask(this._tasksQueue[0]);
 }
 }
 function invokeCallbacks(error, arg) {
 console.log(`task ${task.id} 已完成,error ${error}，还剩下 ${that._tasksQueue.length} 任务`);
 Array.isArray(task.callbacks) &amp;&amp; task.callbacks.forEach(callback =&gt; {
 callback(error, arg);
 });
 }
}</code></pre>
运行任务的方法。根据优先级决定任务插入位置并从队列中删除。若任务返回 <code>Promise</code>，在 <code>then</code> 中执行回调并继续运行下一个任务。否则立即执行回调。
&nbsp;
<pre class=""><code class="language-javascript hljs">async renderPdf(pageAccessAddress,localFilePath,config={}){
 try{
 console.info('浏览器正在生成pdf...,访问地址',pageAccessAddress, config);
 const borwser = await this.launchBrowser();
 const page = await borwser.newPage();
 console.info('pupteer: 新增页面完成');
 const configClone = {...config};
 page.on('error',function(error){
 // todo
 console.error(`浏览器渲染PDF发生错误：${pageAccessAddress}`,error);
 });
 const response = await page.goto(pageAccessAddress,{ waitUntil: configClone.waitUntil || 'networkidle0',timeout: typeof configClone.timeout !== "undefined" ? configClone.timeout : 1000 * 60 * 2 });
 if(!response.ok() &amp;&amp; response.status() !== 304) throw new Error(`页面请求失败，status: ${response.status()}`);
 console.info('pupteer: 页面加载完成');
 ('waitUntil' in configClone) &amp;&amp; (delete configClone.waitUntil);
 ('timeout' in configClone) &amp;&amp; (delete configClone.timeout);
 if(configClone.height == "auto"){
 const pageHeight = await page.evaluate(() =&gt; { return document.documentElement.scrollHeight; });
 configClone.height = pageHeight || undefined;
 }
 await page.pdf({
 path: localFilePath,
 headerTemplate: this.genereteHeaderTemplate(),
 footerTemplate: this.genereteFooterTemplate(),
 ...configClone
 });
 console.info(`pdf生成成功，本地存储地址：${localFilePath}`);
 await page.close();
 console.info('pupteer: 页面成功关闭');
 return localFilePath;
 }catch(error){
 console.error('浏览器渲染PDF失败！',pageAccessAddress,error);
 throw new Error(error);
 }
 }</code></pre>
调用puppeteer api进行生成 ，同理生成图片则调用 puppeteer的screenshot api。
&nbsp;
&nbsp;
<pre class=""><code class="language-css hljs">.page-break {
 page-break-after: always;
}</code></pre>
对于生成的pdf ,前端加入这个css进入分页。

puppeteer 生成pdf

在编写数智赛事小程序赛程时，上拉加载之前日期的数据，使用<span style="color: #0d0d0d; font-family: S&ouml;hne, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 16px; white-space-collapse: preserve; background-color: #ffffff;">索引作为 <code style="border: 0px solid #e3e3e3; box-sizing: border-box; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-shadow: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-shadow-colored: 0 0 transparent; font-feature-settings: normal; font-size: 0.875em; font-variation-settings: normal; color: #0d0d0d; font-weight: 600; white-space-collapse: preserve; background-color: #ffffff; font-family: 'S&ouml;hne Mono', Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important;">key</code><span style="color: #0d0d0d; font-family: S&ouml;hne, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 16px; white-space-collapse: preserve; background-color: #ffffff;"> 的时候在<span style="background-color: #ffffff; color: #0d0d0d; font-family: S&ouml;hne, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 16px; white-space-collapse: preserve;">数组前添加数据。
&nbsp;
<h3 style="border: 0px solid #e3e3e3; box-sizing: border-box; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-shadow: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-shadow-colored: 0 0 transparent; font-size: 1.25em; margin: 1rem 0px 0.5rem; line-height: 1.6; color: #0d0d0d; font-family: S&ouml;hne, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; white-space-collapse: preserve; background-color: #ffffff;">使用索引作为Key</h3>
<span style="color: #0d0d0d; font-family: S&ouml;hne, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 16px; white-space-collapse: preserve; background-color: #ffffff;">在数组的开头插入一个新元素，原本的所有元素索引都会增加（0 变成 1，1 变成 2，依此类推）。Vue 会根据 <code style="border: 0px solid #e3e3e3; box-sizing: border-box; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-shadow: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-shadow-colored: 0 0 transparent; font-feature-settings: normal; font-size: 0.875em; font-variation-settings: normal; color: #0d0d0d; font-weight: 600; white-space-collapse: preserve; background-color: #ffffff; font-family: 'S&ouml;hne Mono', Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important;">key</code><span style="color: #0d0d0d; font-family: S&ouml;hne, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 16px; white-space-collapse: preserve; background-color: #ffffff;"> 的变化来决定如何更新 DOM。因为 <code style="border: 0px solid #e3e3e3; box-sizing: border-box; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-shadow: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-shadow-colored: 0 0 transparent; font-feature-settings: normal; font-size: 0.875em; font-variation-settings: normal; color: #0d0d0d; font-weight: 600; white-space-collapse: preserve; background-color: #ffffff; font-family: 'S&ouml;hne Mono', Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important;">key</code><span style="color: #0d0d0d; font-family: S&ouml;hne, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 16px; white-space-collapse: preserve; background-color: #ffffff;"> （索引）发生了变化，Vue 认为旧的元素对应的是新的位置，从而导致它可能只是更新了元素的位置，而不是内容；并且会导致console能打印到参数但视图没有刷新。
<span style="color: #0d0d0d; font-family: S&ouml;hne, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 16px; white-space-collapse: preserve; background-color: #ffffff;">改为使用唯一的 <code style="border: 0px solid #e3e3e3; box-sizing: border-box; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-shadow: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-shadow-colored: 0 0 transparent; font-feature-settings: normal; font-size: 0.875em; font-variation-settings: normal; font-weight: 600; font-family: 'S&ouml;hne Mono', Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important;">id</code> 作为 <code style="border: 0px solid #e3e3e3; box-sizing: border-box; --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(69,89,164,.5); --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-shadow: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-shadow-colored: 0 0 transparent; font-feature-settings: normal; font-size: 0.875em; font-variation-settings: normal; font-weight: 600; font-family: 'S&ouml;hne Mono', Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important;">key</code>，Vue 可以避免不必要的元素重排和重绘，提高性能。
<img style="float: left;" src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/586bb9f516836cf6cd16329c371b6e0d.png" alt="" width="216" height="471" />
&nbsp;
&nbsp;
&nbsp;
&nbsp;

:key = "index" 遇到的坑

mode设置为widthfix 宽度不变 高度自动变换
在开发中遇到图片首次加载出现瞬间拉伸后恢复
在全局样式中加入
<pre class=""><code class="language-css hljs">image{
 width: 100%;
 height: auto;
}
img{
 width: 100%;
 height: auto;
}</code></pre>
即可解决

小程序图片  mode="widthFix"时 图片首次加载显示瞬间竖向拉伸变形闪烁

22号将数据开发0.0.0.0外网访问 <span style="font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-size: 16px; font-variant-ligatures: no-common-ligatures;">用的默认配置（端口是默认端口，也没设置密码）<span style="font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-size: 16px; font-variant-ligatures: no-common-ligatures;">完全就是一台裸奔在云上的数据库 😭，第二天使用时发现就剩一张 <span style="font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-size: 16px; font-variant-ligatures: no-common-ligatures;">READ_ME_TO_RECOVER_YOUR_DATA表
<span style="background-color: #ffffff; color: #4d4d4d; font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-size: 16px; font-variant-ligatures: no-common-ligatures;"><img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/4f246c980fa6e34c62c6a43008c237db.jpg" alt="" width="631" height="506" />
<span style="background-color: #ffffff; color: #f1c40f; font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-size: 16px; font-variant-ligatures: no-common-ligatures;">只能回复数据到6月份
<span style="background-color: #ffffff; color: #4d4d4d; font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-size: 16px; font-variant-ligatures: no-common-ligatures;"><img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/bfdbad143a941e38065e3a865483ca76.jpg" alt="" width="662" height="513" />
<span style="background-color: #ffffff; font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-size: 16px; font-variant-ligatures: no-common-ligatures;">解决方法
1.链接mongo 
2.创建
<pre class=""><code class="hljs language-php">db.createUser({user: "root",pwd: "password", roles: [ { role: "root", db: "admin" } ]})</code></pre>
3.<span style="background-color: #ffffff; color: #4d4d4d; font-family: -apple-system, 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif; font-size: 16px; font-variant-ligatures: no-common-ligatures;">修改mongodb配置文件中的authorization 为 enabled
<img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/7cc88b056d9749b3a0f4fb83475ba3cd.jpg" alt="" width="504" height="339" />
更变后
<pre class=""><code class="language-ruby hljs">连接数据库的路径: mongodb://用户名:密码@你的服务器ip:27017/你的数据库?authSource=admin
?authSource=admin : 验证数据库, 指定从那个数据库中验证用户, 因为我们是在admin表创建的所以要=admin</code></pre>
&nbsp;
方案二&nbsp;
开启服务器快照
<img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/471544a06e6399afa27dd1b5d5a1063b.jpg" alt="" width="990" height="617" />

READ_ME_TO_RECOVER_YOUR_DATA，数据库被恶意删除

<pre class=""><code class="language-javascript hljs">router.beforeEach((to, from, next) =&gt; {
 NProgress.start()
 if (getToken()) {
 to.meta.title &amp;&amp; store.dispatch('settings/setTitle', to.meta.title)
 /* has token*/
 if (to.path === '/login') {
 next({ path: '/' })
 NProgress.done()
 } else {
 if (store.getters.roles.length === 0) {
 isRelogin.show = true
 // 判断当前用户是否已拉取完user_info信息
 store.dispatch('GetInfo').then(() =&gt; {
 isRelogin.show = false
 store.dispatch('GenerateRoutes').then(accessRoutes =&gt; {
 // 根据roles权限生成可访问的路由表
 router.addRoutes(accessRoutes) // 动态添加可访问路由表
 next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
 })
 }).catch(err =&gt; {
 store.dispatch('LogOut').then(() =&gt; {
 Message.error(err)
 next({ path: '/' })
 })
 })
 } else {
 next()
 }
 }
 } else {
 // 没有token
 if (whiteList.indexOf(to.path) !== -1) {
 // 在免登录白名单，直接进入
 next()
 } else {
 next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
 NProgress.done()
 }
 }
})</code></pre>
在前置路由守卫中会调用GenerateRoutes方法
<pre class=""><code class="language-javascript hljs">// 生成路由
 GenerateRoutes({ commit }) {
 return new Promise(resolve =&gt; {
 // 向后端请求路由数据
 getRouters().then(res =&gt; {
 const sdata = JSON.parse(JSON.stringify(res.data))
 const rdata = JSON.parse(JSON.stringify(res.data))
 const sidebarRoutes = filterAsyncRouter(sdata)
 const rewriteRoutes = filterAsyncRouter(rdata, false, true)
 const asyncRoutes = filterDynamicRoutes(dynamicRoutes);
 rewriteRoutes.push({ path: '*', redirect: '/404', hidden: true })
 router.addRoutes(asyncRoutes);
 commit('SET_ROUTES', rewriteRoutes)
 commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
 commit('SET_DEFAULT_ROUTES', sidebarRoutes)
 commit('SET_TOPBAR_ROUTES', sidebarRoutes)
 resolve(rewriteRoutes)
 })
 })
 }</code></pre>
此方法会请求接口，返回权限数据拼接处理后调用router.addRoutes（）将页面添加到路由中。
&nbsp;commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))&nbsp;加会将常量路由（不需要权限）和动态获取的权限路由拼接起来保存，供侧边栏遍历渲染菜单。
&nbsp;
<img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/313bf4dfe9aa5ec9bd39eee6c109433ab" alt="" />
现在进入后端的getRougters方法：
<pre class=""><code class="language-java hljs">/**
 * 获取路由信息
 * 
 * @return 路由信息
 */
 @GetMapping("getRouters")
 public AjaxResult getRouters()
 {
 Long userId = SecurityUtils.getUserId();
 List&lt;SysMenu&gt; menus = menuService.selectMenuTreeByUserId(userId);
 return AjaxResult.success(menuService.buildMenus(menus));
 }</code></pre>
上来先拿到userId，通过id获取菜单
<pre class=""><code class="language-java hljs">@Override
 public List&lt;SysMenu&gt; selectMenuTreeByUserId(Long userId)
 {
 List&lt;SysMenu&gt; menus = null;
 if (SecurityUtils.isAdmin(userId))
 {
 menus = menuMapper.selectMenuTreeAll();
 }
 else
 {
 menus = menuMapper.selectMenuTreeByUserId(userId);
 }
 return getChildPerms(menus, 0);
 }</code></pre>
同样超级管理员拿到写死的最高权限
<pre class=""><code class="language-csharp hljs">&lt;select id="selectMenuTreeByUserId" parameterType="Long" resultMap="SysMenuResult"&gt;
		select distinct m.menu_id, m.parent_id, m.menu_name, m.path, m.component, m.`query`, m.visible, m.status, ifnull(m.perms,'') as perms, m.is_frame, m.is_cache, m.menu_type, m.icon, m.order_num, m.create_time
		from sys_menu m
			 left join sys_role_menu rm on m.menu_id = rm.menu_id
			 left join sys_user_role ur on rm.role_id = ur.role_id
			 left join sys_role ro on ur.role_id = ro.role_id
			 left join sys_user u on ur.user_id = u.user_id
		where u.user_id = #{userId} and m.menu_type in ('M', 'C') and m.status = 0 AND ro.status = 0
		order by m.parent_id, m.order_num
&lt;/select&gt;</code></pre>
通过以上sql语句拿到数据，在表设计中<span style="background-color: #ffffff; color: rgba(0, 0, 0, 0.9); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; font-size: 16px; letter-spacing: 0.544px; text-align: justify;">M表示目录，C表示菜单。
&nbsp;
<span style="background-color: #ffffff; color: #96a0f7; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; font-size: 18px; letter-spacing: 0.544px; text-align: justify;">2、按钮权限
<span style="background-color: #ffffff; color: #96a0f7; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; font-size: 18px; letter-spacing: 0.544px; text-align: justify;"><img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/c5c041bb1eda90183c792c807808c557b" alt="" />
也就是所需要system:dept:add当前按钮才会显示
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
<span style="color: #96a0f7; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; font-size: 18px; letter-spacing: 0.544px; text-align: justify; background-color: #ffffff;">2.1、v-hasPermi
&nbsp;
注册全局自定义指令
<pre class=""><code class="hljs language-bash">Vue.directive('hasPermi', hasPermi)</code></pre>
<pre class=""><code class="hljs language-javascript">import store from '@/store'

export default {
 inserted(el, binding, vnode) {
 const { value } = binding
 const all_permission = "*:*:*";
 const permissions = store.getters &amp;&amp; store.getters.permissions

 if (value &amp;&amp; value instanceof Array &amp;&amp; value.length &gt; 0) {
 const permissionFlag = value

 const hasPermissions = permissions.some(permission =&gt; {
 return all_permission === permission || permissionFlag.includes(permission)
 })

 if (!hasPermissions) {
 el.parentNode &amp;&amp; el.parentNode.removeChild(el)
 }
 } else {
 throw new Error(`请设置操作权限标签值`)
 }
 }
}
</code></pre>
<img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/6cdaff1c63f424af12951d9f2e48a8f7b" alt="" width="715" height="408" />
通过el拿到当前dom节点
value为传过来的权限"system:dept:add",
vuex中拿到之前存的所有权限
<pre class=""><code class="language-scss hljs">if (!hasPermissions) {
 el.parentNode &amp;&amp; el.parentNode.removeChild(el)
}</code></pre>
对比判读如果没有当前权限就直接移除当前dom
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;

品——若依RuoYi-Vue前后端权限控制2（页面 按钮权限）

1、何时获取权限
&nbsp;
<pre class=""><code class="language-java hljs">/**
 * 用户验证处理
 *
 * @author ruoyi
 */
@Service
public class UserDetailsServiceImpl implements UserDetailsService
{
 private static final Logger log = LoggerFactory.getLogger(UserDetailsServiceImpl.class);

 @Autowired
 private ISysUserService userService;
 
 @Autowired
 private SysPasswordService passwordService;

 @Autowired
 private SysPermissionService permissionService;

 @Override
 public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException
 {
 SysUser user = userService.selectUserByUserName(username);
 if (StringUtils.isNull(user))
 {
 log.info("登录用户：{} 不存在.", username);
 throw new ServiceException("登录用户：" + username + " 不存在");
 }
 else if (UserStatus.DELETED.getCode().equals(user.getDelFlag()))
 {
 log.info("登录用户：{} 已被删除.", username);
 throw new ServiceException("对不起，您的账号：" + username + " 已被删除");
 }
 else if (UserStatus.DISABLE.getCode().equals(user.getStatus()))
 {
 log.info("登录用户：{} 已被停用.", username);
 throw new ServiceException("对不起，您的账号：" + username + " 已停用");
 }

 passwordService.validate(user);

 return createLoginUser(user);
 }

 public UserDetails createLoginUser(SysUser user)
 {
 return new LoginUser(user.getUserId(), user.getDeptId(), user, permissionService.getMenuPermission(user));
 }
}</code></pre>
<span style="color: #96a0f7; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; font-size: 16px; letter-spacing: 0.544px; text-align: justify; background-color: #ffffff;">在实现Spring Security的UserDetailsService时就已经开始获取权限了
<img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/6e11ec3bd4ad868d30463cd2f787d920b" alt="" width="664" height="205" />
Spring security推荐去三更大佬的讲解<a href="https://www.bilibili.com/video/BV1mm4y1X7Hc/">https://www.bilibili.com/video/BV1mm4y1X7Hc/</a>
&nbsp;
<span style="color: #96a0f7; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; font-size: 16px; letter-spacing: 0.544px; text-align: justify; background-color: #ffffff;">permissionService.getMenuPermission(user)则是获取当期用户的权限进去转转看：
<img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/3a62bfccc122308790f4f0b5032bf977b" alt="" width="593" height="519" />
<span style="background-color: #ffffff; color: rgba(0, 0, 0, 0.9); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; font-size: 16px; letter-spacing: 0.544px; text-align: justify;">从上面的可以看的出来<span style="background-color: #ffffff; color: rgba(0, 0, 0, 0.9); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; font-size: 16px; letter-spacing: 0.544px; text-align: justify;">超级管理员就给权限字符串为&ldquo;*:*:*&rdquo;，也就是说id为1的用户是写死权限非常牛逼 。
<pre class=""><code class="language-java hljs">public static boolean isAdmin(Long userId)
 {
 return userId != null &amp;&amp; 1L == userId;
 }</code></pre>
如果不是超级管理员这执行menuService.selectMenuPermsByUserId（user.getUserId()）
<pre class=""><code class="language-java hljs">/**
 * 根据用户ID查询权限
 * 
 * @param userId 用户ID
 * @return 权限列表
 */
 @Override
 public Set&lt;String&gt; selectMenuPermsByUserId(Long userId)
 {
 List&lt;String&gt; perms = menuMapper.selectMenuPermsByUserId(userId);
 Set&lt;String&gt; permsSet = new HashSet&lt;&gt;();
 for (String perm : perms)
 {
 if (StringUtils.isNotEmpty(perm))
 {
 permsSet.addAll(Arrays.asList(perm.trim().split(",")));
 }
 }
 return permsSet;
 }</code></pre>
<img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/b0ad1cb92bfee0f1b96be841de4884dbb" alt="" width="705" height="179" />
去mapper层执行selectMenuPermsByUserId，也就是拿着用户id去数据库查询对于权限。
<img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/e6ea43c8e0169611f350eb958edd31ffb" alt="" width="595" height="300" />
&nbsp;
获取完后把权限数据存在<span style="background-color: #ffffff; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; font-size: 16px; letter-spacing: 0.544px; text-align: justify;">LoginUser类的premissions中，并把<span style="background-color: #ffffff; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; font-size: 16px; letter-spacing: 0.544px;">LoginUser的实例对象存入redis中。
<img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/4084db95946236d392ff846d44f10193b" alt="" width="499" height="112" />
&nbsp;
2、使用
<img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/4d23c4d3bf7b87402e443af9529cf43db" alt="" />
当调用这个接口时，就需要用户拥有system:dept:list权限
&nbsp;
<img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/d3c216e112baf9a6f7d738ab292abb37b" alt="" width="270" height="123" />
<span style="font-size: 16px; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; letter-spacing: 0.544px; text-align: justify; background-color: #ffffff;">@ss就是，<span style="font-size: 16px; background-color: #ffffff; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; letter-spacing: 0.544px; text-align: justify;">SpEL表达式<span style="font-size: 16px; background-color: #ffffff; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; letter-spacing: 0.544px; text-align: justify;">通过&ldquo;@&rdquo;来引用bean
&nbsp;
<pre class=""><code class="hljs language-typescript">/**
 * 验证用户是否具备某权限
 * 
 * @param permission 权限字符串
 * @return 用户是否具备某权限
 */
 public boolean hasPermi(String permission)
 {
 if (StringUtils.isEmpty(permission))
 {
 return false;
 }
 LoginUser loginUser = SecurityUtils.getLoginUser();
 if (StringUtils.isNull(loginUser) || CollectionUtils.isEmpty(loginUser.getPermissions()))
 {
 return false;
 }
 PermissionContextHolder.setContext(permission);
 return hasPermissions(loginUser.getPermissions(), permission);
 }</code></pre>
loginUser.getPermissions()拿到之前存在<span style="background-color: #ffffff; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', Arial, sans-serif; font-size: 16px; letter-spacing: 0.544px; text-align: justify;">LoginUser类的premissions，与传进来的参数对比是否拥有这个字段。
&nbsp;
&nbsp;
&nbsp;

品——若依RuoYi-Vue前后端权限控制1

前段时间微软版权问题,公司台式电脑从盗版windows转为Deepin(linux)系统，笔记本win正版家庭版系统可以正常继续使用。
在某个业务上，前端保存当前时间传给后端，测试妹妹是window系统发现时间不一致的问题。
<img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/9f3dc66376df092af991528863593b28.png" alt="" width="787" height="463" />
linux中打印的时间默认是没有+8
<img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/6540e1bea1b536f0803658a91c45d02a.png" alt="" width="813" height="368" />
&nbsp;
Date().getTimezoneOffset()
可以通过 Date().getTimezoneOffset() 获取时差，在linux上取值是0，在windows上取值是-480
<pre class=""><code class="language-javascript hljs">const now = new Date();
let offset = new Date().getTimezoneOffset(); // 返回协调世界时（UTC）相对于当前时区的时间差值，单位为分钟。
let diffTime = offset * 60 * 1000 + 8 * 60 * 60 * 1000;
let nowDate = new Date(now.getTime() + diffTime);
console.log("东8区时间：" + nowDate);</code></pre>
&nbsp;
&nbsp;
在掘金当中也存在当前问题 
发文时间是上午10点，显示是时间为上午2点。
<img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/92d49c1c7ed770f8e12e1384261f26f0.png" alt="" width="240" height="75" />
&nbsp;

前段时间微软版权问题,公司台式电脑从盗版window转为Deepin(linux)系统，笔记本win正版家庭版系统可以正常继续使用。在某个业务上，前端保存当前时间传给后端，测试妹妹是window系统发

前端东八区时差，业务踩坑，掘金也存在此问题

业务中需要转换为固定位数,使用toFiexd踩坑。
<pre class=""><code class="language-javascript hljs">1.585.toFixed(2) // 1.58 </code></pre>
银行家舍入法
保留位数的后一位如果是5，而且5后面不再有数，要根据应看尾数&ldquo;5&rdquo;的前一位决定是舍去还是进入: 如果是奇数则进入，如果是偶数则舍去。例如5.215保留两位小数为5.22； 5.225保留两位小数为5.22。&nbsp; &nbsp; &mdash;&mdash;维基百科
<pre class=""><code class="language-javascript hljs">5.215.toFixed(2) // 5.21 
1.215.toFixed(2) // 1.22 不符合银行家舍入</code></pre>
可以说toFixed不是银行家舍入法！
Math.round
<span style="box-sizing: border-box; font-weight: var(--font-body-strong-weight); letter-spacing: 0.02rem; font-family: Inter, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 16px; background-color: #ffffff;"><code style="box-sizing: border-box; border-radius: var(--elem-radius); font-family: var(--font-code); font-size: var(--type-smaller-font-size); background: var(--code-background-inline); padding: 0.125rem 0.25rem; width: fit-content;">Math.round()</code>&nbsp;函数返回一个数字四舍五入后最接近的整数。
<pre class=""><code class="language-javascript hljs">function numFixed(number, length) {
 return Math.round(Math.pow(10, length) * number) / Math.pow(10, length);
}
console.log(numFixed(5.215,2)) //5.22
// 看起来没问题 我换个数
console.log(numFixed(321405.595, 2)); // 321405.59
</code></pre>
由于二进制存储对小数的精度丢失
<img src="http://hongqi1.oss-cn-zhangjiakou.aliyuncs.com/3c7af50886d7d8ce96bced99b79aa194.png" alt="" width="170" height="39" />
创建prototype.js 文件对Number.prototype.toFixed进行重写
<pre class=""><code class="language-javascript hljs">// 转换为字符串 整数相除
function accDiv(arg1, arg2) {
 let t1 = 0
 let t2 = 0
 try {
 t1 = arg1.toString().split('.')[1].length
 } catch (e) {}
 try {
 t2 = arg2.toString().split('.')[1].length
 } catch (e) {}
 const r1 = Number(arg1.toString().replace('.', ''))
 const r2 = Number(arg2.toString().replace('.', ''))
 return (r1 / r2) * Math.pow(10, t2 - t1)
}
// 转换为字符串 整数相乘
function accMul(arg1, arg2) {
 let m = 0
 const s1 = arg1.toString()
 const s2 = arg2.toString()
 try {
 m += s1.split('.')[1].length
 } catch (e) {}
 try {
 m += s2.split('.')[1].length
 } catch (e) {}
 return (
 (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) /
 Math.pow(10, m)
 )
}
/* eslint-disable no-extend-native */ // 规避eslint不可修改原型报错
Number.prototype.originalToFixed = Number.prototype.toFixed // 保留原方法
Number.prototype.toFixed = function(length) {
 let decLength
 const num = Number(this)
 const pow = Math.pow(10, length) // 保留缩进位数
 const mul = accMul(pow, num) // 放大
 let div = accDiv(Math.round(mul), pow) // 使用Math.round对一位小数进行进准的四舍五入，后缩小
 try {
 decLength = div.toString().split('.')[1].length
 } catch (e) {}
 for (let i = 0; i &lt; length - decLength; i++) {
 div = div.toString() + '0' // 保留指定小数位，后面是0的话补0
 }
 return div
}
</code></pre>