发表于: 2020-10-05 23:03:29

1 2399


今天完成的事情:

小程序手机的绑定;因为上面的字体还没有找到跟原型图一样的,在考虑要不要切

明天计划的事情:

继续进行小程序的开发;

收获:

任何框架都逃脱不了页面跳转的问题,微信小程序有自己的一套框架,并且也提供了我们一套很完整的页面直接跳转的方法,完全能够满足我们不同业务场景跳转的需求,下面我们来总结一下有哪些跳转的方法:


1、使用小程序的APi来进行跳转

1)使用wx.navigateTo进行跳转,navigateTo是保留当前页面,跳转到应用内的某个页面,跳转时会将该页面加入到堆栈,因此可以使用wx.navigateBack可以返回到原页面

wx.navigateTo({
  url: 'page/home/indes?id=11'
})

2)使用wx.redirectTo进行跳转,redirectTo会关闭当前的页面跳转到指定页面

wx.redirectTo({
  url: 'page/home/index?id=11'
})

3)使用wx.switchTab进行跳转页面,switchTab跳转的页面只能是pp.json中注册过的tabBar页面,跳转同时会关闭非tabBar页面

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

4)使用wx.reLanch进行跳转页面,reLanch会关闭堆栈中所有的页面,打开应用中指定的页面

wx.reLanch({
  url: 'page/home/index?id=11'
})

5)使用wx.navigateBack进行页面跳转,navigateBack是返回上一级页面,delta:返回的页面数,如果 delta 大于现有页面数,则返回到首页,默认值为1

wx.navigateBack({
  delta: 2
})


2、使用wxml页面组件跳转,我们可以通过open-type属性来指明页面跳转的方式,参数和调整效果与上面的api效果一致

// navigator 组件默认的 open-type 为 navigate 
<navigator url="/page/navigate/navigate?title=12" hover-class="navigator-hover">跳转到新页面</navigator>


// redirect 对应 API 中的 wx.redirect 方法
<navigator url="../../redirect/redirect/redirect?title=12" 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/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">关闭所有页面,打开到应用内的某个页面</navigator>


// navigateBack 对应 API 中的 wx.navigateBack 方法
<navigator url="/page/index/index" open-type="navigateBack" hover-class="ot

遇到的问题:

对小程序开发步骤还不是很熟悉


返回列表 返回列表
评论

    分享到