PS:关于小程序的文章想写很久了，但是由于小程序一直在开发的原因，一拖再拖，趁现在有点时间起个头先。
本遇坑指南不会过多介绍小程序内的一些功能怎么用，因为如果想知道功能的话可以去隔壁小程序官方文档（https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html），里面的文档写的非常完整易懂。这里主要是一些文档没有告诉你的东西，我在实际开发中遇到的坑，以及对应的解决方案，希望能帮助到正在踩坑的人。
一、Button样式问题
有时候我们需要用到表单组件来收集formID，跳转到客服页面，但是button原生的组件会比较不符合设计的需求，所以需要替换掉button自带的样式，然后再进行样式的更改，代码如下
wxml:
<form bindsubmit="subForm" report-submit="{{true}}">
<button type="primary" hover-class="none" class="out-btn" formType="submit">
<view class="sub-btn">提交</view>
</button>
</form>
wxss:
button{
background-color:transparent;
padding:0;
margin:0;
display:block;
border:0;
border-radius:0;
z-index: 10;
}
button::after{
content:'';
width:0;
height:0;
-webkit-transform:scale(1);
transform:scale(1);
display:none;
background-color:transparent;
}
二、canvas画图的坑
在有些场景下可能会有前端小程序画图的需要，比如说要生成如下订制版分享的二维码图片并保存到相册
案例图片
这是我在轻芒上找的一个例子，这种生成分享图的需求还是很常见的。红线画出来的区域是是一些图片的资源，这样要画上去的话就需要用到一个canvas的API,
ctx.drawImage（注意：ctx就是官方文档中的canvasContext，canvas上下文），这个API接受的第一个参数就是图片的资源。
划重点了，这个图片的资源一定得是本地图片才能画在画布上，例如（'../../static/images/qrcode.png'），如果是网络图片链接就会在画布上出现黑色的一块什么都没有，所以在调用这个API之前得对网络图片进行一步下载处理
getDrawImage: function (picUrl) {
return new Promise(resolve=>{
wx.downloadFile({
url: picUrl,
success: (res) => {
let picLocal = res.tempFilePath;
resolve(picLocal);
}
})
})
},
我在这里封装了一个函数专门来在调用网络图片前使用，因为下载是异步的，所以用到了promise。
在画图，画文字都画完后就是转换canvas画布成图片了，在这一步也遇到了一个坑，是API调用的问题，话不多说贴代码：
saveImg() {
wx.showToast({
title: '生成中...',
icon: 'loading',
duration: 10000
})
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 375, //这里必填
height: 543, //这里必填
destWidth: 750,
destHeight: 1086,
canvasId: 'myCanvas',
success: (res) => {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
wx.hideToast();
wx.showToast({
title: '保存成功！',
icon: 'success',
duration: 1500,
mask: true
})
}
})
}
})
}
代码中注释的地方在官方文档中是不需要必填的选项，但是如果真的不填的画，画出来的也会出问题（附文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/canvas/temp-file.html）。
未完待续。。。
网友评论