小程序开发指南（一）
小程序开发
浏览：946 次
PS：我想写关于小程序的文章很长时间了，但我一直在拖延，因为他们一直在开发它们。
本次邂逅指南不会过多介绍如何使用小程序中的一些功能，因为如果你想了解功能，可以去隔壁小程序的官方文件（），该文件非常完整，易于理解。以下是文档没有告诉您的一些事情，我在实际开发中遇到的陷阱，以及相应的解决方案。我希望他们能帮助那些踩着陷阱的人。
1、 按钮样式问题
有时我们需要使用表单组件来收集表单ID并跳转到客户服务页面，但按钮的本地组件不符合设计要求，因此我们需要替换按钮的样式，然后更改样式。代码如下
wxml：
wxss：
按钮{
背景色：透明；
填充：0；
边距：0；
显示：块；
边框：0；
边界半径：0；
z指数：10；
}
按钮：：之后{
内容：“”；
宽度：0；
高度：0；
-webkit转换：缩放（1）；
变换：缩放（1）；
显示：无；
背景色：透明；
}
2、 帆布绘图坑
在某些情况下，前端小程序可能需要绘制图片，例如，生成以下自定义二维码图片并将其保存到相册中
案例图片
这是我在青芒上找到的一个例子。生成共享地图仍然很常见。红线绘制的区域是一些图片的资源，因此需要使用画布API来绘制，
ctx。DrawImage（注意：ctx是官方文档中的画布上下文）。此API接受的第一个参数是图像资源。
需要指出的是，在画布上绘制该图像之前，该图像的资源必须是本地图像。例如，（“../../static/images/qrcode.png”），如果它是一个网络图像链接，画布上会有一个黑色的块，没有任何内容，因此您必须在调用此API前一步下载网络图像
getDrawImage:函数（picUrl）{
return new Promise（解决=>{
wx.download文件({
url:picUrl，
成功：（res）=>{
让picLocal=res.tempFilePath；
解析（picLocal）；
}
})
})
},
我在这里封装了一个函数，以便在调用网络映像之前使用。因为下载是异步的，所以使用了promise。
绘图和文本完成后，画布将转换为图片。在这一步中，我们还遇到了一个陷阱，即API调用问题。我们不太谈论代码：
保存Img（）{
wx.showToast({
标题：“正在生成…”，
icon:'加载'，
持续时间：10000
})
wx.canvasToTempFilePath({
x： 0，
y： 0，
宽度：375，//此字段为必填字段
高度：543，//此字段为必填字段
目标宽度：750，
destHeight:1086，
canvasId:“myCanvas”，
成功：（res）=>{
wx.将图像保存到相册({
文件路径：res.tempFilePath，
成功：（）=>{
wx.hideToast（）；
wx.showToast({
标题：'保存成功！'，
icon：“成功”，
持续时间：1500，
掩码：真
})
}
})
}
})
}
官方文件中不需要代码中的注释，但如果不填写图纸，图纸也会出现问题（请附上文件地址：）。
待续。。。
