小程序-----小程序遇到到坑

901 阅读3分钟

小程序navigator问题

  • navigator的open-type属性 可选值 'navigate'、'redirect'、'switchTab',对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能
  • open-type="navigate"等价于API的 wx.navigateTo 而wx.navigateTo的url是需要跳转的应用内非 tabBar 的页面的路径
  • open-type="redirect"等价于API的 wx.redirectTo 而wx.redirectTo的url是需要跳转的应用内非 tabBar 的页面的路径
  • open-type="switchTab"等价于API的 wx.switchTab而wx.switchTab的url是需要跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
  • 最后一个switchTab事件触发以后 把前面的页面都关闭了

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中设置了,不过这样是静态的。