欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。

文摘  小程序页面跳转以及带参数跳转总结

小程序应用 本站 573 1评论

1.关于页面的跳转,微信小程序提供了3种方法:


方法一:使用API  wx.navigateTo()函数

111.jpg

wx.navigateTo({

   url:'../test/test?id=1&page=4',//跳转页面的路径,可带参数 ?隔开,不同参数用 & 分隔;相对路径,不需要.wxml后缀

   success:function(){}        //成功后的回调;

   fail:function(){}          //失败后的回调;

   complete:function(){}      //结束后的回调(成功,失败都会执行)

 })

传递的参数在接收页面onLoad()函数中得到值:option.id就可以得到了

   onLoad: function (option) {

    console.log(option)//可以打印一下option看查看参数

     this.setData({

     id:option.id,

     });


实例:

index.wxml:

在index.wxml新建一个button组件,并使用bindtap事件绑定一个函数

<!--index.wxml-->

<button bindtap="changeToTest">点击</button>

index.js:

在index.js中的Page函数内部,添加changeToTest 函数,函数里面使用wx.navigateTo,写上需要跳转的页面,里面传入的是一个对象,对象内使用url属性,对应的就是需要跳转的页面的路径(注意:这是接收的是一个相对路径,并且页面不需要使用.wxml后缀)

//index.js
var app = getApp()
Page({
  data: {
        ...
        },
  changeToTest:function(){
      wx.navigateTo({
           url: '../test/test'
       })
       },
      onLoad:function(){
        ...
  }
})

注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

wx.navigateTo({

  url: 'page/home/home?user_id=111'  // 页面 A

})

wx.navigateTo({

  url: 'page/detail/detail?product_id=222'  // 页面 B

})

// 跳转到页面 A

wx.navigateBack({   //通过wx.navigateBack返回上一级(关闭当前页面。返回上一页面或多级页面)。

  delta: 2   //返回的页面数,delta(默认为1),如果delta大于当前的页面数,则返回到首页。

})


方法二:使用API  wx.redirectTo()函数

   

222.jpg

实例:

index.wxml:

在index.wxml新建一个button组件,并使用bindtap事件绑定一个函数

<!--index.wxml-->

<button bindtap="changeToTest">点击</button>

index.js:

333.jpg

wx.navigateTo()和wx.redirectTo()的区别:

wx.navigateTo()是保留当前页面,跳转到某个页面,跳转页面后可以返回上一页。

wx.redirectTo()是关闭当前页面,跳转到某个页面,跳转页面后不能返回上一页。


方法三:使用导航组件  <navigator>


//不带参数

<navigator url="/page/person/person">

    ......

</navigator>

//带参数

<navigator url="/page/person/person?title=1&time=1234">

    ......

</navigator>


444.jpg

(提示:发现点击时有背景,可以通过设置hover-class为none去除)


wxml 页面组件跳转(可以通过设置open-type属性指明页面跳转方式):
// navigator 组件默认的 open-type 为 navigate 
<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
// redirect 对应 API 中的 wx.redirect 方法
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
// switchTab 对应 API 中的 wx.switchTab 方法
<navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
// reLanch 对应 API 中的 wx.reLanch 方法
<navigator url="../../redirect/reLanch/reLanch?title=reLanch" open-type="reLanch" hover-class="other-navigator-hover">关闭所有页面,打开到应用内的某个页面</navigator>
// navigateBack 对应 API 中的 wx.navigateBack 方法
<navigator url="/page/index/index" open-type="navigateBack" hover-class="other-navigator-hover">关闭当前页面,返回上一级页面或多级页面</navigator>


实例:

index.wxml:

在index.wxml新建一个<navigator>元素,并在元素里面添加属性url就可以

<!--index.wxml-->

<navigator url="../test/test">点击跳转</navigator>


补充:

// 跳转到tabBar页面(在app.json中注册过的tabBar页面),同时关闭其他非tabBar页面。

wx.switchTab({

  url: 'page/index/index'

})

// 关闭所有页面,打开到应用内的某个页面。

wx.reLanch({

  url: 'page/home/home?user_id=111'

})


2.跳转的数据传递


以wx.navigateTo为例:

上面讲述,wx.navigateTo传入的url是跳转的页面(使用相对路径)

wx.navigateTo({

    url:"pages/home/home"

});

那么参数传递至下一页面,则只需要在路径后面,添加?问号,?后面接的是参数,以key-value的方式。

这里传了个value为2的参数:

wx.navigateTo({

    url:"pages/home/home?type=2"

});

然后在home.js中的onLoad()函数中得到值:option.type就可以得到了,如下:

onLoad: function (option) {

    this.setData({

        type:option.type,

    });

    console.log(option.type);

}


实例:

1、当前页面的参数,传到下一个页面。当前视图中view里要写入传递值。如下,通过bindtap绑定detail事件,并且把要传递的参数(title、time),以 “data-” 的格式传递。

<view wx:for="{{list}}" wx:key="id">
    <view bindtap="detail" data-title="{{item.title}}" data-time="{{item.time}}">
        <label>标题:{{item.title}}</label>
        <label>时间:{{item.time}}</label>
    </view>
</view>


2、当前页面的js如下:e.currentTarget.dataset.XX  即获取视图中 “data-” 格式的数据。并在navigateTo中传入参数进行跳转。

detail:function(e){
    var title = e.currentTarget.dataset.title;
    var time = e.currentTarget.dataset.time;
    wx.navigateTo({
        url: "/pages/person/goldcoin_detail/index?detail=" + title + "|" + time
    })
}

3、在跳转到的页面接收数据:数据存在options中,直接以 “options.参数名”的形式获取。

data: {
    title:'',
    time:''
},
onLoad: function (options) {
    var str = options.detail;
    var detail = str.split("|");
    this.setData({
        title:detail[0],
        time:detail[1]
    })
},


3.实战:


//category.wxml
<view wx:for="{{item.categories}}" wx:for-item="categoriesitem" wx:key="id">
     <view class="sub_nav">
      <text class="strong" bindtap="catlink" data-alias="{{categoriesitem.alias}}" data-name="{{categoriesitem.name}}">{{categoriesitem.name}}</text>
     </view>
</view>
//category.js
  catlink:function(e){
    var alias = e.currentTarget.dataset.alias;
    var name = e.currentTarget.dataset.name;
    //console.log(name);
    wx.navigateTo({
    url: '../articles/articles?alias='+alias+'&name='+name,
    success: function(res) {
  
    },
    fail: function(res) {
  
    },
    complete: function(res) {
  
    },
    })
  },
//article.js
onLoad: function (options) {
    var alias  = options.alias;
    var name  = options.name;
    this.setData({
        alias:alias,
        name:name,
    })
    var page = this;
    var articlesData = [];
    wx.request({
      url: 'https://ittxx.cn/api/articles?cat='+alias,  //api调用地址
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      method: 'GET',
      data: [],
      success: function (res) {
        var data = res.data;
        console.log(data);
        page.setData({ articlesData: data })
      },
      fail: function (res) {
        // fail
      },
      complete: function (res) {
        // complete
      }
    })
  },


参考文档:

https://www.jianshu.com/p/e0b9525ecd7a

https://www.jianshu.com/p/0ca3cd8f3c6a


转载请注明: ITTXX.CN--分享互联网 » 小程序页面跳转以及带参数跳转总结

最后更新:2020-05-20 14:18:35

赞 (7) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(1)个小伙伴在吐槽
  1. 学习学习
    游客2020-05-20 14:18 (1个月前) 回复