欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序--页面跳转

程序员文章站 2024-02-11 16:53:28
...


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

一、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不写默认是上一层
    }
   }