支付宝小程序开发踩坑及总结（初级菜鸟）

使用rpx 被解析成 rem

.row.flexR 不等于 .row .flexR 有空格和没有空格是不一样的。没有空格是一个整体的，后一个不是前一个的子元素

（优雅的）回到顶部功能实现

使用透明度来做：距离顶部大于一定距离让他的 透明度为1（完全显示） 否则透明度是0（不显示），
这种方法比不是用透明度显示让他直接显示和消失，来的快一点，用户的体验好。而不是图片设置成 hidden 隐藏与否

 <image mode="widthFix" src="../../img/product/top.png" style="opacity:{{opacity}}"/>


// 获取滚动条当前位置
  onPageScroll(e){ 
    if(e.scrollTop>=400){
      this.setData({
        opacity:1,
        top:e.scrollTop
      })
    }else{
       this.setData({
        opacity:0
      })
    }
  }
 
 
 
 toTop(){
    var top=this.data.top
    var timer=setInterval(function(){
    top-=Math.ceil(top/5)
      my.pageScrollTo({
        scrollTop:top
      });
      if(top<=0){
        clearInterval(timer)
      }
    },10)
  },

form 表单 可以获取到 checkbox 有没有被选中 （提交的表单必须有 name 值，才能将数据提交成功。并在后面逻辑层 通过 e 来接受到传递回来的所有表单的值）

<form  onSubmit="formSubmit">
      <checkbox-group name="agree">
        <checkbox value="1"/>我同意并遵守
        <navigator url="/page/userProtocol2/userProtocol2">《支付宝缴费代扣协议》</navigator>
      与
        <navigator url="/page/userProtocol3/userProtocol3">《鲁通记账卡使用协议》</navigator>
      </checkbox-group>

  </view>
</form>
.js文件
formSubmit(e) {
    var form = e.detail.value;
}

创建动画（官方给的api my.creatAnimation ，自定义动画，显示与隐藏）

注意移动的距离，原点是相对于元素的本身的位置的盒子的左上角为 原点（0，0），坐标系，x轴向右为正，y轴向下为正

toproList() {
    var that = this;
    that.setData({
      show: false,
      xz: false
    })
    var animation = my.createAnimation({
      duration: 200, //动画的持续时间 默认400ms 数值越大，动画越慢 数值越小，动画越快 
      timingFunction: 'ease', //动画的效果 默认值是linear 
    })
    // 将 animation 对象挂载到 this 这个大的对象上
    this.animation = animation
    setTimeout(function() {
      that.fadeIn(); //调用显示动画 
    }, 200)
  },
  
  
  fadeIn: function() {
    this.animation.translateY(0).step()
    this.setData({
      animationData: this.animation.export() //动画实例的export方法导出动画数据传递给组件的animation属性 
    })
  },
  fadeDown: function() {
    this.animation.translateY(560).step()
    this.setData({
      animationData: this.animation.export(),
    })
  },

判断用户当前支付宝版本是否支持小程序中的某个组件的使用

基础库版本可以通过接口my.SDKVersion查看。
接口是否可用，可以通过接口my.canIUse查看。

if(!my.canIUse('web-view')) {
      my.alert({
        title: '提示',
        content: '当前支付宝版本过低，无法使用此功能，请升级最新版本的支付宝'
      });
    }

对象中属性更新需要注意

对于纯展示，没有交互的简单组件，文档模板中介绍的方法够用了。不过，由于这里的数据时data成员中的一个对象成员，更新的时候，要更新对象的全部成员，不能只更新部分，否则其他部分会被清空，这是JS的一个特性，需要注意。
下面的方法是错误的：

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})
----------------------------
this.setData({
   item: {
      msg: 'new template',
   }
}});

更新对象方法的性能比较：

const newItem = this.data.item;
newItem.msg = 'new template';
this.setData({
  item: newItem,
});

this.setData({
  item.msg: 'new template',
});

很显然第二种方式更性能更好