从page-container返回后，界面无法上下滑动，但点击显示的组件有响应，该怎么解决

使用wx.openEmbeddedMiniProgram打开半屏小程序时，自定义导航栏 statusBarHeight 为0，没有任何问题，关键是切换为全屏小程序时，自定义导航头的高度缺少 statusBarHeight，高度被压缩变形，导致整个页面样式异常，影响相关功能:例如吸顶等。 自定义导航栏高度是由状态栏高度+胶囊高度+胶囊边距组成的自定义导航栏高度。其中状态栏高度在半屏的情况下为 0，全屏正常。优先打开全屏，则半屏高度异常，优先打开半屏，则全屏高度异常，自定义导航栏高度在不同的屏幕下高度无法同步。

小程序性能优化课程基于实际开发场景，由资深开发者分享小程序性能优化的各项能力及应用实践，提升小程序性能表现，满足用户体验。

IOS8,14.1, 微信拉起APP功能失败

微信外部浏览器唤起微信小程序目的：通过发送短信召回流失用户。官方文档地址https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html步骤一该API我们主要用到的配置如下：jump_wxa：跳转到的目标小程序信息。该对象内包含两个字段。path：通过scheme码进入的小程序页面路径，必须是已经发布的小程序存在的页面，不可携带queryquery：通过scheme码进入小程序时的query。步骤二需要注意的是，query必传，然而如果我们需要跳转的页面不需要参数，也需要配置上query，默认我们填写的是from=sms, 用于统计是从短信渠道来的。步骤三与后端约定access_token 通过前端传递appKey进行区分，传哪个微信小程序的appKey 就生成对应小程序的access_token。步骤四支持设置scheme的过期时间，默认永久，我们的应用场景很少，暂不详说。步骤五代码里操作如下，由后端聚合参数信息。let postData = { appKey: 'QTSHE_MINI_APP', path: 'pages/partdetails/partdetails', query: 'partJobId=123456' || 'a=1' } this.$axios.post('xxx', postData).then((res) => { if (res.success) { const url = res.data.openlink // 将scheme转为我们平台的短链接，否则在安卓手机上无法打开微信小程序，会默认打开浏览器搜索。 this.$axios.get(`xxx`, {url}).then((res) => { if (res.success) { this.shortLink = res.data // 将weixin://xxxx 转换为 https://b.qtshe.com/xxx } }) } else { this.$Message.error('获取失败，请稍后重试') } }).catch((err) => { console.log(err) this.$Message.error('获取失败，请稍后重试') }) 微信内部浏览器唤起小程序官方文档地址https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html步骤一首先需要登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，未配置会导致wx.config签名失败，导致无法使用开放标签。步骤二在需要调用JS接口的页面引入如下JS文件：https://res.wx.qq.com/open/js/jweixin-1.6.0.js，1.6.0版本内才增加了上述标签，低于该版本的都无法显示。步骤三通过config接口注入权限验证配置并申请所需开放标签, 在wx.config里增加openTagList标签，内置两个开放标签 [代码]wx-open-launch-app[代码] 微信h5唤起本地已经安装的app，以及 [代码]wx-open-launch-weapp[代码] 微信h5唤起小程序，操作如下：wx.config({ debug: false, appId: window.g_info.wx_appid, // 全局变量appId timestamp: data.data.timestamp, // 调用微信接口返回的 nonceStr: data.data.nonceStr, // 调用微信接口返回的 signature: data.data.signature, // 调用微信接口返回的 jsApiList: ['openLocation', 'getLocation'], // 这里需要任意填写api，不能为空 openTagList: [ 'wx-open-launch-app', 'wx-open-launch-weapp' ] }) 注意点对于Vue等视图框架，为了避免template标签冲突的问题，可使用[代码]<script type="text/wxtag-template"></script>[代码]进行代替，来包裹插槽模版和样式。页面中与布局和定位相关的样式，如[代码]position: fixed; top -100;[代码]等，尽量不要写在插槽模版的节点中，请声明在标签或其父节点上；对于有CSP要求的页面，需要添加白名单frame-src https://*.qq.com webcompt:，才能在页面中正常使用开放标签。// Vue里操作代码如下，如果需要写样式，最好是外部包一个div进行样式编写，内部的内容宽高100%即可，调试样式可使用微信开发者工具的网页模式： .quick-btn { // 这里写样式 width: 3.43rem; height: 0.96rem; display: flex; img { width: 100%; display: block; } } <div class="quick-btn"> <img src="https://qiniu-image.qtshe.com/20220317quick-apply.png" alt="" /> </div> 示例效果[图片] 为了方便运营同学，做了个工具给他们使用。 [图片] 2023年4.11号新版本后的改版方案： 首先做一个落地页：https://b.qtshe.com/1DF43E 代码如下： import toast from 'toast' export default { created() { this.init() }, methods: { // 获取微信scheme地址，并且主动跳转一次 init() { this.$axios.post(`https://xxx/你们的接口地址/user/device/scheme`, this.$route.query).then(res => { if (res.success) { window.location.href = res.data } else { toast(res.msg) } }).catch(() => { toast('服务器错误，请稍后重试') }) } } } 原理：通过地址栏配置需要跳转的参数，h5页面拿到参数后通过接口转换为weixin://xxxx 开头的scheme协议地址，并且主动location.href一次。这样能保证用户每次打开都是新的scheme地址，针对一天50w数量上限的问题，可尝试同一个用户在固定时间内相同的参数，返回相同的scheme地址。 以上限制只存在于除微信外的外部浏览器，微信容器里没有以上的限制。 2023年12月18日后方案： 官方公告如下： https://developers.weixin.qq.com/community/develop/doc/00024e32cbc36055c0c0a34b066401 ，没有外部浏览器、微信环境的限制，可以被多人打开。 使用方式通过明文拼接： weixin://dl/business/?appid=*APPID*&path=*PATH*&query=*QUERY*&env_version=*ENV_VERSION* 示例: // query需要encode编码，ENV_VERSION为控制打开开发版、体验版、线上版本 weixin://dl/business/?appid=wxa7b0b022472e55e6&path=pages/partdetails/partdetails&query=partJobId%3D123456 通过明文 URL Scheme 拉起的小程序（页面）必须要提前在「小程序管理后台 -> 设置 -> 隐私与安全 -> 明文 scheme 拉起此小程序」中进行声明； 小程序：配置能够通过明文 scheme 进入的小程序页面[图片] 这一点很烦很烦，希望能支持下 默认可打开所有的，不然每次都得去配置。

背景 俗话说，产品设计有三宝：弹窗、浮层加引导。可见“弹窗”在产品设计中的重要性。对于前端开发者来说，实现一个基础的模态框（Modal）并不难，可一旦模态框内部出现可滚动内容，各种意想不到的问题就会接踵而至——其中最为典型的，就是“滚动穿透”。 什么是滚动穿透？ 滚动穿透指的是：当我们在顶层弹窗中执行滑动操作时，实际滚动的是底层页面的内容。这种体验非常影响交互，也常让用户感到困惑。 解决方案分析 解决滚动穿透的思路通常有两种：改变顶层或改变底层。 1. 改变顶层（不推荐） 一种自然的想法是阻止顶层的事件继续传播。例如，给遮罩层（蒙层）绑定 catchtouchmove 事件。但这种方法在部分场景下并不生效，因此并不是一个可靠的通用方案。 2. 改变底层（推荐） 既然问题是底层内容跟随滚动，那么只要在弹窗打开时禁止底层页面滚动，问题就迎刃而解。 具体实现方案 🟡 不成熟的方案 将底层页面的最外层 view 设置为 position: fixed，但这会导致页面滚动位置丢失，回到顶部。 另一种方式是：在打开弹窗前记录当前滚动位置，关闭弹窗后使用 wx.pageScrollTo 滚动回原位置。这种方法实现较为繁琐，且体验不够流畅。 ✅ 成熟的方案 方案一：使用 page-meta 组件 通过微信小程序提供的 page-meta 组件，我们可以直接控制页面根容器的样式，类似于在 H5 中设置 body { overflow: hidden; }。 我们可以动态设置 overflow 属性为 hidden 或 auto，来控制页面是否可滚动。 方案二：使用 wx.setPageStyle 方法 这是一个更灵活的 API，特别适合在组件内部（如封装好的弹窗组件）使用，无需额外编写 page-meta 结构。 [代码]wx.setPageStyle({ style: { overflow: 'hidden' // 或 'auto' } }) [代码] 代码示例 这里提供一个可供测试的代码片段，帮助你快速上手： 👉 点击查看代码片段 拓展：支付宝小程序的情况 支付宝小程序虽然也支持 page-meta 组件，但由于其 WebView 内核限制（版本 69），设置 overflow: hidden 并不能完全阻止底层滚动。 支付宝团队为此专门提供了新的 API：my.setPageScrollable，用于精确控制页面是否可滚动。 [代码]my.setPageScrollable({ scrollable: false, success: (res) => console.log(res), fail: (err) => console.log(err) }) [代码] 更新（2025.06.18） 该 API 已正式开放。不过目前测试发现：在 安卓端 设置禁止滚动后，弹窗内的可滚动区域也会被一并禁止；iOS 端 则表现正常，仅底层页面被锁定。 原因分析： 安卓与 iOS 在滚动禁止的层级控制上存在系统级差异： 安卓 采用 Webview 级别的滚动限制，生效时整个页面（包括所有弹层）均不可滚动； iOS 采用组件级控制，能智能区分层级，仅锁定底层页面而保持弹窗内部可滚动。