小程序开发填坑之路（一）

前言

       在小程序的开发过程中，有许多效果或接口在开发者工具上可以达到，但是放到移动端就会出现意想不到的问题。所以在下面记录一下自己在开发过程中踩过的坑以及解决方案。

填过的坑

1、canvas层级问题

       主要是做了一个小程序，是关于给图片加水印什么的，然而正常的思路就是当点击水印按钮是，画布上边会出现一个输入框（input），然后向输入框里填入水印数据即可完成水印的添加，这个方法在开发者工具上面展现的很完美。但是，将小程序发布放到移动端后就出现了问题，点击水印按钮后画布上输入框不显示，查询了好久才发现，小程序的canvas在移动端无论怎样层级最高，所以输入框被canvas覆盖掉无法显示。那么如何解决添加水印，就是在canvas的下方或上方显示输入框，然后监听输入框数据的改变（bindinput），然后执行canvas绘画的方法，将文字画到canvas上边。

2、canvas文字（水印）实现拖动的问题

       不管是图片拖动还是文字拖动，都要在Data里面存储它们的基本信息（坐标、内容信息、高宽等），然而要实现拖动效果都会用到canvas的方法bindtouchstart、bindtouchmove、bindtouchend方法（这些方法都会返回你的手指所触碰的点的坐标信息），bindtouchstart要做的事情就是判断你第一次按下的点的坐标是否在文字范围内（这个范围就是根据基本信息算出来的），如果是打开一个开关（比如canMove = true），然后拖动就执行了bindtouchmove方法（返回你的手指所在点的坐标信息），根据这个方法返回的信息，计算并修改文字的坐标信息，然后画到canvas上边，这样就实现了canvas拖动效果。

3、在canvas上画绘画网络图片的问题

   首先要确定一点的是drawImage()是不支持绘画网络图片的，那么，我要画的图片是网络资源应该怎么画？既然drawImage()只支持绘画本地资源，那么我们就将网络资源转换成本地资源即可，转成本地资源不是下载，用wx.getImageInfo()方法它会返回一个path，这个path就是图片本地缓存的路径，获取它的信息，绘画到canvas上边即可。

4、将canvas数据生成图片保存到本地的问题

       这个思路很简单，就是执行wx.canvasToTempFilePath()方法，返回一个res.tempFilePath，然后根据这个tempFilePath执行保存到本地相册的方法即可实现保存（那个方法是wx.saveImageToPhotosAlbum()，可不是wx.downloadFile ()）。

5、wx.uploadFile返回的数据为json式的字符串

       这个要根据具体的实际情况作出相应的措施，值得一提的在移动设备上JSON.parse()是不能用的，我的这个小程序是json数据里边有一个tip字段，当满足一定条件时，我请求一个接口服务器会给我发送一个{“success”:”true”,”tip”:”1”}的json数据，平常的都是{“success”:”true”}，所以我在这里就是判断了一下”tip”在不在，（res.data.indexOf("tip") != -1）这个样子，这个也是一个解题思路（反正我的问题解决了）。

6、判断多个异步接口都执行完毕的问题。

       在开发过程中，我遇到了批量上传的问题，然而wx.uploadFile()是异步请求，等它们执行完，会统一执行一个“B”方法，怎么才能得知他们都执行完了？

一个是用官方给的uploadTask，用这个判断进度，执行一个判断（我没有用这个）。

第二个是我自想的一个，既然是批量上传那肯定会有批量的长度n，那就一开始定义一个字段flag = 0，wx.uploadFile()成功以后就flag + 1，然后最外层后一个死循环while(true)，在里面判断flag是否等于n，一旦等于n执行“B”方法break，就OK了。