25. 企业微信，要将页面分享到一个非主应用的域名下，如何配置？
参考下面的方法：
24. Jenkins报如下错误，是什么原因？
我不在场，测试同事帮我发版，告诉我发版时构建失败，登陆Jenkins一看，果然有报错。一看，原来是在配置仓库地址的地方填写了分支名称。汗颜
23.使用location.href跳转的几个细节？
使用location.href跳转时，假如你的写法是这样的
location.href=`${location.origin}${pageRouter}`
注意location.origin后面没有/,如果有基础路径，那么要手动加上基础路径
location.href=`${location.origin}${basePath}${pageRouter}`
如果有查询参数，要手动加上查询参数,通过location.search获取的查询参数第一个字符是?，不需再手动添加。
location.href=`${location.origin}${basePath}${pageRouter}${location.search}`
获取页面路径的语法是location.pathname而非location.path.
22. 要展示一段文字，要p,div还是pre标签？
一般情况下，选择p标签语义化最好，但如果一段文字中有个别地方需要设置特殊样式，用p标签可能就不太合适了，这个时候应该用div标签比较合适。如果文字当中有换行，推荐使用pre标签，能保持换行效果。
21. 页面滚动到顶部的设置方法
方法一 注意不一定是对document.documentElement或document.body元素进行操作，而是要对需要滚动的容器元素进行操作
document.querySelector('xxx').scrollTo({ left: 0, top: 0, behavior: 'smooth' })
方法二
这里的sTop - sTop / 8是模拟方法一中的smooth效果，因为`behavior: 'smooth在Safair上支持性不是很好。
const scrollToTop = () => {
let sTop = document.documentElement.scrollTop || document.body.scrollTop
if (sTop > 0) {
window.requestAnimationFrame(scrollToTop)
window.scrollTo(0, sTop - sTop / 8)
}
}
20.发现微信JS_SDK的接口，PC端和移动端的返回不一样,导致判断逻辑出错。
这是移动端的返回，可以看到有个err_msg字段
{
err_msg: "chooseImage:ok",
localIds: ["img:///storage/emulated/0/Android/data/com.tencent.wework/files/tempimagecache/1688856099406250/929ff1d38f43ad9239cad184c334d1ce.jpg"]
}
这是PC端的返回，可以看到缺少err_msg字段，如果在PC端根据err_msg判断一些状态，就会造成逻辑错误。
19.yarn.lock文件报错error An unexpected error occurred: "Invalid value type 6854:0 in D:\\xxx\\yarn.lock"如何解决？
一般出现这个错误，是手动修改了yarn.lock文件，并且出现语法错误。比如说如下片段，删除第一行最后的冒号，就会引起上述错误。
tough-cookie@4.1.3, tough-cookie@^4.0.0, tough-cookie@~2.5.0:
version "4.1.3"
resolved "https://registry.npmmirror.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==
dependencies:
psl "^1.1.33"
punycode "^2.1.1"
universalify "^0.2.0"
url-parse "^1.5.3"
18.如何在微信小程序中唤起企微聊天窗口？
最近业务中要实现一个在微信小程序中，唤起企微客服的功能。试了一下wx.openUrl，发现只在PC端可以使用。最后用wx.openCustomerServiceChat才实现这个功能。在获取客服链接时，走了一些弯路，刚开始看文档以为是要请求后端接口获取客户链接。
后面发现，原来是在企微管理后台配置 配置客服账号，获取客服链接。
wx.openCustomerServiceChat({
extInfo: {
url: 'https://work.weixin.qq.com/kf/kfc1e63468a12ff78d5"
},
corpId: 'wx6c4f6654f1a4cc9f', //企业微信ID
success(res){
}
})
另外一个参数corpId也是在企微管理后台获得的，要在微信小程序管理后台进行关联。
17.微信公众平台，公众号功能设置，存在三种不同的域名配置，业务域名+JS接口安全域名+网页授权域名，这三种域名的区别是?
微信公众号开发中，业务域名、JS接口安全域名和网页授权域名各有不同的作用和服务场景，它们之间的关系在于共同保障微信内网页应用的安全性和功能性：
-
业务域名（Business Domain） ：
业务域名是指在微信内置浏览器中打开的网页所允许的来源域名，用于解决用户在微信内访问网页时可能触发的安全警告提示。当用户点击链接或者在微信内置浏览器中输入URL时，如果这个URL对应的域名不在公众号设置的业务域名列表内，微信可能会显示安全提示，影响用户体验。配置业务域名是为了确保用户能够顺利且无干扰地访问经过微信认可的网站。
-
JS接口安全域名（JS API Security Domain） ：
JS接口安全域名主要用于微信JS-SDK的调用。当公众号开发人员想要使用微信提供的丰富JS接口（如自定义分享、获取用户信息、支付、地理位置等）时，需要先在公众号后台设置JS接口安全域名。只有在设置了的域名下的网页才能合法调用微信JS-SDK，并实现相应的功能。
-
网页授权域名（OAuth Authorization Domain） ：
网页授权域名是与微信OAuth2.0授权机制相关的域名设置。当需要进行网页授权获取用户的微信公开信息或更详细的用户授权信息时，用户的重定向地址必须落在公众号设置的网页授权域名范围内。如果不在此范围内，用户将无法完成授权操作，网页也无法获得用户的微信信息。
总结来说，这三类域名的设置共同保证了微信公众号内H5网页的功能完整性与安全性：
- 业务域名关注的是微信内网页访问体验；
- JS接口安全域名关注的是微信JS-SDK接口调用的合法性；
- 网页授权域名关注的是用户数据授权的安全性和有效性。
16. 今天遇到控制台突然不打印关键错误日志，排查错误排查了好久
如下图所示，构建一个项目，抛出错误信息，只有红框下面的部分，没有上面关键一行错误提示。检查了好久，都定位不出问题。后来切换代码到没有添加功能的主干分支，控制台才抛出关键错误信息。碰到异常情况，没有思路的时候，就找一个没修改前的分支，对比一下，可能就会让问题很快浮现。
15. 分享使用AI工具遇到的一个现象
感觉AI智能问答工具，不太自信。你问一个问题，它的回答是正确的。受其它外部因素的干扰，效果出不来。你然后给AI助手反馈，AI助手会习惯性的认为自己的回答有问题，又会给出新的建议。而自己试了一下还不行，最后通过层层排查，发现AI工具第一次的回答就是正确的，自己的错误反馈把AI带偏了。AI有时候要坚定一些，告诉对方，可能是你没有完全采用我给出的方案，你要自己再检查一下。
14. Vite让PC端浏览器支持CSS Grid的配置方法?
CSS Grid 布局在现代浏览器（如 Chrome、Firefox、Safari、Edge）中得到了很好的支持。如果需要考虑旧版浏览器（如 Internet Explorer）的兼容性，在 Vite 项目中，可以通过配置 PostCSS 插件（包含Autoprefixer）来处理 CSS 文件，为不支持 Grid 的浏览器添加必要的前缀或提供回退方案。在 Vite 的配置文件 vite.config.js 中，PostCSS配置方法如下 ：
// vite.config.js
import { defineConfig } from 'vite';
import autoprefixer from 'autoprefixer';
export default defineConfig({
css: {
postcss: {
plugins: [
autoprefixer({
// 浏览器兼容目标范围
overrideBrowserslist: ['> 1%', 'last 2 versions', 'ie >= 11'],
grid: 'autoplace',
}),
],
},
},
// ...
});
个人觉得,W3C组织每发布一次新特性，浏览器厂商应该应该以当前版本为基础，在近10个版本中支持该特性，这样就不会造成新标准虽然发布了，但是不能立刻投入生产使用，也不知道需要等多久，才能在主流的浏览器版本中使用新特性。
13. 如何升级npm包依赖的依赖包版本？
最新项目中被安全工具扫描出许多npm包有安全漏洞，需要升级，瞅了一眼，发现被扫描出来的99%的npm包都是间接依赖包，没法在项目根目录下的package.json中指定版本。而且有些被扫描出来的npm包更特别，同一个npm包要同时升级到两个不同的版本。
正是因为这种特殊情况，促进了我的思考，最后通过直接在yarn.lock文件中修改依赖包的下载版本，解决了这个问题。
json5@2.x, json5@^2.1.2, json5@^2.2.1:
version "2.2.2"
resolved "https://registry.npmmirror.com/json5/-/json5-2.2.2.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
json5@^1.0.1:
version "1.0.2"
resolved "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
dependencies:
minimist "^1.2.0"
12. rel="noopenner noreferrer"是什么含义?
- noopenner 阻止新打开的页面对原始窗口window.opener对象的访问，防止恶意站点对原始窗口内容进行篡改或导航到其它恶意网站。
- noreferrer 用来禁用http协议头部中的referrer信息，这样做可以防止将原始链接中的敏感信息被携带到目标网站，也防止目标网站通过referrer字段追踪用户来源
11. 企微和微信不走JS-SDK，默认分享卡片的差异是什么？
企微和微信，不通过wx.config注入权限，调用分享接口 wx.updateAppMessageShareData(新api)或wx.onMenuShareAppMessage(老api)设置分享参数标题，描述，链接，缩略图，使用系统默认的右上角弹出的分享菜单进行分享，从企微中分享出去的文章，标题，文章描述和缩略图都是有的，这些内容都是企微自动从文章中爬取的。
而从微信中分享出去的链接，除了分享标题之外，文章描述和缩略图都没有。
另外还发现，如果把页面链接复制出来，在微信中打开，分享出去，不会显示分享卡片，显示的仍旧是链接。说明微信对分享行为的控制，比企微更严格一些。如果要设置分享参数，还是要通过微信JS-SDK的分享接口，更好一些。
10. 意外的一个发现，父组件给子组件传递的属性，如果是个对象，可以在子组件中直接修改父组件传递属性对象中的某个键值
这是父页面，传递给子组件RuleItem的属性subItem是个对象，包含一个label属性
在子组件中,可以使用v-model:value，对父页面传递过来的属性值中的键值item.label直接进行修改。
9. Node+Express+multer上传的文件含有中文时显示乱码，如何解决？
文件名乱码现象如下:
解决中文文件乱码的配置如下：
const express = require("express");
const multer = require("multer"); // 文件上传中间件
const dayjs = require("dayjs");
// 设置multer存储文件的配置
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, "uploads/");
},
filename: function (req, file, cb) {
// 解决中文名乱码的问题
file.originalname = Buffer.from(file.originalname, "latin1").toString("utf8");
cb(null, `${dayjs().format("YYYYMMDD_HHmmss")}-${file.originalname}`);
},
});
8. VSCode的Live Server扩展，如何设置忽略某些文件的改动？
情景是这样的，写了一个在网页端上传文件，然后保存到服务器端，由于我把前后端的功能都写在一个工程下，用VSCode的Live Server扩展启动网页端index.html,在命令行用node启动的服务器。每次网页端上传文件，服务器端保存文件成功后，由于产生了新的文件，Live Server扩展会自动刷新网页端index.html，导致我想查看文件传输网络请求和响应，无法看到。经过查阅资料，发现只要配置忽略某个文件夹下的文件改动，就可以了。由于我的项目后端文件夹名称是server,在VSCode的设置文件中添加如下配置, server文件夹下的文件生成就不会造成Live Server扩展刷新index.html文件了。
"liveServer.settings.ignoreFiles": [
"**/server/*.*",
]
7. ant-design-vue在本地开发环境和线上环境，Select选项框的下拉箭头，位置有差异的原因是什么？
- 这是本地开发环境:
- 这是线上环境
线上环境选择框的箭头是垂直居中显示的，本地开发环境，Select选择框中的下拉箭头，明显靠下面一些，看着不太美观。
通过逐个样式仔细的对比，最后发现是ant-select-arrow样式的line-height属性有差异引起的展示差别。
这是本地开发的样式
这是线上环境的样式
最后添加了一个全局样式，修复了这个问题
.ant-select-arrow > .anticon.anticon-down.ant-select-suffix{
line-height: 1;
}
6. OAuth2.0 认证的优势是什么？
- 用户不再需要直接向第三方应用提供自己的原始账户凭据（如用户名和密码），从而降低了因第三方应用的安全漏洞导致用户账户被盗用的风险。
- 使用令牌（Token）机制，令牌是可以临时且有时限的，即使令牌泄露，也可以通过撤销来减少潜在的危害。
- 不同类型的客户端都能够方便地接入OAuth 2.0授权服务，无论是网页应用、原生桌面应用还是移动设备应用，都能无缝对接。
- OAuth 2.0的令牌可以设置详细的权限范围，使得客户端只能访问被用户明确授权的资源，实现了细粒度的权限控制。 OAuth 2.0允许为不同的客户端分配不同的信任级别，并提供多种授权类型，如授权码（Authorization Code）、隐式授权（Implicit）、资源所有者密码凭证（Resource Owner Password Credentials）、客户端凭证（Client Credentials）和刷新令牌（Refresh Token）等，满足多样化的业务需求。
- OAuth 2.0允许授权服务器集中处理认证和授权，与资源服务器分离，提高了系统的模块化程度和安全性。
5. 微信JS-SDK调用,调用的过程网页是通过http协议和客户端通信，还是通过JS-Bridge方式？
从抓包工具获取到的网页请求来看，只有JS-Bridge的方式说得通。在调用JS-SDK之前，需要加载jweixin-*.js这样的JavaScript库，这个库封装了好多网页端K与微信/企微应用通信的方法，唤起微信/企微 原生应用特定功能。可能企微/微信 App与微信/企微的服务器有http通信，但在网页端抓包是无法获取到的。
4. 微信JS-SDK在调用时为什么需要用户授权？
微信JS-SDK是一套由微信官方提供的，允许网页开发者在网页中调用微信相关功能（如获取用户信息、分享到朋友圈、微信支付等）的JavaScript库。为了保护用户隐私和安全，微信对这些敏感操作设定了严格的权限管理机制。
- 调用微信JS-SDK的部分接口涉及到获取用户的个人信息，例如头像、昵称、地理位置等。为了遵守法律法规并保护用户隐私，微信要求开发者在获取这些信息之前必须获得用户的明示同意。
- 微信规定，任何读取用户个人数据的行为都需要经过用户的授权，即便是静默授权，也是基于用户前期已经授权过的前提下才能实现。非静默授权则更明显地让用户点击“同意”按钮，明确表达其意愿。
微信JS-SDK调用时需要通过OAuth2.0协议或者静默登录的方式获取access_token等凭证，进而调用相应接口。在静默授权模式下，用户无感知，但如果尚未授权过，则会跳转至授权页让用户确认授权；非静默授权则强制用户手动确认授权信息。静默授权仅能获取openid，要获取用户的手机号，头像，昵称等信息，则需要强制授权。
3. 对于模糊查询节流函数的思考
一般模糊搜索，如果是从后台接口查询数据，都会加上一个节流函数，我想了一下，是不是等上一次的查询结果返回后，再发起新的查询请求，更合理一些。这样做，可以有效避免先发出去的查询请求，响应结果返回较慢，覆盖掉后面查询请求的结果。另外也能达到节流的目的
<template>
<Select
v-model:value="formData.taskClientRule.customerGroupId"
:allow-clear="false"
:disabled="isOnlyRead"
style="width: 320px"
show-search
@search="handleCustomerGroupIdSearch"
:get-popup-container="(triggerNode)=>(triggerNode.parentNode as HTMLElement)"
>
<SelectOption v-for="item in customerGroupOptions" :value="item.id" :key="item.id">
{{ item.customerGroupName }}
</SelectOption>
</Select>
</template>
<script>
const loading=ref(false);
const handleCustomerGroupIdSearch = async(customerGroupName: string) => {
if(loading.value) return;
queryCustomerGroupOptions(customerGroupName);
};
const queryCustomerGroupOptions = (customerGroupName = '') => {
loading.value=true;
businessStrategyApi
.customerGroupList({ customerGroupName, pageNum: 1, pageSize: 20 })
.then(({ retdata = [] }: TLooseObj) => {
// ...
})
.finally(() => {
loading.value=false;
});
};
</script>
2.ant-design -vue的Modal组件的使用问题
Modal组件有个confirmLoading属性，用于点击确定按钮的时候，显示正在请求中的加载效果， 然而在接口返回结果出现异常的时候，接口请求已经正常结束，然而确定按钮上的loading动画却仍在加载中。通过在视图中插入Modal组件的方式，支持对这个属性值的修改。然后通过js方法
Modal.confirm创建的模态框，是不支持对这个属性值的修改的，有点坑。
1.ant-design-vue的InputNumber组件API文档带来的困惑。
ant-design-vue的InputNumber组件官方API文档上写着是支持是支持change事件的，然而实测是不支持的，另外这个InputNumber组件，实际上也能输入中文，英文和特殊字符，并不是如其名所说的那样，只能输入数字。
这是官方文档的链接地址，下方是截图。遇到这种情况，要改变一下自己的传统认知，尽快接受实际情况，继续想别的办法。后来使用Input的change事件，才实现了限制只能输入数字的效果。
