微信小程序开发之https证书链不完整问题 接口域名ssl到期后，去ssl申请了新的证书，上传到宝塔，但是在小程序线上还是访问不了，如图： 宝塔那边配置一切正常，奈何还是不行 微信小程序官方对SSL证书的要求： SSL证书必须有效SSL证书必须被系统信任，即根证书已被系统内置部署 SSL 证书的网站域名必须与证书颁发的域名一致SSL证书必须在有效期内SSL证书的信任链必需完整（需要服务器配置）不支持自签名SSL证书TLS 必须支持 1.2 及以上版本 去https://myssl.com/ 检查域名ssl，发现等级为B，就算配了ssl，但是等级不过关证书链不够完整，微信那边也不给过的，于是重新生成证书链，再覆盖掉原来的证书就行了

群辉nas + frp + 腾讯云服务器，实现远程访问nas，内网穿透 服务端 1.下载frp包 js wget https://github.com/fatedier/frp/releases/download/v0.31.1/frp_0.31.1_linux_amd64.tar.gz 2.切换到到包根目录 frps.ini是服务端配置文件，frpc.ini客户端配置文件 3.修改frps.ini `js [common] 监听端口 bind_port = 7000 面板端口 dashboard_port = 7500 登录面板账号设置 dashboarduser = admin dashboardpwd = xxx 设置http及https协议下代理端口（非重要） vhosthttpport = 5000 vhosthttpsport = 5001 绑定的域名 subdomain_host = xxxxx.com 身份验证 token = xxxxxxxxx tlsenable = false tcpmux = true ` 记得开放7000, 7500, 5000, 5001防火墙端口，以及腾讯云或者阿里云的入站规则； 踩坑报错：login to server failed: session shutdown https://github.com/fatedier/frp/issues/3778 tls_enable一定要设置为false， 新版本会报错 4. 启动frp js sudo ./frps -c frps.ini ip:7500是frp的面板地址： 输入上面配置好的密码就可以进入了 5. 配置Nas客户端 frpc 套件中心安装一下docker 可能docker无法加载注册表或者无法连接服务器，我们直接用ssh去连接nas，手动拉取镜像； 打开nas ssh功能 连接nas终端 parker为nas的用户名。回车，输入nas登录密码就行了 js docker pull stilleshan/frpc 6. 配置frpc.ini文件 nas docker文件目录下新建一个frp文件夹，将编辑好的frpc.ini拖进去 `js [common] serveraddr=服务器id地址 serverport = 7000 token = 服务器frp.ini配置的token transport.protocol = kcp tls_enable = false [nas] type = tcp localip = 192.168.3.199 # 本机局域网ip localport = 5000 # nas的本地端口号 remote_port = 5001 # 远程端口号 [nasDrive] type = tcp localip = 192.168.3.199 # 本机局域网ip localport = 6690 remoteport = 6690 ` 7.配置docker映像 第5步我们已经拉取了stilleshan/frpc的镜像，所以点开映像列表，会出现stilleshan/frpc； 配置如下： 使用与Docker Host相同的网络 使用高权限执行容器，不然会报错127.0.0.1:7000无法访问 点击添加文件，选择docker/frp/frpc.ini配置文件，装载目录填：/frp/frpc.ini 点击完成 8.查看容器是否正常运行 9.浏览器输入： 域名:5001 访问成功！ 域名:7500 查看nas面板信息 frp进程守护 修改fps下的systemd/frpc.service 改成你自己的ini配置文件的路径 `js 拷贝 frps 命令 sudo cp frps /usr/bin 将 systemd 文件拷贝到 /usr/lib/systemd/system/ 目录下 sudo cp ./systemd/frps.service /usr/lib/systemd/system/ 启动 frps sudo systemctl start frps 查看 frps 服务的状态 sudo systemctl status frps 开启开机启动 sudo systemctl enable frps ` 腾讯云5M的带宽，平均下载速度1.18M/s，nas上传带宽取决于你的宽带；

1

背景：服务器起了个服务代理到了GPT，由于服务器是国外的，而我自己的域名解析到了国内服务器，所以需要开一个反代，将这个域名代理到国外服务器上 `js location ~* .(php|jsp|cgi|asp|aspx)$ { proxypass http://43.153.111.119:8051$requesturi; proxysetheader Host 43.153.111.119:8501; proxysetheader X-Real-IP 43.153.111.119; proxysetheader X-Forwarded-For $proxyaddxforwardedfor; proxysetheader REMOTE-HOST $remoteaddr;} location / { proxypass http://43.153.111.119:8501; proxysetheader Host $remoteaddr; proxysetheader X-Real-IP $remoteaddr; proxysetheader X-Forwarded-For $proxyaddxforwardedfor; proxysetheader REMOTE-HOST http://43.153.111.119:8501; proxyhttpversion 1.1; proxysetheader Upgrade $httpupgrade; proxysetheader Connection "upgrade"; proxyset_header Origin ""; } PROXY-END/ ` 支持ws协议 js proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; 当然加了这三个属性还是会继续报错，ws连接403 这个时候我们添加如下配置： js proxy_set_header Origin ""; 最终代理成功后的截图：

