【总结】微信小程序的坑

代码仅供参考，如有不妥，欢迎指正交流。

目录
1.将图片保存到手机相册
2.setData无法set数组
3.文本标签（text）bindtap, bindlongtap无效
4. wx.showToast与icon
5.事件对象可携带额外信息(data-xxx)
6. 没有perspective，无法做透视图
7.无法禁止页面的上下滑动

1.将图片保存到手机相册：

网上查了一遍好像大家都不太做这个，文档也看不太懂（也许是本人智商问题），看了看琢磨了一下，感觉这样写应该还OK

wx.getImageInfo({
      src: this.data.mainImage,
      success: function (res) {
        console.log(res)
        var path = res.path;
        wx.saveImageToPhotosAlbum({
          filePath: path,
          success(res) {
            console.log("saved");
            wx.showToast({
              title: '保存成功',
              icon: 'success',
              duration: 2000
            })
          }
        })
      }
    })

2.setData无法set数组：

这个参考了这篇文章，然后例行贴代码，此处用法是把imageName数组中的name都加上url前缀还有thumb的后缀然后push到空数组里，最后直接set数组到this.data里，感觉乱的可以之前参考前边提到那篇文章。

let array = [];
    for (let i = 0; i < this.data.imageName.length; i++) {
      let param = {};
      let index = i;
      let url = this.data.url + this.data.imageName[i] + this.data.thumb;
      param["index"] = index;
      param["url"] = url;
      if (i == num) { param["checked"] = true; }
      else { param["checked"] = false; }
      array.push(param);
    }
    this.setData({
      imageList: array
    })

3.文本标签（text）bindtap, bindlongtap无效

文本标签（text）在父元素页是text的情况下无法绑定tap或者longtap，只能将父元素改为view。具体原因有待研究。

4. wx.showToast与icon

尽管小程序默认的icon有【success, success_no_circle, info, warn, waiting, cancel, download, search, clear】这么多(?)种，并且showToast中有icon这个选项，但是showToast只支持显示success和loading这两个icon，所以假使要提示用户图片没有保存成功，应该用啥？

这里写图片描述

5.事件对象可携带额外信息(data-xxx)

文档中的例子：

//wxml中
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

//在相应的js中添加事件处理函数
tapName: function(event) {
    console.log(event)
}

//log出的信息大概如下
{
"type":"tap",
"timeStamp":895,
"target": {
  "id": "tapTest",
  "dataset":  {
    "hi":"WeChat"
  }
},
"currentTarget":  {
  "id": "tapTest",
  "dataset": {
    "hi":"WeChat"
  }
},
"detail": {
  "x":53,
  "y":14
},
"touches":[{
  "identifier":0,
  "pageX":53,
  "pageY":14,
  "clientX":53,
  "clientY":14
}],
"changedTouches":[{
  "identifier":0,
  "pageX":53,
  "pageY":14,
  "clientX":53,
  "clientY":14
}]
}

应用：
此处主要是想实现一个点击按钮加盖印章的效果：
这里写图片描述

具体写法:

//wxml中(此处是写在template中，省略了其他一些内容，主要写按钮和印章)
<template name="indexTable">
    <image src="../../image/stamp1.png" class="stamp" wx:if="{{item.checked}}"/>
    <button bindtap="checkBtn" data-index="{{item.index}}"  wx:if="{{!item.checked}}">
    朕已阅
    </button>
    //statement...
</template >

//上边可以简单看出image和button的属性是由item的checked变量决定的。
//所以按钮上携带了一个叫做data-index的信息，它读取了item的index变量，
//可以在点击的时候夹带在event中。
//**此处有一点注意的是，这种可携带的信息必须是要以data-为前缀的。**
//所以在js中checkBtn函数如下，后边这几行主要为了set数组中对象的checked属性，原理参考本页第2点:
checkBtn: function(e){
    let n = e.currentTarget.dataset.index;
    n = this.data.finished.length-n-1;
    var param = {};
    var string = "finished[" + n + "].checked";
    param[string] = 'true';
    this.setData(param);
  }

6. 没有perspective，无法做透视图

具体请见鄙人写的【另一篇】

7.无法禁止页面的上下滑动

要知道，这对于设置了背景色的页面是很尴尬的。
如果页面中设置了什么需要左右滑动，页面就会乱跑。
比较完美的解决方式：【参考文章】
其实是无法彻底解决的，因为如果禁止后页面就无法scroll了，所以只适合内容比较少的页面。