>

美洲杯在线投注_2019美洲杯外围投注[投注官网]

热门关键词: 美洲杯在线投注,2019美洲杯外围投注[投注官网]

美洲杯在线投注微信小程序 页面跳转和数据传递

- 编辑:美洲杯在线投注 -

美洲杯在线投注微信小程序 页面跳转和数据传递

微信小程序 空白页重定向解决办法

微信小程序 页面跳转和数据传递

 在刚开始的时候将小程序的入口文件直接指向tabbar 的首页,此时出现问题:二维码扫描,第一次不关闭首页,第二次进入时;不会经过onLoad过程解析scene参数;

1.先导

官方中解释:tabbar跳转方式触发的生命周期是 onShow,不经过onLoad,下图:

在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面。微信小程序页面跳转有四种方式:

美洲杯在线投注 1

1.wx.navigateTo(OBJECT);
2.wx.redirectTo(OBJECT);
3.wx.switchTab(OBJECT);
4.wx.navigateBack(OBJECT)
5.使用实现对应的跳转功能;

此时,和小伙伴讨论重定向问题时,想到用类似的方法可以做到,就立马实行:

分析:

  app.json中加pages/index/index(入口文件),pages/home/home(tabbar页面主页),pages/detail/detail(详情页);pages/exclusive/exclusive

  1. 其中navigateTo是将原来的页面保存在页面栈中,在跳入到下一个页面的时候目标页面也进栈,只有在这个情况下点击手机的返回按钮才可以跳转到上一个页面;
  2. redirectTo和switchTab都是先清除栈中原来的页面,然后目标页面进栈,使用这两种跳转方式,都不能通过系统的返回键回到上一个页面,而是直接退出小程序;
  3. redirectTo使用的时候一定要配合tabBar或是页面里面可以再次跳转按钮,否则无法回到上一个页面;
  4. switchTab跳转的页面必须是tabBar中声明的页面;
  5. tabBar中定义的字段不能超过5个页面,小程序的页面栈层次也不能超过5层。
  6. navigateBack只能返回到页面栈中的指定页面,一般和navigateTo配合使用。
  7. wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面

在index.js中 onLoad处理:

2.页面跳转的具体操作

/**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  // 入口文件 决定进入哪个页面
  console.log('入口文件,参数scene,值detail,1127')
  var scene = options.scene; //扫码进入有此参数
  var scene = decodeURIComponent(options.scene);
  if (scene) {
   //'scene=detail,1127' 分隔符, 测试时为 , 号;真机时为, 原因是url编码,但是使用decodeURI()解析不出来,所以走了兼容

   let info_arr = [];
   info_arr = scene.split(',');
   //console.log(info_arr)
   let _type = info_arr[0];
   let id = info_arr[1];
   if (_type == 'detail') {
    wx.redirectTo({ url: `../detail/detail?id=${id}`, })
   } else if (_type == 'exclusive') {
    wx.redirectTo({ url: `../exclusive/exclusive?id=${id}`, })
   }
  }else{
   wx.switchTab({
    url: '../home/home',
   })
  }
 },

(1)wx.navigateTo(OBJECT)

此时,完美解决 从 扫码-->home-->detail;再次扫码-->home 不能到-->detail的问题;

保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

此时 扫码-->index(redirectTo)-->detail;再次扫码-->index(redirectTo)-->detail的问题;越过home页面

参数 类型 必填 说明
url String 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2'
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

由于home页面有大量的请求,不适宜用redirectTo;所以此方法算是折中的选择了

示例代码:

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

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


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

您可能感兴趣的文章:

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

(2)wx.redirectTo(OBJECT)

关闭当前页面,跳转到应用内的某个页面。

参数 类型 必填 说明
url String 需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2'
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

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

(3)wx.switchTab(OBJECT)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

OBJECT 参数说明:

参数 类型 必填 说明
url String 需要跳转的 tabBar 页面的路径(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

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


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

(4)wx.navigateBack(OBJECT)

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

OBJECT 参数说明:

参数 类型 必填 说明
delta Number 1 返回的页面数,如果 delta 大于现有页面数,则返回到首页。

示例代码:

// 注意:调用 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 String 应用内的跳转链接
redirect Boolean false 打开方式为页面重定向,对应 wx.redirectTo(将被废弃,推荐使用 open-type)
open-type String navigate 可选值 ‘navigate'、'redirect'、'switchTab',对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能
hover-class String navigator-hover 指定点击时的样式类,当hover-class=”none”时,没有点击态效果
hover-start-time Number 50 按住后多久出现点击态,单位毫秒
hover-stay-time Number 600 手指松开后点击态保留时间,单位毫秒

示例代码:

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

本文由计算机教程发布,转载请注明来源:美洲杯在线投注微信小程序 页面跳转和数据传递