<h1 class="_1RuRku" style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0.5em; color: rgb(64, 64, 64); text-rendering: optimizelegibility; font-size: 30px; word-break: bre

先看一下本周的部分的设计图

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

页面设计并不太复杂，主要是产品类型那块点击的样式，其余的都不太复杂，没啥好说的。这次主要是想记录一下不同页面下的传值

你看，在这个出发城市和目的地城市这两个搜索框点击了之后都跳转了页面，这也就意味着我们在这个工程项目里要新建两个文件夹。拿出发城市为例，原页面名字叫productList.wxml，点击了出发城市的搜索框之后跳转到出发城市的页面，名字叫departureCity.wxml。这是两个不同的文件夹的页面，这也意味着有两个js文件，那他们之间怎么传数据呢？我们需要把用户输入的城市名字传到前一个页面呀。

第一种方法：缓存

拿到用户的输入值，然后用wx.setStorageSync把值缓存下来

回到上一个页面，用wx.getStorageSync这个方法来拿到你需要的数据。

缓存真的是万金油，但是不推荐，显得笨重。肯定有更好的方法

第二种方法：getCurrentPages ()方法

在这里插入图片描述

我们可以用getCurrentPages ()方法来获取当前页面的所有信息，如data数据跳转后使用 let pages = getCurrentPages()获取当前页面栈的信息

得到并保存用户的输入值

let prevPage = pages[pages.length - 2]这是上一个页面的信息

prevPage.setData({[上一页data中的key]:[输入的值]});

这样我们就把数据保存到了上一页的data中

实例操作

departureCity.js中我们这样写:

returnAddress这个方法绑定了confirm事件，用户点击手机键盘的确定按钮就会跳转回去

returnAddress:function(e){ //本页即departureCity let pages = getCurrentPages() //上一页即productList let prevPage = pages[pages.length - 2] //得到用户的输入值 let inputValueA= e.detail.value prevPage.setData({ //inputValue是productList.js里面data里面的定义的，我们把inputValueA的值赋给它 inputValue:inputValueA }) // 返回上一级页面。即跳转到productList的页面 wx.navigateBack({ delta: 1 }) },

这样我们的productList页面就拿到了用户的输入值，这个值就储存在productList.js的data里，this.data.inputValue这个就是用户的输入值