微信小程序开发的陷阱
小程序开发
浏览：1059 次
什么是小程序？
腾讯微信终端就像原生app开发。使用一堆腾讯编写的组件和一些自制组件来开发app。
第一个小程序
以前，我不得不在下班后和周末编写代码。在做了一段时间的小程序之后，我实际上创建了一个音乐播放器，音乐播放器。这个播放器最重要的是加载歌词。毕竟，你必须计算。
第一个进入公司的小程序
嗯，这不是一个完整的小程序。我已经为其中的一部分编写了几个组件。然后，2018年1月22日上线。
介绍之后，我开始谈论我自己的错误
名片管理：原理很简单。用户输入信息并将头像上传到名片模板以形成个人名片。单击按钮下载。名片保存在相册中。
坑：后台不能单独发送包含用户信息的名片链接，这样我就可以打电话下载了。原因是服务器很难操作。毕竟，这不是一个专业的后台。我什么都说不出来。所以我将开发卡片下载功能。在阅读了一周的文件后，我接手了。我有点紧张。毕竟，后台是无法修复的。然后，当我接手时，我说我会试着看看是否能坚持一两天。你知道为什么。毕竟，我不知道用帆布画画是否可行。把它卷起来。
我仍然需要查看文档，查看文档的画布部分，并通过谷歌询问其他人是如何做到的。
在这个过程中，我发现我的表达和写作能力仍然很差。写入代码
调用wx CreateCanvasContext（canvasId，this）以形成画布。记住要保存执行上下文的统一性，也就是说，
同时，保持画布大小与屏幕一致
设置像素（）{
常量{
窗口宽度，
window高度
}=wx.getSystemInfoSync（）；
//将画布设置为与屏幕相同的大小
这宽度＝this.rpxToPx（700）；
这高度=this.rpxToPx（1040）；
const ctx=参数[0]；
ctx.setFillStyle（“白色”）；
ctx。fillRect（0，0，this.width，this.height）；
ctx.draw（）；
},
调用canvasContext.drawImage粘贴图片
downAndSetImage（ctx、url、arr）{
//arr=[x，y，宽度，高度]
arr=此.rpxToPx（arr）；
ctx.draw（真）；
return new Promise（（resolve，rej）=>{
wx.download文件({
url:url，
成功：函数（res）{
让路径=res.tempFilePath；
//ctx。drawImage（路径，arr[0]，arr[1]，arr[2]，arr[3]）；//它也在px//转换中
ctx.save（）；
ctx.draw图像(
路径
arr.shift（），
arr.shift（），
arr.shift（），
阵列移位（）
); // 它也在px//转换中
解决（1）；
ctx.restore（）；
},
失败：（）=>{
ctx.save（）；
wx.show模式({
标题：“提示”，
内容：'图像采集失败`
});
ctx.restore（）；
Rej（“图像采集失败”）；
},
});
});
},
调用canvasContext.fillText编写文本。
setText（ctx、text、arr）{
//arr:[x，y，字体大小]
ctx.draw（真）；
arr=此.rpxToPx（arr）；
return new Promise（（resolve，rej）=>{
arr.length==2？ctx。设置字体大小（14）：ctx.setFontSize（arr.pop（））；
ctx.setFillStyle（“黑色”）；
ctx.setTextBaseline（“顶部”）；
ctx。fillText（文本，arr.shift（），arr.shift（））；
解决（3）；
});
},
然后绘制并开始导出。记住此时使用jpg格式，因为png是以透明背景导出的。使用的API：wx canvasToTempFilePath（OBJECT，this）
//输出图像路径
输出图像（）{
const ctx=参数[0]；
常数=此；
常量{
窗口宽度，
windowHeight，窗口高度，
像素比率
}=wx.getSystemInfoSync（）；
return new Promise（（resolve，rej）=>{
wx.canvasToTempFilePath({
x： 0，
y： 0，
//宽度：50，
//高度：50，
destWidth:pixelRatio*windowWidth，//画布宽度*像素比率