react之useMemo 使用注意事项 在 React 中，useMemo 是一个钩子函数，它可以在组件渲染时缓存计算结果，以避免重复计算，提高组件的性能。useMemo 接受两个参数，第一个参数是一个函数，用于计算需要缓存的结果；第二个参数是一个数组，包含了所有需要监控的变量。当这些变量发生变化时，useMemo 会重新计算结果并返回。 背景： 在封装某个table公用组件 做导出功能模块。接口每次限制请求条数为1000条，实际数据有4000多条，需要前端分片取数据（分5次请求，每次1000），然后再一次性导出所有数据； 问题： 当我导出所有数据的时候，发现total变量一直是初始化的10；小明他妈给离谱开门，离谱到家了（其实也不是，主要没有理解透useMemo）； 表格头部筛选组件 js const HeaderFilterMemo = useMemo(() => { const HandleSearch = (values) => { const dtd = {...tableQuery, ...values, page: 1} const query = {} Object.keys(dtd).forEach(k => { // Tips: 不做dtd[k]为空判断，get请求会自动过滤掉值为空的参数。 如果过滤会导致filter defaultValue值覆盖现有值 query[k] = dtd[k] }) setTableQuery(query) } return <HeaderFilter filters={filters} exportToExcel={exportToExcel} HandleExport={HandleExport} HandleSearch={HandleSearch} /> // eslint-disable-next-line react-hooks/exhaustive-deps }, [filters, tableQuery, tablePageData]) 避免父组件state的变化，所以只针对HeaderFilter组件所需要的参数做监听（filters, tableQuery） 缓存当前函数的一个计算结果； 导出方法（在父组件内，与HeaderFilterMemo同级） js const HandleExport = () => { console.log('HandleExport', tablePageData); return let fileName = title if (typeof exportToExcel === 'object') { const {fileName: fn} = exportToExcel if (fn) fileName = fn } TableExport({ options: {fileName}, columns, url, query: tableQuery, filters, total: tablePageData.total }) } 在useMemo里，子组件已经将HandleExport方法给写入缓存了，里面的值都是组件初始化给过去的值，也就是说，total一直为10，HandleExport方法里面引用父组件的state，必须在useMemo监听到，否则都是初始化的值，无法获取最新的值；

H5开发之兼容性问题 animation: animation-delay Android&ios ios低版本15.4 不生效的问题 错误代码： css @mixin thingsPoolAnimate($deg: '1', $time: 4s) { @if $deg == 'reverse' { animation: beginRotateOuterReverse $time infinite; } @else { animation: beginRotateOuter $time infinite; animation-delay: 0.3s; } } 在ios16+的版本上是正常的，15.4测试是不生效，整个动画都是不生效的； 解决方案： 将animation-delay: 0.3s直接写到类上，不要放在if； css .inner { animation-delay: 0.3s; @include thingsPoolAnimate; }

H5开发之疑难杂症 ios & android 列表滚动到底部，导致无法滑动 解决方案：当滚动到最底部的时候，往上+1 code： `js const handleOnScroll = (e: Event) => { onIOSScroll(e) } useEffect(() => { window.addEventListener('scroll', handleOnScroll,true) return () => { window.removeEventListener('scroll', handleOnScroll) } }, []) js /** 解决ios滚动到最底部的时候 划不动的问题 / export const onIOSScroll = debounce( (evt) => { const target = evt.target const scrollTop = target.scrollTop const top = target.scrollHeight - 1 - target.offsetHeight if (scrollTop >= top) { setTimeout(() => { target.scrollTop = top }, 0) } }, 500, { leading: false, trailing: true } ) `

202210面试题目总结 https://blog.csdn.net/qq_60976312/article/details/125783396 $# this的理解，call、bind、apply的区别；$ this的指向取决于上下文环境，谁调用该函数，该函数的this就指向谁，this指向使用它时坐在的对象； 区别： - call、bind、apply都是改变this指向； call和apply接收的参数不一样，call(target, value), apply(target, [value]), call的第二个参数是字符串，apply的第二个参数是数组;call、apply都是直接调用，而bind则返回一个函数，需要手动调用: bind(target, value)() $# 数组slice和splice的作用及区别；$ 截取数组生成新数组； 区别： 1. slice可以用于数组和字符串的截取； 2. splice 会改变原有值，而slice不会； 3. splice 除了可以删除之外还可以插入元素； $# JS基本类型有哪些，基本类型和引用数据类型有什么区别？$ string, int, number, object, null, undefind, bigInt, symbol 基本类型和引用类型的区别：存放位置，基本类型存在栈里，而引用类型存放在堆里（数据大小可能会变，存堆里提升后续计算的一个性能） $# 简单说一下JS的事件循环；宏、微任务有哪些$ 事件循环： 先执行微任务，再执行宏任务，遇到微任务将当前任务丢到微任务队列，遇到宏任务则丢进宏任务队列，依次循环； 宏任务： script, setTimerOut, setInteval, setImmediate(node), UI事件, I/O 微任务： promise.then(), promise.catch(), process.nextTick() $# Diff算法的理解$ $# 组建封装应该注意什么？$ 1、可拓展性 如slot 2、易用性 3、命名规范性 $# promise是什么，有哪三种状态？特点是什么？$ 解决异步编程的一种方案，语法上promise是一个构造函数；用于异步计算； pending(等待), fulfilled(完成), rejected(拒绝) 特点： 1、对象状态不受外界影响，状态一旦确定无法被改变； 2、报错无法通过外部的try catch获取，只能由函数内部抛出；会触发rejected状态，并且执行.then, .catch中的reject的回调； $# 手写防抖节流$ `js const dom = document.getElementById("dd") const handleClick = myDebounce(v => { console.log(v) }, 1000, true) function myDebounce(fn, t = 500, im = false) { let timer, imvoke = false return function() { timer && clearTimeout(timer) // 防抖 // if (timer) return // 节流 if (im && !imvoke) { fn.apply(this, arguments) imvoke = true } timer = setTimeout(() => { fn.apply(this, arguments) timer = null }, t) } } ` $# Vue 常见的修饰符有哪些，作用分别是什么？ $ .stop 阻止事件冒泡 .prevent 阻止默认事件触发 .self 点击当前元素，event.target等于元素本身的时候才会触发 .passive 事件的默认行为立即执行，无需等待事件回调执行完毕； .capture 事件优先被捕获，如果嵌套多个.capture，那么优先级由外到里 .once 只执行一次 $# Vue 自定义指令用过哪些？$ v-if、v-else、v-show、v-model、v-html、v-text.... $# Vue v-for 可以和 v-if一起使用吗？ 为什么？$ 不能 v-for的优先级大于v-if，每次v-for都会执行v-if，造成不必要的计算，影响性能 $# Vue v-if v-else 两个input，没有给key值，来回切换会发生什么？$ input里面的值还是原来的值； 因为Vue在dom渲染的时候，出于性能考虑，尽可能的复用原来的元素，而不是重新创建 $# Vue keep-alive 会执行哪两个hooks，两个钩子的用法是什么？$ actived: 组件激活时调用 deactived：组件失活时调用 $# Vue 的特点是什么，和React有什么区别？$

store/index.ts `js import { createStore, applyMiddleware, compose } from 'redux' import thunkMiddleware from 'redux-thunk' import rootReducer from './reducers' const composeEnhancers = typeof window === 'object' && window.REDUXDEVTOOLSEXTENSION_COMPOSE ? window.REDUXDEVTOOLSEXTENSION_COMPOSE({ // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize... }) : compose const middlewares = [ thunkMiddleware ] if (process.env.NODE_ENV === 'development') { middlewares.push(require('redux-logger').createLogger()) } const enhancer = composeEnhancers( applyMiddleware(...middlewares), // other store enhancers if any ) export default function configStore () { const store = createStore(rootReducer) return store } ` reducers/index.ts `js import { combineReducers } from 'redux' import home from "./home"; export default combineReducers({ home }) ` app.tsx `js import configStore from "./common/store"; const store = configStore() class App extends Component { componentDidMount () {} componentDidShow () {} componentDidHide () {} // this.props.children 是将要会渲染的页面 render () { return <Provider store={store}> {this.props.children} </Provider> } } ` 重点： const store = configStore()

useCallback 和 useMemo的区别 接收参数都一样，第一个参数回调，第二个是依赖的数据； 共同点： 两者都能优化性能，当依赖的数据发生变化时，才会重新计算结果，也就是起到缓存的作用； 不同点： useCallback计算的结果是函数，主要用于缓存函数； js const child = useCallback(fn, [name]) 应用场景： 需要计算的状态。 useMemo计算的结果是return出来的值； js const child = useMemo(() => fn, [name]) 应用场景： 需要缓存的函数。 (因为如果state的值发生变化，整个组件都会被刷新，一些函数或者组件是没必要进行刷新，这时应该用useMemo缓存起来，提高性能，避免资源浪费)