微信小程序路由拦截tab的跳转

时间: 2023-09-07 18:01:24 浏览: 770

微信小程序之页面拦截器的示例代码

场景小程序有52个页面，其中13个页面无需任何身份，另外39个页面需要系统角色。对于这39个页面，如果微信用户没有系统角色，则跳转到登录页。是否有系统角色信息需要通过异步请求来获取。需求分析&实现对需求进行抽象，其实要的就是一个过滤器，对小程序页面的访问进行过滤，符合条件的通过，不符合条件进行其他处理。使用过php的laravel框架的童鞋，肯定一下子就联想到了laravel框架的http中间件: HTTP 中间件提供一个方便的机制来过滤进入应用程序的 HTTP 请求，例如，Laravel 默认包含了一个中间件来检验用户身份验证，如果用户没有经过身份验证，中间件会将用户在微信小程序开发中，有时需要实现一种机制，用于在用户访问特定页面之前检查其权限，类似于Web开发中的HTTP中间件。在本场景中，我们有52个页面，其中39个页面需要用户具备系统角色才能访问。若用户未拥有相应角色，应将其重定向至登录页面。获取用户是否具有系统角色的信息需要通过异步请求。微信小程序本身并不直接支持类似HTTP中间件的功能，但我们可以模拟这种行为，利用Page实例的生命周期函数`onLoad`或`onShow`来进行权限校验。通常，`onLoad`在页面初次加载时调用，而`onShow`在每次打开页面时调用。以下是一个简单的示例： ```javascript // orderDetail.js Show: function () { let that = this; service.identityCheck( () => { // 跳转到登录页 wx.redirectTo({ url: "/pages/common/login/login", }); }, () => { // 获取页面数据 that.getDetail(this.orderId); // ... }, ); }, ``` 然而，这样的代码会导致大量重复，侵入性强。为了提高代码复用性和可维护性，我们可以使用装饰函数（装饰者模式）来封装这个逻辑： ```javascript // filter.js function identityFilter(pageObj) { if (pageObj.onShow) { let _onShow = pageObj.onShow; pageObj.onShow = function () { service.identityCheck( () => { // 跳转到登录页 wx.redirectTo({ url: "/pages/common/login/login", }); }, () => { // 获取页面实例，防止this劫持 let currentInstance = getPageInstance(); _onShow.call(currentInstance); }, ); }; } return pageObj; } function getPageInstance() { var pages = getCurrentPages(); return pages[pages.length - 1]; } exports.identityFilter = identityFilter; ``` 之后，只需在需要进行身份检查的页面中导入并使用`filter.identityFilter`即可： ```javascript // orderDetail.js let filter = require('filter.js'); Page(filter.identityFilter({ onShow: function () { // 获取页面数据等等 this.getDetail(this.orderId); // ... }, // ... })); ``` 为了优化性能，避免每次页面加载都进行身份校验，我们可以在小程序启动时（`app.js`的`onLaunch`方法）获取一次用户身份，并保存为全局变量。这样，我们可以通过Promise来确保页面异步数据请求在身份验证完成后再执行： ```javascript // app.js App({ onLaunch: function () { let p = new Promise((resolve, reject) => { service.identityCheck(resolve, reject); }); this.globalData.promise = p; }, globalData: { promise: null, }, // ... }); ``` 然后，在每个页面实例化时，等待全局的Promise解析完成后再执行页面的异步数据请求： ```javascript // orderDetail.js let filter = require('filter.js'); Page(filter.identityFilter({ onShow: function () { this.globalData.promise.then(() => { // 获取页面数据等等 this.getDetail(this.orderId); // ... }); }, // ... })); ``` 通过这种方式，我们成功地实现了类似HTTP中间件的页面拦截器功能，以控制微信小程序中不同页面的访问权限。同时，通过Promise优化了异步处理的流程，确保了用户身份验证在页面数据请求之前完成，提高了用户体验。

微信小程序的路由拦截可以实现对tab的跳转进行拦截和控制。当我们在小程序中点击tab栏的某个选项时，可以使用路由拦截来判断是否允许跳转到相应的页面。首先，我们需要在app.json文件中配置页面的路径。对于每个tab页面，我们需要在pages的数组中添加对应的路径。接下来，在app.js的onLaunch函数中，我们可以监听并拦截所有的路由跳转。当我们点击tab栏的选项时，该函数会被触发。在onLaunch函数中，我们可以使用getCurrentPages()方法获取到当前页面栈，即当前打开的页面路径。我们可以判断当前页面是否是我们允许跳转的页面。如果当前页面是我们允许跳转的页面，我们可以使用wx.switchTab()方法进行跳转。如果当前页面不是我们允许跳转的页面，我们可以使用wx.redirectTo()或wx.navigateTo()方法跳转到其他页面，或者使用wx.reLaunch()方法关闭所有页面并跳转到指定页面。通过以上步骤，我们就可以实现对tab的跳转进行拦截和控制。我们可以根据具体需求，在onLaunch函数中编写相应的判断逻辑来控制tab的跳转行为。总结起来，微信小程序的路由拦截可以通过监听onLaunch函数来实现对tab的跳转进行拦截和控制。我们可以根据当前页面路径判断是否允许跳转，然后选择使用不同的跳转方法来实现我们想要的页面跳转效果。

阅读全文

微信小程序路由拦截tab的跳转

相关推荐

微信小程序之页面拦截器

js和微信小程序路由（页面）跳转拦截

微信小程序api拦截器

微信小程序请求拦截器 ，响应拦截器

微信小程序api拦截器.zip

封装微信小程序http拦截器过程解析

微信小程序 swiper制作tab切换实现附

微信小程序--路由拦截器

微信小程序 我厨 tab 界面设计 (源码)

微信小程序链接传参并跳转新页面

微信小程序间使用navigator跳转传值问题实例分析

基于vue开发微信小程序mpvue-docs跳转页面功能

微信小程序Demo-TAB切换求调教-附完整源代码.rar

微信小程序完整代码微信小程序完整微信小程序微信微信小程序完整代码小程序完整代码完整代码代码

家庭管理微信小程序家庭管理微信小程序家庭管理微信小程序家庭管理微信小程序

微信小程序自定义tab，多层tab嵌套实现

微信小程序集成redux,请求拦截器以及路由拦截器wechat-redux-master.zip

最新推荐

微信小程序按钮点击跳转页面详解

微信小程序实现搜索功能并跳转搜索结果页面

微信小程序实现页面跳转传值以及获取值的方法分析

微信小程序返回箭头跳转到指定页面实例解析

微信小程序实现点击文字页面跳转功能【附源码下载】

JHU荣誉单变量微积分课程教案介绍

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

如何在ZYNQMP平台上配置TUSB1210 USB接口芯片以实现Host模式，并确保与Linux内核的兼容性？

Naruto爱好者必备CLI测试应用

微信小程序请求拦截器，响应拦截器

微信小程序我厨 tab 界面设计 (源码)