Explication détaillée des exemples de saut de page de l'applet WeChat et de transfert de données

Saut de page de l'applet WeChat et transfert de données

1. Pilote

Dans Android, notre activité et notre fragment ont des piles Le concept de pile. est dedans, et la page de l'applet WeChat contient également le concept de pile. Il existe quatre façons d'accéder à la page du mini-programme WeChat :

1.wx.navigateTo(OBJECT);
2.wx.redirectTo(OBJECT); switchTab( OBJECT);
4.wx.navigateBack(OBJECT)
5. Utiliser pour implémenter la fonction de saut correspondante

redirectTo et switchTab effacent d'abord la page d'origine dans la pile, puis poussent la page cible dans la pile. En utilisant ces deux méthodes de saut, vous ne pouvez pas revenir à la page précédente via la touche retour du système. , mais quittez directement le programme Mini ;
Lors de l'utilisation de redirectTo, il doit être utilisé avec tabBar ou un bouton de saut dans la page, sinon vous ne pouvez pas revenir à la page précédente
La page vers laquelle switchTab accède doit être la page déclarée dans tabBar
Les champs définis dans tabBar ne peuvent pas dépasser 5 pages et le niveau de pile de pages ; de l'applet ne peut pas dépasser 5 niveaux.
navigateBack ne peut revenir qu'à la page spécifiée dans la pile de pages et est généralement utilisé en conjonction avec naviguerTo.
wx.navigateTo et wx.redirectPour ne pas autoriser le passage à la page de la barre d'onglets, seul wx.switchTab peut être utilisé pour accéder à la page de la barre d'onglets

7. 2. Opérations spécifiques pour le saut de page
   

Conserver la page actuelle et sautez Accédez à une page de l'application et utilisez wx.navigateBack pour revenir à la page d'origine.

Exemple de code :

wx.navigateTo({
 url: 'test?id=1'//实际路径要写全
})

//test.js
Page({
 onLoad: function(option){
 console.log(option.query) 
 }
})

(2) wx.redirectTo(OBJECT)

Fermez la page actuelle et accédez à une page de l'application.

Exemple de code :

(3 ) wx.switchTab(OBJECT)

wx.redirectTo({
 url: 'test?id=1'
})

Accédez à la page tabBar et fermez toutes les autres pages non-tabBar

Description du paramètre OBJECT :

示例代码：

{
 "tabBar": {
 "list": [{
  "pagePath": "index",
  "text": "首页"
 },{
  "pagePath": "other",
  "text": "其他"
 }]
 }
}

wx.switchTab({
 url: '/index'
})

（4）wx.navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

OBJECT 参数说明：

示例代码：

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
wx.navigateTo({
 url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
 url: 'C?id=1'
})

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
 delta: 2
})

（5）使用标签实现页面跳转

navigator

页面链接。

示例代码：

<navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
 <navigator url="redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
 <navigator url="index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>

3.页面的路由和生命周期

（1）页面的路由

在小程序中所有页面的路由全部由框架进行管理，对于路由的触发方式以及页面生命周期函数如下：

Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）：

4.参数传递

（1）通过路径传递参数

通过路径传递参数在wx.navigateTo(OBJECT)、wx.redirectTo(OBJECT)和中使用方法相同
示例代码：以wx.navigateTo为代表

"
wx.navigateTo({
 url: 'test?id=1'//实际路径要写全
})

//test.js
Page({
 onLoad: function(option){
 console.log(option.id) 
 }
})

参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；

test?id=1 中id为参数键，1 为参数值

在目的页面中onLoad（）方法中option对象即为参数对象，可以通过参数键来取出参数值

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

更多微信小程序 页面跳转和数据传递实例详解相关文章请关注PHP中文网！