微信小程序开发大坑总结

1. scroll-view在android下需要设置容器overflow-x:scroll才能正常滚动,例如(华为P9不可用),要注意各种兼容性;


2. 页面间跳转的大坑:

问题描述:小程序中,当使用navigatorTo达到5层(或更多,未发现规律)后,所有通过navigatorBack回来的页面中按钮,出现点击后都没有响应的情况;

截止到(2019-01-29)这种情况没有发生,不知是不是微信已经优化过这个Bug了。


A.若都使用navigatorTo,会出现不知跳转几次后,所有的跳转都会失效;

B.使用redirectTo来进行代替,会销毁当前页面;

C.使用reLaunch会销毁所有页面;

------所以建议交替使用这几种跳转方式;

但是B和C会,页面销毁,即getCurrentPages()中出栈,会导致手机的返回键失效;


3.小程序里的变量必须使用var 或 let声明,否则,在预览、体验版、正式环境上会报错,但是,在微信开发IDE、真机调试下不会出现问题;

出现这种情况,会导致,在app.json中这个出错页面下面的所有路由都不能被加载;


4.使用wx.showToast()方法时, 如果不是正向的(成功的)的提示,要设置icon:'none' 去掉默认【对勾】的图标;


5. 除了wx.showModal外,其他都有mask属性,需要把它设置为true,防止提示中点击其     他操作按钮或链接;


6. 使用textArea 组件时,输入文字后,如果屏幕上下滑动时,会导致文字在其他元素上面,它的index极高,设置index也无效;


目前采取的措施是:

1.输入时用textArea组件,同时把输入的内容存储下来,输入完毕显示时,使用view来展示;

2.滑动时通过hidden将其隐藏,反之,显示;


7.加载页面的数据接口,最好写在onShow()生命周期里(setData不会触发onShow),这样如果使用navigatorBack时后也能加载最新数据; onLoad()只能加载一次;


8. 问题:swiper里加了bindchange事件,有很多个swiper-item,连续快速切换swiper-item触发bindchange事件,小程序会出现一直无限触发bindchange事件?


使用swiper组件时,在bindchange事件内要判断下event.detail.source 属性,判断后再去改变setData current的值;

current 改变时会触发 change 事件,event.detail = {current: current, source: source}

  • autoplay 自动播放导致swiper变化;

  • touch 用户划动引起swiper变化;

  • 其他原因将用空字符串表示-------这种情况是有人不断快速的左右滑动导致

9. 如果有底部Fixed的按钮元素,需要针对iphoneX 做兼容处理,防止按钮被iphoneX底部的横杠穿过遮挡;


10.  微信H5移动端真机调试--vConsole

https://blog.csdn.net/weixin_36934930/article/details/79870240


11. 关于兼容低版本小程序,图片setData相关src的url后,不渲染显示的问题(列表循环出来的,因为不涉及更改url,所以没问题),需要:

把这种书写方式:

<image src="{{orderItemSkuVo.url ? 'https:' + orderItemSkuVo.url : defaultPic}}"></image>

替换为:

<block wx:if="{{orderItemSkuVo.url}}">

     <image src="{{'https:' + orderItemSkuVo.url}}"></image>

</block>

<block wx:else>

     <image src="{{defaultPic}}"></image>

</block>


12. 关于使用template的时候,传值的注意事项:

比如,如果突然有一天需要给temlate传递个新属性,则像下面直接添加新属性activeBuy就好:

<view wx:for='{{buyStatusObj[0].dataList}}' wx:key="{{item.orderNo}}" wx:for-item="itemName">

      <template is="buyOrder" data="{{...itemName,activeBuy}}" />

</view>

如果像下面这种情况,可就不能处理了(下面直接把for循环里的对象吐给template了,如果此时再想加个新属性可就难办了):

<view wx:for='{{buyStatusObj[0].dataList}}' wx:key="{{item.orderNo}}" wx:for-item="itemName">

      <template is="buyOrder" data="{{itemName}}" />

</view>


13. 考虑到编写小程序页面时,有的页面可能从其他地方拷贝过来的,而不是在app.json中配置后自动生成的,此时,就是app.json中未配置,但是页面文件却存在,这种情况会导致:

老版本的微信中根本无法打开小程序(一片空白),控制台会直接报错,要规避这种问题

1:自己开发的页面的页面要谨慎核对,确保页面都在app.json中配置;

2:有老版本的微信可测试比如微信6.6.2版本及以下(我们测试出现问题的版本)


14. 当调起微信支付后,如果点击 X 号,取消支付,app.js中的onLunch和onShow也会执行,要注意是否有必要重复执行里面的方法


15. 当涉及订单提交、金额提现重大操作时,要设置防重复点击(可用节流函数)


16.在iphone X上渲染列表会花屏的问题,如下图,原因是使用了 filter:grayscale(); 去掉 filter 属性问题就消失了,所以,小程序中使用属性filter要格外注意。渲染问题.jpg

猜你喜欢

转载自blog.51cto.com/mamadu/2347449