小程序面试题三

---

一、微信小程序如何实现页面跳转？

---

微信小程序实现页面跳转的方式多样，主要包括以下几种方法：

1. 使用<navigator>组件

<navigator>组件是微信小程序中用于页面跳转的基本组件，类似于HTML中的<a>标签。通过设置其url属性，可以指定要跳转到的页面路径。此外，还可以设置open-type属性来指定跳转方式，如navigate（默认）、redirect、switchTab等。

示例代码：

<!-- 跳转到第二个页面 -->
<navigator url="/pages/secondPage/secondPage">跳转到第二个页面</navigator>

<!-- 使用redirect方式跳转 -->
<navigator url="/pages/thirdPage/thirdPage" open-type="redirect">使用redirect跳转</navigator>

<!-- 跳转到tabBar页面 -->
<navigator url="/pages/tabPage/tabPage" open-type="switchTab">跳转到tabBar页面</navigator>

2. 使用API跳转

微信小程序还提供了一系列API来实现页面跳转，包括wx.navigateTo、wx.redirectTo、wx.reLaunch和wx.switchTab等。

• wx.navigateTo(OBJECT)：保留当前页面，跳转到应用内的某个页面。但是，页面层级过多会导致页面卡顿，不建议连续跳转超过三级页面。
• wx.redirectTo(OBJECT)：关闭当前页面，跳转到应用内的某个页面。但不允许跳转到tabBar页面。
• wx.reLaunch(OBJECT)：关闭所有页面，打开到应用内的某个页面。这种方式会清空当前的页面栈。
• wx.switchTab(OBJECT)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。只能跳转到带有tabBar的页面。

示例代码：

// 保留当前页面，跳转到新页面
wx.navigateTo({
  url: '/pages/secondPage/secondPage'
});

// 关闭当前页面，跳转到新页面
wx.redirectTo({
  url: '/pages/thirdPage/thirdPage'
});

// 关闭所有页面，打开新页面
wx.reLaunch({
  url: '/pages/mainPage/mainPage'
});

// 跳转到tabBar页面
wx.switchTab({
  url: '/pages/tabPage/tabPage'
});

3. 使用事件处理函数

在页面中的元素上绑定点击事件（如bindtap），然后在事件处理函数中调用上述API来实现页面跳转。

示例代码（在WXML中绑定事件）：

<view bindtap="jumpToSecondPage">跳转到第二个页面</view>

在对应的JS文件中实现跳转逻辑：

Page({
  jumpToSecondPage: function() {
    wx.navigateTo({
      url: '/pages/secondPage/secondPage'
    });
  }
});

注意事项

• 在使用页面跳转时，需要确保目标页面的路径正确无误。
• 对于需要传递参数的页面跳转，可以在URL后附加查询字符串（如?key=value），并在目标页面中进行解析。
• 使用wx.switchTab时，跳转的目标页面必须是在app.json中配置的tabBar页面。
• 页面跳转过多可能会导致页面卡顿或内存占用过高，因此需要合理控制页面跳转的次数和层级。

综上所述，微信小程序实现页面跳转的方式灵活多样，开发者可以根据实际需求选择适合的方法。

---

二、微信小程序的生命周期函数有哪些？

---

微信小程序的生命周期函数主要分为两大类：应用生命周期函数和页面生命周期函数。这些函数允许开发者在不同阶段执行特定的操作，以优化小程序的性能和用户体验。

应用生命周期函数

应用生命周期函数主要与小程序的整体运行状态相关，包括：

1. onLaunch(options)：当小程序初始化完成时触发，全局只触发一次。开发者可以在这里进行全局的数据初始化、全局事件监听等操作。
2. onShow(options)：当小程序启动，或从后台进入前台显示时触发。可以在这里获取小程序启动参数，进行页面数据刷新等操作。
3. onHide()：当小程序从前台进入后台时触发。可以在这里清理定时器、关闭连接等操作。
4. onError(error)：当小程序发生脚本错误或API调用失败时触发，会带上错误信息。通常用于捕获并处理小程序运行时的异常情况。
5. onPageNotFound(res)：小程序要打开的页面不存在时触发，会带上页面信息回调该函数。

页面生命周期函数

页面生命周期函数则与小程序内各个页面的状态变化相关，包括：

1. onLoad(options)：页面加载时触发，一个页面只会触发一次。可以在这里进行页面初始化，如从后台获取数据等操作。
2. onShow()：页面显示时触发。每次打开页面都会触发一次，可以在这里进行页面展示时的数据刷新操作。
3. onReady()：页面初次渲染完成时触发。表示页面已经准备就绪，可以和视图层进行交互。通常在这个生命周期函数中可以进行页面渲染完成后的一些操作，如动态修改页面标题等。
4. onHide()：页面隐藏时触发。当页面被切换到后台时会触发，可以在这个生命周期函数中处理一些页面隐藏相关的逻辑，如停止或暂停一些页面相关的定时器、动画等。
5. onUnload()：页面卸载时触发。如通过redirectTo或navigateBack到其他页面时，当前页面会被销毁，可以在这里进行清理操作，如清除定时器、取消事件监听等。

此外，还有一些非生命周期钩子函数，但它们在页面生命周期中也非常重要，如：

• onPullDownRefresh：监听用户下拉刷新事件。当用户下拉页面顶部时会触发，通常用于处理下拉刷新的逻辑。
• onReachBottom：监听页面触底事件。当页面滚动到底部时会触发，通常用于处理加载更多数据的逻辑。

这些生命周期函数和非生命周期钩子函数共同构成了微信小程序的生命周期体系，允许开发者在不同阶段执行相应的逻辑和操作，以实现更好的用户体验和性能优化。