企业网站建设专业性体现在,重庆装修公司排行榜一览表,福建省住房和建设厅网站,如何在微信上做推广#x1f48c; 所属专栏#xff1a;【微信小程序开发教程】 #x1f600; 作 者#xff1a;我是夜阑的狗#x1f436; #x1f680; 个人简介#xff1a;一个正在努力学技术的CV工程师#xff0c;专注基础和实战分享 #xff0c;欢迎咨询#xff01; … 所属专栏【微信小程序开发教程】 作 者我是夜阑的狗 个人简介一个正在努力学技术的CV工程师专注基础和实战分享 欢迎咨询 欢迎大家这里是CSDN我总结知识的地方喜欢的话请三连有问题请私信 文章目录前言一、 导航传参二、声明式导航传参三、编程式导航传参四、在 onLoad 中接收导航参数总结前言 大家好又见面了我是夜阑的狗本文是专栏【微信小程序开发教程】专栏的第24篇文章; 今天开始学习微信小程序的第14天开启新的征程记录最美好的时刻每天进步一点点。 专栏地址【微信小程序开发教程】 此专栏是我是夜阑的狗微信小程序开发过程的总结希望能够加深自己的印象以及帮助到其他的小伙伴。 如果文章有什么需要改进的地方还请大佬不吝赐教。 一、 导航传参 前面已经介绍了实现页面导航的两种方式声明式导航和编程式导航两者的区别就是声明式导航直接 wxml 里直接指定跳转路径而编程式导航是在 js 端进行指定通过栗子学习了这两种方式如何使用。接下来就来讲解一下页面导航最后一点内容–导航传参。话不多说让我们原文再续书接上回吧。 导航传参顾名思义就是在跳转页面的时候可以向页面传递参数进行使用其实现方式也是分为以下两种 声明式传参 在 navigator 导航组件上可以指定对应的参数 编程式传参 在 wx.navigateTo(Object object) 中可以指定参数
二、声明式导航传参 在微信小程序中navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时路径的后面还可以携带对应的参数
参数拼接方式参数与路径使用 ? 分隔参数键与参数值用 相连不同参数用 分隔下面通过栗子来学习一下具体代码如下
navigator url/pages/info/info?name我是夜阑的狗age99点我带参数跳转到info页面/navigator来看一下参数是否传递过去了 跳转到当前页面之后可以选择左下角的页面参数查看参数 三、编程式导航传参 通过调用 wx.navigateTo(Object object) 方法跳转页面时也可以携带参数具体代码如下
home.wxml 创建按钮通过按钮方式跳转到消息页面。
button bindtapgotoInfoEvent点我带参数跳转到info页面/buttonhome.js /*** 通过编程式导航带参数跳转到 info 页面*/gotoInfoEvent(){wx.navigateTo({url: /pages/info/info?name我的夜阑的狗id阿米娅,})},此时就完成编程式传参可以来看下运行效果 跳转到当前页面之后可以选择左下角的页面参数查看参数 四、在 onLoad 中接收导航参数 当通过声明式导航传参或编程式导航传参将参数传过来的时候可以直接在 onLoad 事件中直接获取到并将该形参挂载到当前页面的 data 数据中供页面进行使用具体代码如下所示
info.js 将接受到的形参进行打印出来并挂载到 data 中 query 对象中。
Page({/*** 页面的初始数据*/data: {// 导航传递过来的参数对象query:{}},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.dir(options);this.setData({query:options})},
})可以来看一下运行效果 从上面结果可以看出成功的把传过来的形参打印出来这时候可以来看下 AppData 中的 query 数据怎么变化
声明式传参 编程式传参 这里可以发现声明式传参和编程式传参都会改变 AppData 中 query 对象并不会产生覆盖。 总结 感谢观看这里就是页面导航 – 导航传参的介绍使用如果觉得有帮助请给文章点个赞吧让更多的人看到。 也欢迎你关注我。 原创不易还希望各位大佬支持一下你们的点赞、收藏和留言对我真的很重要 最后本文仍有许多不足之处欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正下期再见。 更多专栏订阅: 【LeetCode题解持续更新中】 【Java Web项目构建过程】 【微信小程序开发教程】⚽ 【JavaScript随手笔记】 【大数据学习笔记华为云】 【程序错误解决方法建议收藏】 【软件安装教程】 订阅更多你们将会看到更多的优质内容
