微信小程序--页面跳转

微信小程序页面跳转

为了不让用户在使用小程序造成困扰，微信小程序规定页面路径只能是五层。请尽量避免多层次的交互方式。：

一、navigator标签直接跳转

navigator标签是wxml的重要组成，类似于HTML中的a标签；相当于一个超链接的跳转

几个重要的属性

url 文件跳转的地址，后面跟的是相对路径
redirect 跳转了过去，文件不会回退
delta 回退的层数，默认是1
hover-class 指定点击时的样式类，当hover-class="none"时，没有点击态效果

参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
文件层次如下：
在这里插入图片描述

<navigator url='../demo2/demo2?name=小明&age=18'>小明</navigator>
<navigator url='../demo2/demo2?name=小红' redirect>跳转过去不回来了</navigator>

二、navigateTo跳转

url 跳转的路径和navigator的url使用方法一
success 接口调用成功后回调的函数
fail 接口调用失败回调的函数
complete 接口调用结束调用的函数(调用成功、失败都会执行)

.xml中的代码

<!--pages/demo1/demo1.wxml-->
<button type='prinary' bindtap='tapHandle'>跳转过去</button>

.js文件中的代码

  tapHandle:function()  {     
  // 点击按钮系统会自动执行这里的代码    
    console.log(111);     
     wx.navigateTo({      
       url: '../demo2/demo2',     
          // success:function(res) {},      
          // fail:function(){},       
          // complete:function(){}
 	 })  
  }

三、redirectTo跳转

关闭当前页面后，跳转到应用被的某个页面，但是不允许跳转到tabber页面上
使用方法跟navigateTo类似，效果相当于加上redirect 属性的navigator标签。
跟navigateTo类似的它同时也有success、fail、complete 三个属性但是使用方法和navigateTo完全一致。

具体的.js代码如下

        wx.redirectTo({       
           url: '../demo2/demo2',    
        })

四、navigateBack返回上一页

具体使用效果是关闭当前页面，返回上一些或者多级页面。
注意：如果跳转的同时原页面已经被关闭则不可使用，如redirectTo和携带redirect 属性的navigator标签这两种情况下返回上一层页面就不可使用，会直接出现方法工作的情况。
delta参数是navigateBack中最重要的参数，默认是1返回上一层，如果在方法中将delta设置成2则返回上两层，以此类推。
同时navigateBack也具备success,fail,complete三个参数，我们在这就不一一赘述了。

页面层次跟原来的一样，代码如下:

.wxml代码

<!--pages/demo2/demo2.wxml-->
<text>pages/demo2/demo2.wxml</text>
<button bindtap='backHandle'>返回</button>

.js代码

  backHandle:function ()
   {   
    //默认返回上一层   
    wx.navigateBack()  
    {      
   	 delta:1;    //如果delta不写默认是上一层
    }
   }