工作中遇到的一些前端问题

1. 微信分享签名报错：realAuthUrl: xxxxxx;sing: fail; 前端访问URL和后端不一样；
2. h5跳转小程序，进入到开放标签页面，需要重新载入config
3. 微信网页授权，获取code的重定向地址，如果是hash地址，无法直接拿code参数，需要做字符串截取处理
4. vue ref获取子组件大坑！ const temp = ref() 此处的temp一定和子组件 上的 ref=“temp” 名称一致！！！不然获取不到！！！
5. vue 配置多环境 打包后文件不压缩 是因为 .env文件的 NODE_ENV 变了 ，vue 默认production 才压缩
6. vue2 动态路由中 顶层await 报错问题，未解决
7. txt文件下载，PC正常，h5显示下载失败。原因：
8. json 反斜杠 \ 转义字符 参考链接
9. luckysheet + nodejs 多人协作编辑Excel
   ①：luckysheet 的 updateUrl 发送数据为pako压缩，后端pako版需要和客户端的版本一致，不然无法解压
   ②：nodejs的 express-ws 需要设置路由广播消息，不然其他客户端接收不到消息

   const wss = expressWs(app).getWss('/');
   ws.on('message', function (msg) {
       // 给所有的客户端广播消息
       wss.clients.forEach((e) => {
         	// 业务代码
           e.send(广播的数据（字符串格式）);
         }
       })
     })
   

   ③：luckysheet实时更新 type = 3 用户选中显示名字 type == 2 更新数据
10. Array.sort() 遇到混有个位和十位的数时 排序混乱 改为 = > sort((a, b) => a-b);
11. nodejs http请求遇到302 拿不到地址的cookie，解决办法：

let request = require('request');
request = request.defaults({jar: true}); // 302重定向带cookie

12. nodejs 15以下不支持replaceAll 解决办法：

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}
function replaceAll(str, match, replacement){
  return str.replace(new RegExp(escapeRegExp(match), 'g'), ()=>replacement);
}
replaceAll('hello word!', 'word', 'javaScript')

13. typescript 5.x 和 element-plus 2.3.6 以下 不兼容解决办法

// tsconfig.json
"compilerOptions": {
	......
	"types": [
      "element-plus/global.d.ts"
    ],
    "moduleResolution": "node",
    ......
}

14. element-plus 表单回车键提交以及提交阻止页面刷新

// @submit.native.prevent 和 native-type="submit"
<el-form @submit.native.prevent></el-form>
<el-button native-type="submit">登 录</el-button>

15. ts window动态属性

declare interface Window<T> {
  [key: string]: T
}

16. axios 封装JSONP（ts）

export const requestJsonp = <T>(url: string, callback: string): Promise<T> => {
  return new Promise((resolve, _) => {
    // 这里的 "jsonCallBack" ，和调用的 jsonp 的 url 中的 callback 值相对应
    window[callback] = (res: T) => resolve(res)
    const JSONP = document.createElement('script');
    JSONP.type = 'text/javascript';
    JSONP.src = url;
    document.getElementsByTagName('head')[0].appendChild(JSONP);
    setTimeout(() => {
      document.getElementsByTagName('head')[0].removeChild(JSONP)
    },500)
  })
}
// 调用
requestJsonp<{ code: number, msg: string }>("https://xxx.com?callback=loc0", "loc0");

17. nodejs 代理IP问题

• 用 request 代理IP会出现，第一次请求能取到 set-cookie 后面请求的都没有set-cookie (未解决！)

request({
    url: 'https://xxx.com',
    method: "GET",
    proxy: `http://ip或者域名:端口`  // 这里是代理的地址，白名单模式
  }, function(error, response, body) {
    if (!error && response.statusCode == 200) {
     	console.log(body);
    }
  });

• 使用 axios-https-proxy-fix 完美解决

const axios_proxy = require('axios-https-proxy-fix');
axios_proxy({
  url: 'https://xxx.com',
  method: "POST",
  proxy: {
    host: '127.0.0.1', // ip或者域名
    port: 6666  // 端口
  },
  data: dataString,
}).then(result => {
  console.log(result.data);
}).catch(err => {
  console.log(err.message);
})

18. nodejs request 模块请求图片资源，乱码解决

request({
  url: 'xxx.com',
  method: "GET",
  encoding: null, // 重点属性，禁止自动转义
}, function(error, response, body) {
  if (!error && response.statusCode == 200) {
    // 图片转basse64
    const buffer = Buffer.from(body, 'base64');
    const base64Str =  buffer.toString('base64'); // 拿到base64字符串，返回给前端 'data:image/png;base64,' + base64Str
  }
});