小程序踩坑记录

lily_wang 发布于2019-08-20 15:41 / 3141人阅读

摘要：小程序踩坑记录小程序现阶段缺陷还很多，在安卓手机上的性能也是很糟糕，估计实用性还不高。路由设置必须有序小程序的页面都必须在注册，但这不是随便登记一下就行了，页面登记的顺序一定是有层级关系的。

小程序踩坑记录

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

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

框架部分 1、残念的数据绑定

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

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

2、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只是为了响应页面。

3、路由设置必须有序

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

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

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

建议：

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

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

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

小程序最多五层跳转，正常一级页不会算入，但如果一级页也被当成一次跳转，那使用几次后就不能动了，因为五次满了，非常危险。

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

5、发起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)
  }
})

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

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

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

建议：

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

样式部分 1、不支持部分选择器

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

解决办法：

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

如果使用预处理，比如我用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;
}

2、button无法正常改样式

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

解决办法：

可以通过!important提升优先级强行覆盖，不推荐，因为会影响其他默认样式；

也可以仿照默认样式写法，进行覆盖，基本需要覆盖的样式如下（以primary为例，其他的以此类推），加上[plain]或[size="min"]即是其他镂空版和缩小版的样式；

推荐做法，尽量不破坏原有样式，可以自定义一个type，然后仿照默认样式的写法，就可以自定义button了；

使用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

3、button的默认边框

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

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

4、button不同设备上表现差异

真机上会出现button内文字高度偏高的问题（安卓机，iOS未测），而模拟器上表现正常（居中），尝试覆盖默认样式进行修正（改为padding撑开盒子的方法代替原来的line-height），并没有效果。所以暂无解决办法；

min按钮在真机上会出现左右边框消失的情况，暂无解决办法。

5、rem在真机设备上的表现有差异

即使在根元素page上设置了字体大小，rem在不同设备上的表现还是无法统一。

建议：

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

GPU云服务器云服务器小程序小程序小程序附近小程序门店小程序小程序小程序打开小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82414.html

mpvue实现微信小程序（欢迎踩坑）

摘要：最近刚使用完成了微信小程序的开发，写点东西，做个记录。专门用于外链跳转但是外链跳转还是个坑，微信仅能支持跳到在它那边注册过的的网址，其他还是不行，暂时没有找到好的方式看了知乎，它的外链直接转成了文本，不可点击了。最近刚使用mpvue完成了微信小程序的开发，写点东西，做个记录。首先依旧是两个传送门：微信小程序文档:[https://developers.weixin.qq.com/...

jas0n 2019-08-29 16:21 评论0 收藏0
mpvue实现微信小程序（欢迎踩坑）

摘要：最近刚使用完成了微信小程序的开发，写点东西，做个记录。专门用于外链跳转但是外链跳转还是个坑，微信仅能支持跳到在它那边注册过的的网址，其他还是不行，暂时没有找到好的方式看了知乎，它的外链直接转成了文本，不可点击了。最近刚使用mpvue完成了微信小程序的开发，写点东西，做个记录。首先依旧是两个传送门：微信小程序文档:[https://developers.weixin.qq.com/...

xuexiangjys 2019-08-23 10:56 评论0 收藏0
mpvue实现微信小程序（欢迎踩坑）

摘要：最近刚使用完成了微信小程序的开发，写点东西，做个记录。专门用于外链跳转但是外链跳转还是个坑，微信仅能支持跳到在它那边注册过的的网址，其他还是不行，暂时没有找到好的方式看了知乎，它的外链直接转成了文本，不可点击了。最近刚使用mpvue完成了微信小程序的开发，写点东西，做个记录。首先依旧是两个传送门：微信小程序文档:[https://developers.weixin.qq.com/...

notebin 2019-08-02 11:13 评论0 收藏0
微信小程序开发踩坑总结（持续完善中）

摘要：由于个人技术水平有限，在问题描述，解决方案中存在的问题，希望可以得到各位前辈的指点。本篇主要是记录我在开发微信小程序中遇到的问题。各记录点排序，跟随自己开发过程中的问题出现时间而定。。微信小程序数据页面数据传递总结由于个人技术水平有限，在问题描述，解决方案中存在的问题，希望可以得到各位前辈的指点。本篇主要是记录我在开发微信小程序中遇到的问题。各记录点排序，跟随自己开发过程中的问题出现...

tianhang 2019-07-01 12:38 评论0 收藏0
FE.WX-小程序“无聊广场”游戏前端性能优化与踩坑攻略

摘要：本文主要针对小程序无聊广场的前端开发内容做总结，记录常见的一些老生常谈的进阶手法，对小程序中的动画音频等踩坑做出解决方案。背景一个交互不复杂，对刷新频率和动画效果要求不高的小游戏，不需要使用canvas主导的解决方案，使用dom操作一样可以完成。节省了cocos creater的学习成本，值得一试。本文主要针对小程序无聊广场的前端开发内容做总结，记录常见的一些老生常谈的进阶手法，对...

qpal 2019-08-22 18:26 评论0 收藏0