主页面初次进入 子组件pageLifetimes中show方法没有执行

文章讨论了在微信小程序中遇到的问题,即子组件在页面首次加载时不触发PageLifetimes.show方法,原因是wx:if控制的条件未满足,导致子组件未挂载。提出的解决方案包括使用hidden属性替代wx:if以确保组件始终渲染,以及将埋点逻辑移到lifetimes.attached生命周期方法中。这样可以确保在组件附加到DOM时执行埋点操作,即使在条件变化后也能正确工作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题

子组件 show 初次进入页面不触发

  pageLifetimes: {
    show: function () {
      const cid = this.data.cid;
      // 展示曝光埋点
      lx.moduleView('b_qcs_wi3g62ng_mv', {}, { cid });
      console.error("xsz old UI  pageLifetimes show 中埋点执行了 ")
    },
  },

使用子组件的地方, 被几个父组件传入的参数控制着显示

    <!-- 定位授权样式 -->
  <block wx:if="{{(!locAuthed||!locationEnabled) && !hasUnderwayOrder}}">
    <location-guide locationEnabled="{{locationEnabled}}" cid="{{cid}}" style="z-index: 1" />
  </block>

在父组件写如下测试代码

  attached() {
    let res = (!this.properties.locAuthed||!this.properties.locationEnabled) && !this.properties.hasUnderwayOrder
    console.error('xsz content-area 是否打开', res)
    let t = 500
    setTimeout(()=>{
      let res = (!this.properties.locAuthed||!this.properties.locationEnabled) && !this.properties.hasUnderwayOrder
      console.error(`xsz content-area setTimeout ${t}ms content-area 是否打开`, res)
    }, t)
}

一开始是 res 是false

500ms 已经是 true 了

所以是。。主页面第一次加载时调用onShow 时 应该会 调用子组件 的 PageLifetimes 的show,却发现 子组件因 wxif的控制还没有挂载呢,就不管不执行埋点功能了。。。。。。

解决方案

1 改用hidden 属性

官方文档的介绍

wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定,所以当 wx:if
的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。

相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。

一般来说,wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden
更好,如果在运行时条件不大可能改变则 wx:if 较好。

<location-guide hidden="{{locAuthed && locationEnabled}}"
                locationEnabled="{{locationEnabled}}"
                style="z-index: 1"
                cid="{{cid}}"
/>

2 埋点触发写在 attached

  lifetimes: {
    attached() {
		// 埋点代码
    },
  },

微信小程序的子组件中,`pageLifetimes` 对象用于监听页面生命周期事件,如 `show`、`hide` 和 `resize`。如果这些事件不生效,可能是由于以下几个原因: 1. **组件定义问题**:确保子组件的 `json` 文件中正确声明了 `pageLifetimes`。 2. **生命周期事件使用不当**:确保在 `pageLifetimes` 中正确使用 `show`、`hide` 和 `resize` 事件。 3. **组件使用问题**:确保在页面中正确引用和使用子组件。 4. **小程序版本问题**:确保使用的是支持 `pageLifetimes` 的微信小程序版本。 以下是一个正确的示例: ```json // 子组件的 json 文件 { "component": true } ``` ```javascript // 子组件的 js 文件 Component({ pageLifetimes: { show: function() { // 页面显示时执行 console.log('Page Show'); }, hide: function() { // 页面隐藏时执行 console.log('Page Hide'); }, resize: function(size) { // 页面尺寸变化时执行 console.log('Page Resize', size); } } }) ``` ```html <!-- 子组件的 wxml 文件 --> <view>子组件</view> ``` ```json <!-- 页面 json 文件 --> { "usingComponents": { "child-component": "/path/to/child-component" } } ``` ```html <!-- 页面 wxml 文件 --> <child-component></child-component> ``` 如果以上步骤都正确,但事件仍然不生效,可以尝试以下方法: 1. **检查控制台日志**:确保没有报错信息。 2. **更新微信开发者工具**:确保使用的是最新版本的微信开发者工具。 3. **重启开发者工具**:有时候重启工具可以解决一些奇怪的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值