- 如何彻底解决小程序滚动穿透问题
背景 俗话说,产品有三宝:弹窗、浮层加引导,足以见弹窗在产品同学心目中的地位。对任意一个刚入门的前端同学来说,实现一个模态框基本都可以达到信手拈来的地步,但是,当模态框里边的内容滚动起来以后,就会出现各种各样的让人摸不着头脑的问题,其中,最出名的想必就是滚动穿透。 那么,什么是滚动穿透呢?滚动穿透即:移动端弹出fixed弹窗的话,在弹窗上滑动会导致下层的页面跟着滚动,这个叫 “滚动穿透”。了解了什么是滚动穿 透以及它出现的场景,那么,接下来就直接进入正题。 那我们如何解决该问题呢? 页面最外层view设置position: fixed;页面不可滚动,但是这个时候会导致页面回到顶部(不推荐)。 滚动时监听滚动距离,弹窗时记录滚动位置,关闭弹窗后使用wx.pageScrollTo回滚到记录的位置(不推荐,比较消耗性能)。 使用page-meta组件,通过该组件我们可以操作Page的style样式,类似于h5里body设置overlow: hidden; 控制页面不可滚动。文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html (推荐,官方组件,比较好用) 使用wx.setPageStyle设置overflow: hidden; 也可以实现给Page组件设置样式。(次要推荐,调用方式简单,但由于官方未对外透出该API,存在下架风险) page-meta组件: 通过该组件我们可以直接操作[代码]Page[代码]组件 ,我们给它的wxss样式overflow动态设置[代码]hidden[代码]or[代码]visible[代码]or[代码]auto[代码] 就可以控制整个页面是否可以滚动。 [图片] 示例代码: [代码]<page-meta page-style="overflow: {{visible ? 'hidden' : 'visible'}}" /> <button class="button" bindtap="handleClick">点我弹出弹窗</button> <!-- 模拟页面滚动 --> <view wx:for="{{300}}" wx:key="index">{{item}}</view> <!-- 模拟弹窗 --> <view class="dialog-wrap {{visible ? 'active' : ''}}"> <view class="dialog-back {{visible ? 'active' : ''}}"></view> <view class="share-box-container {{visible ? 'active' : ''}}"> <view class="share-content"> <!-- 模拟弹窗内容滚动 --> <view class="share-box" wx:for="{{300}}" wx:key="index">{{item}}</view> </view> </view> </view> [代码] 控制弹窗显隐藏: [代码]const app = getApp() Page({ data: { visible: false }, onLoad() { }, handleClick() { this.setData({ visible: !this.data.visible }) } }) [代码] wxss弹窗样式太多,这里就不贴,放代码片段里了。 兼容底部是scroll-view,以及弹窗内是scroll-view都不会穿透影响底部的内容。 [图片] wx.setPageStyle方法: 调用这个api,动态设置它为hidden/visible,用于控制页面是否可滚动 [代码]wx.setPageStyle({ style: { overflow: 'hidden' } }) [代码] 老规矩,结尾放代码片段: https://developers.weixin.qq.com/s/U6ItgQmP7upQ
2023-08-10 - getPhoneNumber|agreePrivacyAuthorization无效?
从基础库 2.33.1 版本起,该组件支持与手机号快速验证组件、手机号实时验证组件耦合使用,调用方式为 <button open-type="getPhoneNumber|agreePrivacyAuthorization"> 这个没用啊 单个agreePrivacyAuthorization倒是可以 [图片] [图片]
2023-08-16 - 刚收到通知获取手机号收费开始了?
[图片] https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getRealtimePhoneNumber.html https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/paymentManage.html 未来:旧版本接口依然可以使用,只是需要收费而已,不想做改动的交钱就行了。如果想用新API方法就去改吧,多花一分钱。 可能支持的省钱办法: 授权手机号后,服务端将openId、手机号进行绑定。用户onLaunch打开小程序的时候通过wx.login获取code去解密openId,同时由于服务端已经绑定过手机号,所以可以使用该手机号进行登录,并同步返回token、jwtToken等登录态。这样可以做到用户冷启动小程序时自动登录上,减少使用授权的逻辑。业务按钮点击后 先调用wx.login,如果返回token则进行后续业务,如果没返回则弹出自定义弹窗,弹窗内点击按钮再进行手机号授权。(也可以在部分页面onLoad里wx.login),这个场景因为会延长流程,所以产品说不考虑,先直接打开页面就登录上,你们的各自看各自的业务场景吧。然后有四个疑问: 充值购买次数后会,如果小程序被封禁了,充值的金额是否可退款。购买数量是否支持按量付费?如果次数用完了,未购买新的次数,用户端的表现是什么?如果次数用完了,之前文档说的余量20%、10%、5%时会发模板消息提醒,文档相关现在已经删除了,是否还会发?[图片] ———————————————————————————————————————————————— 今天看了下文档做了改动: 退款规则:若购买有误,且未正式开始使用资源包前,可以在支付成功后的7天内申请退款。款项将在3-5个工作日内从原支付路径返回;若资源包已经开始使用(使用1次及以上),则不能申请退款;若支付成功后超过7天,未发起退款申请,亦不能再申请退款。 那么小程序被封了应该是不退的。不确定,等官方回复次数用完了,用户授权不会弹出授权弹窗,会返回一个errNo:1400001,用户判断等于这个errNo的时候跳转到自己的账密登录页面。不确定,等官方回复———————————————————————————————————————————————— 据了解老版本的快速验证组件(获取手机号),180天才会发送短信验证一次,为啥能每次授权都收费0.03元。 社区搜了一张图,180天没验证的应该会弹这个,不是说是短信运营成本么?为啥不是第180天验证那次费用让我们付,而是每次授权都付? [图片] 手机号授权改造后的效果: 打开职位详情页:优先调用接口判断openId是否绑定过。 如果未绑定:使用button的open-type=“getPhoneNumber”,点击报名弹出手机号授权,授权成功后与openId进行绑定落库。 如果已绑定,页面通过变量判断使用wx.login静默授权,同时服务端拿到绑定的手机号后进行登录操作,同步返回登录态(token/jwtToken)。 退出登录页面增加解绑操作(服务端解除openId与手机号的绑定),此时用户再次点击报名,就会弹出手机号授权,方便用户切换手机号。 [视频]
2023-07-27 - ios下的ad组件穿透地图?
描述: 目前地图已支持view同层渲染, 在同层渲染的view里添加 ad 广告组件, view已经通过 catch:touchmove 阻止地图穿透。 但实际测试过程中,ios 机型, view不会引起地图拖动没错, 但是如果是滑动 ad 组件区域,地图仍旧可拖动。 [图片] 可复现的代码片段: https://developers.weixin.qq.com/s/PBGXmem47FBG
2022-08-03 - 插屏广告导致页面卡死,无法关闭
[视频] 有2个页面,第一个页面每次打开会调用插屏广告,第二个面不会调插屏广告。 复现流程:第一个页面打开,展示了插屏广告(有时候第一页广告不展示也可以复现)。关掉广告后,进入第二个页面。在第二个页面停留一定时间(满足再次打开第一个页面时会展示插屏广告),返回第一个页面,第一个页面弹出插屏广告。此时第一个页面卡死,插屏广告也无法关闭,只能杀掉小程序进程,才可以打开。 不会百分百的复现,安卓和ios都有可能出现。 也可能不是卡死,只是广告关不掉。点击插屏详情按钮,按钮有点击特效,但是页面没有变化。点击投诉是可以跳转的。点击关闭按钮,没有任何反应,点击黑色背景区域也无法关闭。小程序内的swiper是可以正常轮播的。
2021-10-08 - 蓝牙接口调用需要授权问题?
访问蓝牙、需要用户授权小程序处理用户的个人信息,需要获取用户明示同意,平台计划从2022年2月21日24时起对以下接口增加用户授权:访问蓝牙:调用wx.openBluetoothAdapter、wx.createBLEPeripheralServer,需要授权scope.bluetooth开发者可在平台调整前提前增加使用 wx.getSetting 获取用户当前的授权状态的逻辑,若授权状态为false可以调用 wx.openSetting 打开设置界面,引导用户开启授权。 openSetting 打开设置界面是还没有蓝牙选项 ??????????
2022-01-05 - 小程序wx.request存在大量失败请求(失败率为0.6%-2%),其中75%为请求超时?
目前小程序wx.request存在大量失败请求,失败率为0.6%-2% 其中75%为请求超时,但网关接口性能最大响应时间在400ms,官方能不能给分析一下? 急!!!
2019-11-21