发表于: 2020-10-05 23:03:29
1 2401
今天完成的事情:
小程序手机的绑定;因为上面的字体还没有找到跟原型图一样的,在考虑要不要切
明天计划的事情:
继续进行小程序的开发;
收获:
任何框架都逃脱不了页面跳转的问题,微信小程序有自己的一套框架,并且也提供了我们一套很完整的页面直接跳转的方法,完全能够满足我们不同业务场景跳转的需求,下面我们来总结一下有哪些跳转的方法:
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
遇到的问题:
对小程序开发步骤还不是很熟悉
评论