github精选 小程序个人踩坑汇总,并研究一些解决办法,github.com

来源:未知 浏览 148次 时间 2021-06-10 14:14

小程序现阶段缺陷还很多在安卓手机上的性能也是很糟糕估计实用性还不高。一步一步都是坑深圳谷歌优化估计实用性还不高。一步一步都是坑这里作为个人踩坑收集用(内含吐槽)也是经验分享欢迎issues讨论。框架部分1、残念的数 ...

 

 

 

小程序现阶段缺陷还很多在安卓手机上的性能也是很糟糕估计实用性还不高。
一步一步都是坑这里作为个人踩坑收集用(内含吐槽)也是经验分享欢迎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提升优先级强行覆盖不推荐因为会影响其他默认样式;

标签: 页面一级如果样式