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

前言

自从开始开发小程序之后，把把遇坑，不仅仅是wxml前端显示问题，还有js方面问题，特别是小程序API的使用技巧，下面主要记录关于数据处理方面的坑。

填过的坑

1、数据缓存的问题

       我开发小程序过程中，遇到的就是缓存多个网络图片的问题，当用户点击其中的一个图片要将其绘画到画布当中，然而画布不支持网络图片的绘画，所以要将点击的图片缓存到本地，这个时候就出现了问题：当我点击其中一个图片，要判断这个图片是否缓存，要是有缓存就不做网络请求这一块（毕竟网络请求会相对很慢），要是没有就做，直到这里都没什么毛病，但是当用户清理手机之后，再次打开小程序，再次点击图片，发现画布不绘画了，这个的原因就是小程序里的Storage数据被清理了，而key值依然存在，value值找不到图片相对应的url，所以才画布才不执行绘画。那么如何解决这个问题，我的一个笨方法就是当这个页面卸载时就执行清除缓存的命令（wx.clearStorage()），防止以后再次出现不绘画的情况。

2、使用setData()的细节处理

       通常地，我们的代码书写习惯是每一个方法执行各自的功能模块，比如：获取图片信息是一个方法，画布绘画是另一个方法这个样子。我们还拿canvas为例，说：我选择了一个图片，要在canvas上边绘画出来，然而这个canvas宽度和高度是不固定的（因为要适应不同手机），所以要在data里面存一个cInfo来记录canvas的高宽信息。在代码端就是先执行一个获取canvas信息的一个方法（我们下文叫getCanvasInfo()），然后通过setData()将获取的信息存入cInfo，然后再执行绘画方法（下文我们叫作drawCanvas()），所以通常地我们肯定就是这样写：

getCanvasInfo(){

    //获取信息的语句

    *********

    //获取完之后就是setData

    this.setData({

         cInfo : ***

    })

    //然后在下边或外边执行绘画方法

    this.drawCanvas()

}

然而像上边这样的代码执行方式往往是达不到预期效果的，愿意就是setData()是异步的，set的数据不能立刻生效，所以我们要怎样完美的达到预期效果那？那就要用到回调，看下方示例：

getCanvasInfo(){

    //获取信息的语句

    *********

    //获取完之后就是setData
    this.setData({

        cInfo : ***

    }, function(){

    //在回调中执行绘画方法 请自觉忽略下面this.的错误，为了快速表达含义才这么写的

        this.drawCanvas()

    })

}

这样就能完美的实现预期效果。类似于这样的回调，在小程序开发中还是经常用到的。

3、获取openId的问题

       网上都说是调用一个接口“https://api.weixin.qq.com/sns/jscode2session”，对，这个接口是没错，在开发者工具上调试的时候可以用，但是在小程序真正发布的时候是不能用的，因为这个接口是放在服务器端用的。

4、传值的问题

       ①、页面间传值：

       传值和HTML一样，都是? &的形式。

       wx.redirectTo({

              url: '../addUserInfo/addUserInfo?flag=1'

        })

   下一个页面接收传值

        onLoad: function (options) {

              var flag = options.flag

        }

    ②、服务器传值：

        GET请求 

        header 用 'Content-Type': 'json'

        POST请求 

        header 用 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'

    其中charset=utf-8 防止中文乱码

5、小程序中执行自己书写的回调方法

       举个栗子：

A:function(e){

    //do something …

    typeof e == "function" && e()

},

B:function(){

    console.log(“Do B function”)

},

onReady: function () {

    A(B)

}

写的简单了点，但是这样就能完成回调（和HTML里面有点不一样）。