微信小程序开发注意点和坑集

时间:2023-03-09 16:34:25
微信小程序开发注意点和坑集

开发(Tips)

 

避开频繁setData *

小程序端对于频繁的逻辑层和显示层的交互很不友好,特别是安卓机,与浏览器上js直接操作DOM不同,小程序通过逻辑更新显示层并不完全实时,开发者应避免出现频繁setData以达到某种视觉效果的操作,如有需要,直接使用框架或页面自带的组件。

组件化开发和分包加载

官方对小程序本身大小的限制为:

▪  整个小程序所有分包大小不超过 8M

▪  单个分包/主包大小不能超过 2M

为节省代码和方便团队协作开发,应尽量采用组件化开发方式,业务上更好地解耦协作,考虑控制主包不超过2M大小和优化首页加载速度,应优先使用分包加载。


调试(Tips)

 

避开请求域名以及 TLS 版本校验

        ▪  开发者工具右上角“详情”

        ▪  手机端右上角  ···  ->  打开调试


框架坑)

enablePullDownRefresh

Q: 页面开启下拉刷新,下拉刷新时ios会出现页面向上弹一下再回弹的情况。

S: 下拉刷新的时候不要同时调用wx.showLoading。


组件坑)

web-view

Q: web-view组件没有完全覆盖页面,底部留有空隙。

C: 造成上面情况的前提是小程序配置有tabBar且小程序的初始页面为tabBar的其中一个tab,后面打开web-view页面时,web-view高度计算为当前页面减去底部tabBar的高度,所以底部留出了tabBar高度的空隙。

S: 初始页面为非tab页面再进行跳转到tab页面。

Q: 小程序端首次授权拿不到faiOpenid导致卡包中心列表中没有奖品记录。

S : 在小程序里拿到unionid通过参数带到web-view中,再在游戏端做关联逻辑处理。

input

Q: 当删除文字时,部分安卓机会监听两次,第一次是空字符串,第二次才是当前文本。

S: 对input的监听进行函数防抖操作,如设置300ms的防抖时差,即bindinput获取到input的内容值后300ms内如果没有再触发一次input事件,那么就对当前的值进行下一步操作,从而避开上述的空字符场景。

Q: 在小米8上,input组件无法被弹起,特别是fixed悬浮在底部时。

button

Q: 无法去除边框

S: 添加伪元素样式,代码如下:

button::after{
  border: none; 
}

textarea

A : textarea组件是使用元素组件层级最高,导致在使用是出现各种问题

swiper

A : 将swiper组件当tab导航使用时,在它的内容层级使用swiper-view组件, 当点击tab导航时,改    current,触发swiper的 bindchange时,使用setData改变current会导致鬼畜。更改swiper-view为view,判断sourc操作来源,可以在一定程度上解决问题。


接口坑)

 

wx.navigateBack

Q: 在安卓机下,从页面pageA中navigateTo进入到pageB,在pageB的生命周期函数onLoad或onShow中调用wx.navigateBack会出现小程序直接退出的情况。

S: wx.navigateBack的使用改为在onReady中可一定频率上避免,但不能100%避免,如果真有必要进行以上逻辑,可多做一步setTimeout延时操作。

wx.getUserInfo

A: 官方对此接口做了调整: 当用户未授权过,调用该接口将直接进入fail回调,而不会再出现授权弹窗,目前体验版和开发版已做此调整,线上暂时没做调整,预计后面会进行过渡调整,后面开发应以新的接口方案做流程,改用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作。

selectorQuery.select

A: 通过selectorQuery拿到元素的信息时应注意,对于被撑开的容器,当该容器内部存在独立组件时,所拿到的容器高度不一定准确,推测计算原理是遍历容器内元素,但组件内信息无法直接获取。

wx.setBackgroundColor

Q: 在IOS端设置backgroundColor参数有时会失效。

S: 在onload生命周期函数中设置可一定程度避免失效,最好是同时设置backgroundColor,backgroundColorTop,backgroundColorBottom。


样式坑)

 

transform

A: 一些版本的小程序只支持translate和translate3D,对于translateX/Y/Z不支持。

image

Q: 设置image为圆角时,加载图片后会先删一下再变成圆角。

C: 图片加载后触发页面大面积绘制,页面来不及反应造成渲染掉帧/卡帧。

S: 使用GPU加速,代码如下:

image{
    will-change: transform;
}

inline-block

Q:ios下,相邻的两个块用了inline-block,第二个元素位置会比预期的位置要低很多。

S:使用float或者flex或者absolute布局,让此元素变成块。

position : fixed

Q:开启下拉刷新后,ios端fixed元素不会随页面下拉刷新而向下移动,从而挡住了加载样式。

S:在ios端动态设置fixed元素的position,当页面滚动 scrollTop < 0 时,将元素position设为absolute。(已弃用)

S:使用 position : sticky ,该布局相当于 fixed 和 absolute 的结合版,详情见 http://www.css88.com/book/css/properties/positioning/position.htm(低版本安卓可能不支持该属性值,部分版本因为内核的变换也可能不支持,故要做好兼容处理,可用fixed做兼容)