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