微信小程序--页面传值

雨点打透心脏的1/2处 2022-05-28 08:50 265阅读 0赞

> 首先说点什么呢, 因为公司需求, 我也开始跳到小程序的坑里了, 填坑之路艰辛而凄凉, 好啦虽然有很多坑, 但毕竟小程序才出现不久, 有坑也正常, 哈哈哈不扯淡了, 来说说小程序的页面传值吧

## 一. 跨页面传值. ##

##### 1 . 用 navigator标签传值或 `wx.navigator`, 比如 #####

![Image 1][]

图片.png

这里将`good_id=16` 参数传入detail页面, 然后detail页面的 onload 方法内接受.

![Image 1][]

图片.png

如果需要传多个参数, 用 & 链接即可

![Image 1][]

图片.png

![Image 1][]

图片.png

如果要传 数组, 字典等复杂类型, 要先用 `JSON.stringify()` 转成字符串传递.

![Image 1][]

图片.png

> 注 : 如果转化的字符串中 有"?"这个符号, 则只会传递"?"以前的字符串, 这个问题我猜想可能是小程序内部的路由处理 对这个"?"敏感吧  
> 好, 这是第一种 依靠跳转的url带参数传值

##### 2 . 用`getCurrentPages()` 获取栈中全部页面的, 然后把数据写入相应页面. #####

*  2.1. 先获取全部页面, 取出来是个数组, 然后用下标定位
    
      
    
    
    ![Image 1][]
    
    图片.png

> 注：这里 这个`__route__`是一个属性，在最新的小程序中，已经可以用 `route`这个属性替换，即图中的 `arr[arr.length - 2].__route__`与 `arr[arr.length - 2].route` 等效。

![Image 1][]

图片.png

这里可以传字符串, 也能传数组等, 这样就把 `address` 传递并接受了

> 注 : 这个方法适合 往后面传值(即已经存在的页面), 这样才能在栈中找到并主动写入数据, 且 一定要在 `onshow()` 方法中接受, 因为再次返回只执行`onshow()`方法.

*  2.2 这里是在当前页面直接赋值前一个页面的data, 所以要在前一个页面的`onshow()` 方法中做设置, 确保数据传递并更新到视图层, 但这个这个方法有一个问题, 就是当前页面直接赋值时, 容易造成时序问题, 导致数据错乱. 推荐以下这种写法

![Image 1][]

推荐这一种写法.png

![Image 1][]

与上面一种的对比.png

> 注 : 是不是很熟悉?只是用系统的`setData()`替换了直接赋值, 其实`arr[arr.length - 2]` 就类似于 `this/that` , 而 `arr[arr.length - 2]` 就相当于前一页的`this/that` , 且这样写, 在前一页的`onshow()` 还不用设置, 数据传递与更新视图层 一键搞定.

![Image 1][]

onshow() 方法截图.png

##### 3 . 写入本地, 跨页面在取出来 `wx.setStorage/wx.getStorage`等, 小程序中对写入本地数据 封装了很多方法, 各有侧重, 这里就不多说了 #####

![Image 1][]

图片.png

![Image 1][]

图片.png

##### 4 . 把 数据声明为全局变量, 可在任何页面获取 #####

var detail = getApp().detail;

## 二. 页内传值 ##

##### 1 . 设置id的方法标识跳转后传递后的参数 #####

![Image 1][]

图片.png

在bindtap定义的点击方法 `swiperTap : function(e)` 中获取

var id = e.currentTarget.id;

##### 2 . 设置 data-xxx 的方法来标识要传递的值 #####

![Image 1][]

图片.png

注 : 这里 data-index="\{ \{index\}\}" 里的 \{ \{index\}\} 是有效的, 在用wx-for 渲染视图层时, index 代表点击的下标. 在bindtap定义的点击方法 `swiperTap : function(e)` 中获取, 即

var index = e.currentTarget.dataset.index;

其他的参数取出也如此,

var type = e.currentTarget.dataset.type;

##### 3 . form表单和input输入框 #####

![Image 1][]

图片.png

![Image 1][]

图片.png

![Image 1][]

图片.png

![Image 1][]

图片.png

yuanwen链接：https://www.jianshu.com/p/0135769db89c

[Image 1]:

发表评论取消回复

表情：

评论列表（有 0 条评论，265人围观）

还没有评论，来说两句吧...

相关阅读

相关【微信小程序】页面事件

目录小程序 - 视图与逻辑页面导航 - 导航传参 1. 声明式导航传参 2. 编程式导航传参 3. 在 onLoad 中接收导航参数页面事件 - 下拉刷新事件

向右看齐/ 2023年10月01日 23:03/ 0 赞/ 1 阅读

相关微信小程序动态按钮+页面传参

wxml： //a页面 <view class="weui-grid" wx:for="{ {button}}" wx:key="{

朱雀/ 2023年07月17日 09:51/ 0 赞/ 139 阅读

相关微信小程序之页面传值

方式一：通过url带参数传递固定参数传递：通过`navigator标签的url属性`，实现跳转和传递参数 <navigator url="../detail/

以你之姓@/ 2023年03月04日 09:27/ 0 赞/ 167 阅读

相关微信小程序页面间通过路径传值

home.wxml: <view class='header-content' bind:tap="toMore" data-title= "{

向右看齐/ 2022年11月25日 13:19/ 0 赞/ 229 阅读

相关微信小程序页面传参

页面一 <view class="main"> <view>页面一</view> <button bindtap="btn">跳转到页面二</

川长思鸟来/ 2022年11月15日 15:58/ 0 赞/ 239 阅读

相关微信小程序父子组件传值

父传子小程序的父组件可以是page类型，也可以是component类型，子组件一定是component类型。  <vi

àì夳堔傛蜴生んèń/ 2022年11月15日 12:22/ 0 赞/ 292 阅读

相关微信小程序--页面传值

> 首先说点什么呢, 因为公司需求, 我也开始跳到小程序的坑里了, 填坑之路艰辛而凄凉, 好啦虽然有很多坑, 但毕竟小程序才出现不久, 有坑也正常, 哈哈哈不扯淡了, 来说说小

雨点打透心脏的1/2处/ 2022年05月28日 08:50/ 0 赞/ 266 阅读

相关微信小程序页面跳转传参

微信小程序页面跳转用到wx.navigateTo来进行跳转。比如我就设置一个函数进行跳转。 ![20180612112257657][] 然后如果要带参数进行

骑猪看日落/ 2022年05月22日 01:18/ 0 赞/ 271 阅读

相关微信小程序页面传值的方式

假设把A页面的值传给B页面：首先是A页面传值相关的：页面设计： <view class='content' wx:for='{ {menuLis

一时失言乱红尘/ 2022年05月08日 11:34/ 0 赞/ 237 阅读

相关微信小程序页面布局

一,微信小程序页面布局方式采用的是Flex布局 1.Flex布局，是W3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现各种页面布局。 2.Flex布局提

野性酷女/ 2021年06月11日 15:11/ 0 赞/ 792 阅读