微信小程序原生开发技巧及跳坑心得

常用功能

1、事件带参

在微信小程序中，给事件的回调函数内部传递参数不是通过函数调用传递实参的方式传递的，而是通过在view上绑定属性，然后在回调函数的事件对象的currentTarget属性中的dataset中获取的

• 视图

// index 为变量
测试

• 逻辑

Page({
  data: {
    ......
  },
  handle (e) {
    let name = e.currentTarget.dataset.name;
    let index = e.currentTarget.dataset.index;
    console.log(name); // "小程序"
    console.log(index);// 变量传递的值
  }
})

2、路由传参

在微信小程序中，带参数跳转页面是通过将参数拼接在url后面，然后在跳转到的页面的生命周期函数onLoad的参数option中获取。

• A页面

wx.navigateTo({
  // 无法传递对象，如果是对象则需要使用JSON.stringify()转换为字符串，在接受数据页面使用JSON.parse()转换成对象
  url: '/pages/approval_apply/index/index?id=' + id
})

• B页面

Page({
  data: {
    ....
  },
  onLoad: function(option){
    // 获取传递过来的参数
    let id = option.id
  }
})

3、获取/修改父级页面的数据|调用父级页面方法

小程序中有一个全局方法getCurrentPages()可以获取到打开的页面信息，进而获取到上一级的页面，就可以获取到上一级页面的数据和调用上一级页面的方法,以及更新上一级页面的数据。

• 父级页面

Page({
  data: {
    name: 'Pony'
  },
  getDataList () {
    console.log(this.data.name);// 'Pony'
  }
})

• 当前页面

Page({
  onLoad:function(){
    // 获取页面信息
    let pages = geturrentPages(); 
    // 获取当前页面
    let currPage = pages[pages.length - 1];
    // 获取上一级页面
    let prevPage = pages[pages.length - 2];
    // 获取上一级页面数据
    let prevName = prevPage.data.name; // 'Pony'
    // 调用上一级页面方法
    prevPage.getDataList()
    // 修改上一级页面的数据
    prevPage.setData({
      name: 'Jack'
    })
  }
})

4、上传图片(本地图|相机拍照)并预览和删除

• 图片上传

小程序提供了方便的图片上传api，使用wx.chooseImage方法可进行图片上传，在成功的回调中可以获取到临时的文件路径,然后可以通过文件管理apiwx.getFileSystemManager()的readFile方法将图片转化为base64，然后进行上传。同时由于小程序规定上传文件不能超过2M，因此也可以进行控制。

data: {
  imgList: []
},
......

uploadImg() {
  let that = this;
  let imgList = that.data.imgList;
  if (imgList.length < 3){ // 同时上传3张限制
    wx.chooseImage({
      sizeType: ['original', 'compressed'], // 设置图片上传类型，可以是原图，也可是压缩文件
      count: 3, // 规定上传图片张数，设置后在批量选取图片时，相册只能同时选择设定的值的张数
      success(res) {
        let tempFilePaths = res.tempFilePaths
        let tempFilesSize = res.tempFiles[0].size;//获取图片的大小，单位B  
        if ((imgList.length + tempFilePaths.length) <= 3) { // 分批上传总数超过3张限制（处理单独上传不足3张后，再次上传3张导致超出限制的bug ）
          if (tempFilesSize <= 2000000) { // 单张超过2M进行限制
            tempFilePaths.forEach(function (item, index) {
              wx.getFileSystemManager().readFile({
                filePath: item, //选择图片返回的相对路径
                encoding: 'base64', //编码格式
                success: res => { //成功的回调
                  imgList.push({
                    fileBytes: 'data:image/jpeg;base64,' + res.data
                  })
                  that.setData({
                    imgList: imgList
                  })
                },
                fail: (err) => {
                  wx.showToast({
                    title: err,
                  })
                }
              })
            })
          } else {
            wx.showToast({
              title: '上传图片不能大于2M',
              icon: 'none'
            })
          }
        } else {
          wx.showToast({
            title: '上传图片不能大于3张',
            icon: 'none'
          })
        }    
      }
    })
  } else {
    wx.showToast({
      title: '上传图片不能大于3张',
      icon: 'none'
    })
  }
}

注意：这种方式上传只是将图片转化为base64编码，并不是直接上传到服务器，因此可以先将图片的编码设置为data的数据，在上传回显时只需要将对应的编码赋值给image组件的src即可。

• 图片预览

图片上传后，通常需要进行预览上传效果，小程序也提供了api，可以通过wx.previewImage()方法查看上传图片

 previewImage(e) {
    let that = this;
    let index = e.currentTarget.dataset.index * 1;
    wx.previewImage({
      current: that.data.imgList[index], // 当前显示图片的编译后的base64地址
      urls: that.data.imgList
    })
  }

• 上传后删除

上传后删除很简单，直接删除存储图片地址数组对应的值即可

flieImgClose(e) {
  let that = this;
  let index = e.currentTarget.dataset.index * 1;
  let imgList = that.data.imgList;
  imgList.splice(index, 1);
  that.setData({
    imgList: imgList,
  })
}

5、附件(pdf|word|excel)预览

preViewFile (e) {
    let downloadUrl = e.currentTarget.dataset.url;
    wx.downloadFile({
      url: downloadUrl,
      success: function (res) {
        let filePath = res.tempFilePath
        wx.openDocument({
          filePath: filePath,
          success: function (res) {
            console.log('打开文档成功')
          },
          fail: function (res) {
            wx.showToast({
              title: '打开失败',
              icon: 'none'
            })
          }
        })
      },
      fail: function () {
        wx.showToast({
          title: '下载失败！',
          icon: 'none'
        })
      }
    })
  }

6、上拉加载更多

跳坑心得

1、下拉刷新后无法弹回

在小程序中有一个钩子函数onPullDownRefresh可以监听用户下拉动作，利用该钩子函数可以进行下拉刷新。在该钩子函数中调用获取页面数据的方法，就可以更新页面数据。但在实际开发中发现一个问题，就是下拉刷新后页面无法弹回原来的位置。

• 解决方法： 可以在获取页面数据的方法中，数据返回后主动调用wx.stopPullDownRefresh()方法可以解决该问题。

onPullDownRefresh: function() {
  this.getInitData()
},
getInitData () {
  // sendRequest为封装的发送请求的方法
  sendRequest({
    // .....
  }).then(res => {
    wx.stopPullDownRefresh()
    ...
  })
}

2、Input和textarea组件穿透自定义遮罩

3、cover-view组件覆盖视图设置透明度opacity无效

4、本地图片模拟器显示正常，真机无法显示