小程序踩坑记录

小程序踩坑记录

小程序现阶段缺陷还不少，在安卓手机上的性能也是很糟糕，估计实用性还不高。

一步一步都是坑，这里做为我的踩坑收集用（内含吐槽），也是经验分享，欢迎issues讨论。

框架部分

一、残念的数据绑定

要实现页面数据响应必须经过setData设定值，若是直接设定data里的值则无页面响应。

不能像其余MVVM框架那样自动响应，无语也无解。

二、setData()没法进行动态数组操做

这也是因为js对象的key部分必定是字符串形成的。

setDate只支持对静态key的解析，没法传入参数实现动态遍历。

好比：

有一个数组须要更改其中的值，循环传入i将无效的，只能是固定数字。

for(var i=0; i<3; i++){
  this.setData({
      array[i]:‘hello’
    }
  })
}

若是你照上面这么写的话就会报下面的错误。

官方的意思就是只能这样写：

this.setData({
    'array[1]':‘hello’
  }
})

解决办法：

不在遍历中使用setData，能够先遍历修改完后再用setData完整赋值完成响应。

由于js里数组是地址传递，也就是说实际上已经修改了原数组，用setData只是为了响应页面。

三、路由设置必须有序

小程序的页面都必须在app.json注册，但这不是随便登记一下就好了，页面登记的顺序必定是有层级关系的。

若是你把首页放在了某二级页面后面，那就会报错，这个文档没写清楚真心坑爹。

"pages": [
  "pages/index/index",   //一级页面
  "pages/list/list",     //二级页面
  "pages/detail/detail", //三级页面
  "pages/msg/msg"        //额外页面
],

建议：

设计时页面分级要明确，排列按顺序，额外页面（好比提示成功或失败的页面）放最后。

四、wx.redirectTo(OBJECT)不可跳一级页

这个是关闭当前页跳转到指定页的功能，跳到一级页会致使导航栏消失，而且该一级页会被当成一次跳转。

小程序最多五层跳转，正常一级页不会算入，但若是一级页也被当成一次跳转，那使用几回后就不能动了，由于五次满了，很是危险。

这点在新的官方文档已经说明，并提供wx.switchTab(OBJECT)跳转到一级页面，不过因为wx.switchTab(OBJECT)不能传参，使用仍是比较有限的。

五、发起POST请求必须改默认参数

默认header['content-type'] 为 'application/json'，在get请求中没有问题。

但若是想要发起POST就必须将header['content-type'] 为 'application/x-www-form-urlencoded'，不然就收不到返回数据。

wx.request({
  url: 'test.php', //仅为示例，并不是真实的接口地址
  data: yourData,
  header: {
      'content-type': 'application/x-www-form-urlencoded' //这里必须改
      },
  success: function(res) {
    console.log(res.data)
  }
})

六、wx.setNavigationBarTitle(OBJECT)的调用时机

这个是改变页面标题的接口，必须在onShow触发时才调用。

若是在onLoad触发时调用，只会一闪而过，而后又变成页面配置json里的名字或全局配置json里的名字。

建议：

小程序这样的设计体验不是很好，每次都会一闪而过的更名字，若是要避免这种状况就只能在配置json中设置了，不过这样是静态的。

样式部分

一、不支持部分选择器

样式部分的缺陷是比较严重的，不支持相邻兄弟选择器，不支持级联选择器。。。

解决办法：

这个暂时无解，只能说改变一下样式命名的习惯，使用横杠链接体现层次，虽然这样盒子多起来会变得很长。

若是使用预处理，好比我用SASS能够这样写，稍微省点力：

.list {
  padding: 20rpx;
  &-name {
    color: red;
    &-number {
      color: blue;
      &-info {
        font-size: 16rpx;
      }
    }
  }
}
// 编译结果
.list {
  padding: 20rpx;
}
.list-name {
  color: red;
}
.list-name-number {
  color: blue;
}
.list-name-number-info {
  font-size: 16rpx;
}

二、button没法正常改样式

使用button标签默认是没法更改样式，加上类名也会由于优先级问题不能覆盖原样式，搞不懂这样设计的用意，十分不便。

解决办法：

1. 能够经过!important提高优先级强行覆盖，不推荐，由于会影响其余默认样式；
2. 也能够仿照默认样式写法，进行覆盖，基本须要覆盖的样式以下（以primary为例，其余的以此类推），加上[plain]或[size="min"]便是其余镂空版和缩小版的样式；
3. 推荐作法，尽可能不破坏原有样式，能够自定义一个type，而后仿照默认样式的写法，就能够自定义button了；
4. 使用view仿照一个button，把默认的样式复制一份便可，会增长无心义的代码量，并且没有默认的交互事件(active)。

类名	触发时机
button[type="primary"]	通常样式
button[type="primary"].button-hover	按下（弹起）瞬间样式
button[type="primary"]:not([disabled]):active	按下样式（可选，没有则使用上面的做为按下样式，[plain]默认有，需覆盖）
button[disabled][type=" primary"]	禁用样式

按下操做触发顺序是：

button[type="primary"] > button[type="primary"].button-hover > button[type="primary"][plain]:not([disabled]):active

三、button的默认边框

button的默认边框是使用after伪类，新建了一个2倍大小的空白content，设置了border，再缩小为0.5倍，恰好盖在元素上面，下面就是默认按钮的样式。

这是一种为了在不一样设备实现1px的作法，但自己小程序就有rpx啊，还用这鸡肋的办法让人不解（笑）。
也给更改button样式一点阻碍，须要把after设置display:none才能去掉边框。

四、button不一样设备上表现差别

1. 真机上会出现button内文字高度偏高的问题（安卓机，iOS未测），而模拟器上表现正常（居中），尝试覆盖默认样式进行修正（改成padding撑开盒子的方法代替原来的line-height），并无效果。因此暂无解决办法；
2. min按钮在真机上会出现左右边框消失的状况，暂无解决办法。

五、rem在真机设备上的表现有差别

即便在根元素page上设置了字体大小，rem在不一样设备上的表现仍是没法统一。

建议：

使用rpx做为响应式字体的单位，效果比较好，rpx做为小程序的特性仍是在不一样设备的表现上仍是很实用的。