那些年我们路过的小程序的神坑

iOS 默认的下拉回弹和上拉回弹（Android没有）

我们第一个遇到的问题是iOS的下拉回弹跟上拉回弹以及类似事件穿透（场景：我们在主页有个筛选按钮，点击按钮出现弹框，我们在上下滑动的时候看到弹框背后也在跟着滑动一上一下，而且可以一直拉结果拉到最顶端的时候在继续拉的话还会出现下拉回弹）经过一番查资料跟看文档之后，然后我们的解决方法是当弹框打开的时候给最外层标签position: fixed;

textarea、canvas、video 等组件层级最高无法撼动

这三个组件都有同一个问题，反正我是很不能理解为什么小程序要做这一层封装吧，可能是我的技术不够。为之奈何呀！有问题就得解决
textarea 的解决方式是最简单的把当时原本要放在屏幕顶部一直固定在那里的一个按钮不让它固定在那里了，放在了页面的最后面
canvas 的解决方式是当canvas生成的时候给它hidden弄一个image标签替换它的位置,废话不多说，直接看代码吧
model.wpy

<template>
  <image hidden='{{ !radarImageUrl }}' style='width: 100%; height: 300px;' src='{{radarImageUrl }}'></image>
  <canvas hidden='{{ radarImageUrl }}' canvas-id="radarCanvas" ></canvas>
</template>

<script>
  data = {
    radarImageUrl: ''
  }
   wx.canvasToTempFilePath({
    x: 0,
    y: 0,
    fileType: 'png',
    width: wx.getSystemInfoSync().windowWidth,
    height: 300,
    destWidth: wx.getSystemInfoSync().windowWidth,
    destHeight: 300,
    canvasId: 'radarCanvas',
    success: function (res) {
      this.radarImageUrl = res.tempFilePath
      this.$apply()
    },
    fail: function (error) {
      console.log(error)
    }
  })
<script>

对了，代码基于WePY框架
video 的解决方式是点击在页面中做一个视频的封面是图片，图片上定位一个播放的按钮，点击播放的按钮的时候跳到新页面在新页面中让视频自动播放

小程序中不支持长按识别二维码

我们的需求是在小程序中有个带有小程序码的图片需要长按识别、保存到本地以及发送给朋友。代码如下：

wx.previewImage({
  current: '', // 当前显示图片的http链接
  urls: [] // 需要预览的图片http链接列表
})

接下来长按就会出现下图这样的效果

我叫下图

关于WePY的数据绑定方式

WePY使用脏数据检查对setData进行封装，在函数运行周期结束时执行脏数据检查，一来可以不用关心页面多次setData是否会有性能上的问题，二来可以更加简洁去修改数据实现绑定，不用重复去写setData方法。代码如下：

this.title = 'this is title'

需注意的是，在异步函数中更新数据的时，必须手动调用$apply方法，才会触发脏数据检查流程的运行。如：

setTimeout(() => {
    this.title = 'this is title'
    this.$apply()
}, 3000)

WePY脏数据检查流程

在执行脏数据检查时，会通过this.$$phase标识当前检查状态，并且会保证在并发的流程当中，只会有一个脏数据检查流程在运行，以下是执行脏数据检查的流程图：

我叫流程图

最后编辑于：2018.03.14 08:53:20