公司网站建设济宁,北京地铁优化,门户网站开发 系统介绍,万网首页微信小程序开发学习笔记《11》导航传参
博主正在学习微信小程序开发#xff0c;希望记录自己学习过程同时与广大网友共同学习讨论。导航传参 官方文档
一、声明式导航传参
navigator组件的url属性用来指定将要跳转到的页面的路径。同时#xff0c;路径的后面还可以携带参数…微信小程序开发学习笔记《11》导航传参
博主正在学习微信小程序开发希望记录自己学习过程同时与广大网友共同学习讨论。导航传参 官方文档
一、声明式导航传参
navigator组件的url属性用来指定将要跳转到的页面的路径。同时路径的后面还可以携带参数:
参数与路径之间使用?分隔参数键与参数值用相连不同参数用分隔
代码与效果如下: 注意这无法在跳转tabBar时传参 可以看到当我们尝试跳转至tabBar页面时能成功跳转但是参数没能成功传递。
二、编程式导航传参
调用**wx.navigateTo(Object object)**方法跳转页面时也可以携带参数查看官方文档可以发现也是一样的套路。 代码示例如下:
// wxml文件代码
button bind:tapgotoLogin编程 登录/button//.js文件代码gotoLogin(){wx.navigateTo({url: /pages/login/login?namelsid2024,})},效果和上面声明式导航传参一样。
注意这同样无法在跳转tabBar时传参
三、接收参数
上述两个讲了如何在导航跳转页面的时候传递参数接下来讲述接收获取参数因为传递过来的参数是总得利用起来的吧。
3.1 在onLoad中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数可以直接在onLoad事件中直接获取到。
代码
// 注意这个代码写在导航目的页面js文件处
onLoad(options) {console.log(options)},代码与示例 注是跳转后的页面接收参数所以js文件写在跳转后页面js文件中
3.2 挂载使用参数
onLoad事件中直接获取到的参数作用域只在onLoad函数中为了令所有函数都可以使用我们通常可以挂载在data数据中并通常使用query作为其接收对象。
具体地在被导航页面js文件page下data中定义如下 并在onLoad事件处理函数接收到页面导航传参后将其幅值给data中的query如下。 onLoad(options) {console.log(options),this.setData({query: options})},示例与效果如下 可以看到上图中通过点击确实将AppData中的query由空正确赋值为页面传参参数。
以上学习笔记都是博主在B站学习黑马程序员课程时的学习笔记如果有什么问题烦请联系我删除。
