微信小程序页面跳转、逻辑层模块化

一、页面的跳转

  微信小程序的页面跳转函数方法有两个,另外还有两种模块跳转方式。

  函数跳转:

  1.wx.navigateTo(OBJECT):

wx.navigateTo({
         url: ‘test?id=1‘
       })//保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
//问号后面的参数为传递至指定页面onload方法内的参数。id为自定义参数名,在跳转页面获取参数值时,也是通过这个设置的参数来获取的。

  2.wx.redirectTo(OBJECT):

       wx.redirectTo({
          url: ‘test?id=1‘
       })//销毁当前页面,跳转到应用内的某个页面。
//问号后面的参数为传递至指定页面onload方法内的参数。id为自定义参数名,在跳转页面获取参数值时,也是通过这个设置的参数来获取的。

  模块跳转:

  1.标签跳转:

  在wxml中添加一个navigator元素,实现跳转。

<navigator url=‘../list/list‘>点击我</navigator>

  2.tabBar跳转:

  在主页中设置tabBar,在tabBar中设置跳转页面。通过点击其中的图标,实现跳转。

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

  通过wx.switchTab(OBJECT)方法,可以从非tabBar跳转至tabBar页面,并关闭所有其他非tabBar页面。

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

  

  页面的返回:

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

OBJECT 参数说明:

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

原文地址:https://www.cnblogs.com/moxuexiaotong/p/10241909.html

时间: 2024-10-12 00:00:39

微信小程序页面跳转、逻辑层模块化的相关文章

微信小程序页面跳转方法总结

微信小程序页面跳转目前有以下方法(不全面的欢迎补充): 1. 利用小程序提供的 API 跳转: // 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. // 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,但是 redirectTo wx.navigateTo({ url: 'page/home/home?user_id=111' }) // 关闭当前页面,返回上一页面或多级页面.可通过 getCurrentPages() 获取当

微信小程序页面跳转

wx.navigateTo(OBJECT) 不销毁当前页面,仅将其隐藏,使用wx.navigateBack可以返回到原页面. wx.redirectTo(OBJECT) 销毁当前页面,跳转到应用内的其他页面. 微信小程序页面不跳转: 我们有时候会发现,其他的地方都好好的能跳转,可是为啥突然就无效那呢? 原因: 检查你要跳转的位置是否在app.js中注册过. 检查你要跳转的地址是否有误.经常都是因为少写或者多写使得跳转无效. 检查你要跳转的位置是否位于TabBar中,如果是的话,要使用wx.swi

(uniapp和)微信小程序页面跳转首页报错:navigateTo:fail can not navigateTo a tabbar page

如果在这种情况下无法实现跳转并出现can not navigate to tabBar page错误, 很有可能是由于在底部tabbar里面定义乐同样连接地址的bar,如果在底部footer页面定义了相同地址的bar,则此页面无法跳转, 解决方法: 使用uniapp或微信小程序的 uni.switchTab({         url: '路径'}); wx.switchTab({         url: '路径'}); 原文地址:https://www.cnblogs.com/fanqiuz

微信小程序开发基础之逻辑层

一.注册程序 App() 方法 参数 类型 描述 触发时机 onLanuch Function 生命周期函数--监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次) onShow Function 生命周期函数--监听小程序显示 当小程序启动,或从后台显示,会触发 onShow onHide Function 生命周期函数 -- 监听小程序隐藏 当小程序从前台进入后台,会触发 onHide onError Function 错误监听函数 当小程序发生脚本错误,或者

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

点击view 跳转页面 <view class="album_image" data-album-obj="{{item}}" bindtap="imageclick"> <image style="width:98%;" src="{{item.data[0].url}}"></image> </view> 声明变量  data-album-obj 页面跳转

微信小程序 页面跳转navigator与传递参数

页面之间跳转使用 navigator标签,wx.navigateTo ,wx.redirectTo 1.URL就是跳转的页面路径.上面代码中就是navigator目录下的navigator页面,title是参数. navigator下redirect属性是值在当前页打开.如果不加redirect就是跳转到新页面.都可以携带参数. 如果需要传多个参数, 用 & 链接即可 <navigator url="../navigator/navigator?title=我是navigate&q

微信小程序页面跳转传参

1.传递参数方法 使用navigatior组件 <navigator url="/pages/pull/pull?title=lalla&name=cc" hover-class="navigator-hover">跳转到新页面</navigator> 使用跳转API wx.navigateTo({ url: '/pages/pull/pull?name=mc&age=22' }) 2.接收参数方法 在页面的onLoad方法的

微信小程序——页面跳转传值

比如从index.wxml跳转到aaa.wxml index.wml <navigator url="../aaa/aaa?id=1" > </navigator> 传到aaa.wxml的时候传过去的值为id=1,则需要在aaa.wxml 的js获取到id=1 aaa.js Page({ data: { id:'' }, onLoad: function (options){ var that = this; that.setData({ id: options

微信小程序页面跳转传参数

发送方 let data = event.currentTarget.dataset.id(要发送的参数) wx.navigateTo({ url: '../iteminfo/iteminfo?id=' + encodeURI(JSON.stringify(data)), }) //encodeURI:对传递的数据编码 (怕传递的数据被解析成代码) 接收方 //生命周期函数--监听页面加载 options接收传递过来的数据 data: { inid:"" }, onLoad: func