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

Cet article présente principalement des informations pertinentes sur les sauts de page de l'applet WeChat et des exemples détaillés de transfert de données. Voici des exemples de codes pour vous aider à apprendre et à comprendre à la maison. Les amis dans le besoin peuvent se référer à

WeChat. Mini saut de page de programme et transfert de données

1. Pilote

Sous Android, notre activité et notre fragment ont tous deux le concept de pile WeChat Mini La page du programme. 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 ;

2. La page vers laquelle switchTab accède doit être la page déclarée dans tabBar

3. 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.

4. 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.

5. 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

   
   

(1)wx.navigateTo(OBJECT)

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'//实际路径要写全
})

Remarque : Afin de ne pas causer de problèmes aux utilisateurs lors de l'utilisation du mini-programme, nous stipulons que le chemin de la page ne peut comporter que cinq niveaux. Veuillez essayer d'éviter les interactions à plusieurs niveaux.

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

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

Exemple de code :

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

示例代码：

{
 "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) 
 }
})