- 【Bug】小程序异步分包组件加载被阻塞,js执行出错!
小程序基础库版本要求: 基础库版本 > 2.25.4 时可复现 基础库版本 <= 2.25.4 时表现正常 问题描述及复现步骤: 1) 项目结构,项目分主包和分包(如下图),其中: 主包包含一些公共的,同步的基础组件,如 comp1、comp2、comp3 分包包含一些业务的异步组件,如 async-comp1、async-comp2、async-comp3 ... async-comp7 [图片] 2) 页面结构,包含页面元素、同步组件、异步组件,如下图: 2.1 所有的异步组件在组件的 attached 生命周期中抛出事件 this.triggerEvent('attached') [图片] 2.2 在页面所有的异步组件上监听 attached 事件并进行处理 [图片] 当事件处理器以同步的方式调用 setData 时,会导致部分异步组件的 attached 生命周期不触发, 如下图控制台 AppData 中可以看到,async-comp2、async-comp4、async-comp6 组件的 attached 生命周期不触发,在实际复杂的项目里,会直接表现为组件加载失败。 加载失败的组件表现出一定的规律,async-comp2为第一个监听 attached 事件的后一个组件,async-comp4、async-comp6 组件前都有一个同步组件。 [图片] 当事件处理器以异步的方式调用 setData 时,或小程序基础库版本 <= 2.25.4 时,表现正常,如图: [图片] 针对已上问题,如果是bug,希望官方能够及时修复或者给出解决方案,如果是 feature,麻烦说明其中原理,谢谢!
01-15 - 如何实现加入购物车的抛物线效果
一、场景分析 在一些如商城、点餐小程序中实现购物车抛物线效果可以提升界面趣味性增加小程序用户体验。 二、效果预览 效果图压缩后速度有点快,请下载代码片段预览 [图片] 三、实现原理 当用户点击物品时记录当前触摸点,根据触摸点计算抛物线运动的顶点位置,通过触摸点、顶点、购物车的位置计算出抛物线运动轨迹,然后控制 icon 运动。 计算购物车在当前手机内的位置 [代码]/** 设置购物车的坐标位置 **/ wx.getSystemInfo({ success: (res) => { let busPos = {} // x y 坐标分别取屏幕百分之八十的位置 busPos['x'] = res.windowWidth * 0.8 busPos['y'] = res.windowHeight * 0.8 this.setData({ busPos }) } }) [代码] 商品点击事件的处理 点击物品后记录点击的位置,然后根据点击位置计算出抛物线的顶点位置,计算方式为点击位置的上方+150,右边+150(需要根据点击位置是否在购物左边还是右边进行判断)。 根据点击,顶点,购物车三个位置计算出抛物线运动轨迹 以3个控制点为例,点A、B、C、AB 上设置点 D、BC 上设置点 E、DE 连线上设置点 F,则最终的贝塞尔曲线是点F的坐标轨迹; 计算相邻控制点间距; 根据完成时间,计算每次执行时 D 在AB方向上移动的距离,E 在 BC 方向上移动的距离; 时间每递增 100ms,则 D、E 在指定方向上发生位移,F 在 DE 上的位移则可通过 AD/AB = DF/DE 得出; 根据 DE 的正余弦值和 DE 的值计算出F的坐标。 开启定时器,依次按照贝塞尔曲线位置做动画位移 使用定时器将抛物线运动轨迹做动画位移。 定时器执行完动画后将购物车角标+1 老规矩,结尾放代码片段 https://developers.weixin.qq.com/s/PnYfitmG7Hxv
2022-03-04