收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。
一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人
都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
前提：
公司要求生成一分报告并转为图片并保存，之前用canvas画过，但这次是在不想用canvas一点点画了，再往上找了n久，爬了n多坑，终于搞出来了
插件：
wxml2canvas
一：下载插件
npm install wxml2canvas
二：构建npm
微信开发者工具： 工具 --> 构建npm
三：使用
import Wxml2Canvas from 'wxml2canvas'
好了，坑开始了！！！！！！！！！！！！
坑一：引入一直报错
解决方法
重新下载了好几次wxml2canvas，又清了缓存n次
总结：微信开发者工具太辣鸡了
坑二：文字不换行
解决方法：
data-type="inline-text"
text标签的 data-type 由 text 修改为 inline-text
坑三：文字按整个canvas的宽度来换行，超过的部位还被裁了
解决方法：手动换行
计算这里一行最多可以放几个文字，然后把这一段文本分割成几行，最后循环遍历显示
<view class="function">
<text class="my_draw_canvas" wx:for="{{instructionTextList}}" wx:key="index" data-type="inline-text" data-text="{{item}}">
{{item}}
</text>
<!-- <text class="my_draw_canvas" data-type="inline-text" data-text="测试测试测测试测试测试测试测试测试测试测试测试测试测试测试试测试">
测试测试测测试测试测试测试测试测试测试测试测试测试测试测试试测试
</text> -->
</view>
坑四：最后的图片不显示wxss中写的border代码
解决方法:
let drawMyImage = new Wxml2Canvas({
element: 'myCanvas', // canvas的id,
obj: that, // 传入当前组件的this
options: {class: ".exc-c",limit: ".limit-r",},
width: that.data.width * 3,
height: that.data.height * 3,
// width: 794,
// height: 1123,
background: '#ffffff', // 生成图片的背景色
progress(percent) { // 进度
// console.log(percent);
},
finish(url) { // 生成的图片
console.log('url',url)
wx.hideLoading()
that.savePoster(url)
},
error(res) { // 失败原因
console.log(res);
wx.hideLoading()
}
}, this);
let data = {
// 获取wxml数据
list: [
{
type: 'wxml',
class: '.my_canvas .my_draw_canvas', // my_canvas要绘制的wxml元素根类名， my_draw_canvas单个元素的类名（所有要绘制的单个元素都要添加该类名）
limit: '.my_canvas', // 要绘制的wxml元素根类名
x: 0,
y: 0,
},
{ //绘制横线 logo下面
type: 'line', x: 10, y: 50,x2:760,y2:50,
style: {
width: 1,
stroke: '#000'
}
},
{ // 车牌下面
type: 'line', x: 10, y: 178,x2:760,y2:178,
style: {
width: 1,
stroke: '#000'
}
},
{// 检测部位 下面
type: 'line', x: 170, y: 208,x2:760,y2:208,
style: {
width: 1,
stroke: '#000'
}
},
{// 功能/作用 下面
type: 'line', x: 10, y: 318,x2:760,y2:318,
style: {
width: 1,
stroke: '#000'
}
},
{// 正常状态 下面
type: 'line', x: 10, y: 354,x2:760,y2:354,
style: {
width: 1,
stroke: '#000'
}
}, // {// 画竖线 左边
// type: 'line', x: 10, y: 178,x2:10,y2:that.data.height-186,
// style: {
// width: 1,
// stroke: '#000'
// }
// },
// {// 画竖线 右边
// type: 'line', x: 760, y: 178,x2:760,y2:that.data.height-186,
// style: {
// width: 1,
// stroke: '#000'
// }
// },
// {// 车牌照片 右边
// type: 'line', x: 170, y: 178,x2:170,y2:318,
// style: {
// width: 1,
// stroke: '#000'
// }
// },
// {// 检测部位 右边
// type: 'line', x: 250, y: 178,x2:250,y2:318,
// style: {
// width: 1,
// stroke: '#000'
// }
// },
]
}
// 绘制canvas
drawMyImage.draw(data, this);
坑五：不同型号手机显示错位
好不容易填了一下第四个坑，但是屏幕越大的手机，线条往右下方偏移越严重
希望的样式：（12pro）
(13pro) (ipad)
以上我感觉是不能用 type: 'line' 一条条地画了，搞了整整两三天，最终放弃
最后解决方法：在需要画线的地方，插入一个view当做一条线
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！
由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新
