2024年物联网嵌入式最新前端有什么难点_前端项目难点(1)，2024年最新一个月成功收割腾讯、阿里、字节offer

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

在第三方的组件或者是一些类库 按照文档的流程去进行配置和api的调用就能实现功能的需求，

其实也不能说太难，只是在第一次对接的时候有一定的学习成本。

其实我觉得前端最难的不是框架的应用和类库成使用，而是数据的处理，在我们的实际开发过程当中，

有些后台返回的数据并不能直接用于我们的类库，这个时候往往需要进行数据的处理，

改变数据的层次结构等来满足目标组件或者类库的时候。

这个比较考验前端的数据结构的处理能力，要对数组或者是函数的递归调用等很熟悉才行。

1 无焦点扫码枪

通过全局监听 keypress 事件 然后获取 ev 对象是否为 Enter 事件
计算 扫码枪录入的平均间隔时间 10s 通过的话就请求接口获取商品信息

原理：扫码枪就是一个输入设备，和电脑连接扫码就会输入数字最后有个 Enter 字符 如 1 2 3 Event
判断每次的 ev 对象里面的 key 不同执行不同逻辑 数字就 记录第一个输入的时间 然后将数字添加到数组 
如果超过了 50 毫秒每输入就清空数组 避免之后二次输入
是 Event 就获取第一次记录时间 和 当前时间相差的时间戳 除以 数组的长度 判断是否小于 10 毫秒

如果提到了在任何页面扫码都可以 就要说 会先判断当前的页面是否是盘点页这样 是的话就正常流程，
否则就是默认弹出一个表单框里面有对应的商品信息显示这样

2 权限管理

一般可以分为 接口权限 按钮权限 路由权限

路由权限

3 scoket实现双向视频通话

createOffer // 创建一个offer 对象
video 需要添加 autoplay pl
webrtc的一些基础概念:
1 SDP
2  const pc =  new  RTCPeerConnection()
3 createOffer
4 createAnswer
5 setRemoteDescription
6 setLocalDescription
7 navigator.mediaDevices( getUserMedia getDisplayMedia )
8 pc.onicedidate()
9 pc.oncl

具体的实现;
1 通过navigator.mediaDevices来获取摄像头或者是音频信息( 也可以是共享屏幕)
2 通过createOffer创建一个 offer 然后得到对应的offer的sdp
3 通过socket.io把这个sdp给到对方
4 接受放在收到提示的时候如果确认通讯的话会调用createAnswer来创建一个answer对象 然后也会获得对应的answer的sdp,再把这个 ans的sdp传递给发起方
5 无论是发起方 还是 接收方 都是分别跟别双方的关系去调用 setRemoteDescription 和 setLocalDescription传入对应的sdp就完成了通讯。 （ 发起方的local是offer remote是ans  ， 接收方的local 是ans remote 是offer ）
6 通过 rtc实例对象的 ontrack 事件的监听让video标签的srcObject播放媒体流。

4 实时聊天室怎么实现的

登录后会拿到对应的uuid然后和后端建立连接
客户端主要是通过 socket 的 io 实现长连接来达到 emit 提交信息 然后通过 on 接受对应的信息 然后渲染到页面上
实现客户端的逻辑，包括发送消息、接收服务器广播的消息、处理加入聊天室请求等。
后端主要就是创建了一个socket的连接 用来监听客户端的连接请求
实现服务器端的逻辑，包括接收客户端消息、处理加入聊天室请求、广播消息给聊天室中的其他成员等。
然后添加了一个 uuid 用来区分各用户在各聊天室消息的唯一性

5 excel 如何导入导出 -sheetjs

js-export-excel导出：

const handleExport = () => {
    const option: {
        fileName: string;
        datas: {
            sheetData: CustomerType[];
            sheetName: string;
            sheetFilter: string[];
            sheetHeader: string[];
        }[]
    } = {
        fileName: "客户信息", // 导出的文件的名称
        datas: [
            {
                sheetData: filterTableData.value, // 表格数据
                sheetName: "客户信息", // excel表格中表格的名字
                sheetFilter: ["number", "name", "sex"], // 需要导出的数据的字段
                sheetHeader: ["客户编号", "客户姓名", "客户性别"], // 表头的值
            }
        ]
    }
    var toExcel = new ExportJsonExcel(option); //new
    toExcel.saveExcel(); //保存
    ElMessage.success("导出成功")
}

XLSX导入:

import * as XLSX from 'xlsx'

 <input type="file" hidden id='fileRef' onChange={importExcel} />

    const importExcel = () => {
        const file = (document.getElementById('fileRef') as HTMLInputElement).files![0]
        if (!file) return
        const reader = new FileReader()
        reader.readAsBinaryString(file!) // 转成 二进制格式
        reader.onload = function () {
            const workbook = XLSX.read(this.result, { type: 'binary' });
            const tableData = workbook.Sheets['产品列表'] // excel表格中表格的名字，拿到表格数据
            const proList: any[] = XLSX.utils.sheet_to_json(tableData) // 转换成产品列表js对象
            proList.forEach((item: any, index: number) => {
                item.index = index
            })
            setProList(proList)
        }
    }

6 自定义海报生成

接下来我们可以通过   html2canvas  来把一个指定的html节点转换成 canvas 然后保存成图片
这里涉及到三个类库
1 qrcode-vue  vue当中的一个二维码生成组件
https://github.com/scopewu/qrcode.vue
2 html2canvas  把一个指定的dom节点以canvans的形式生成截图
https://html2canvas.hertzen.com/ 
3 download-canvas 下载canvans的类库
https://github.com/huytbt/download-canvas

7 需求：需要支持自定义快捷键设置

解释： 让用户可以在中后台设置快捷键 ，进行一些常规的弹窗拉起 ，比如录入操作 锁屏操作

实现方式： 创建一张本地字典，可以支持用户输入快捷键并帮助他绑定相关事件。

（一大串json，放到localStorage里面，例：{ keyBuy: 114, keySell: 115 } ）

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。

如果你需要这些资料，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

859262)]

如果你需要这些资料，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！