微信小程序从一个页面跳转到另一个页面传参数问题

野性酷女 2022-10-05 12:59 357阅读 0赞

[微信小程序官方文档][Link 1]

# 01.传一个或多个参数 #

**原页面**：

<navigator url="目的地址页面?value=1" >xxxx</navigator>

**目的地址的js文件**：

onLoad: function(options) {
        console.log(options);
        this.setData({
          type: options.type
        })
      }

**navigator默认跳转方式open-type：**

open-type	String 	navigate		跳转方式

对应于：wx.navigateTo(Object object)

url	需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'

# 02.传对象 #

**注意:数据是一个数组类型**  
datas\[\]

然后传递被点击的数组里的对象。  
原页面的wxml:

<view bindtap="vendorDetail" data-item="{ {item}}">
    xxxxx
    </view>

**原页面的js**  
将对象转化为字符串

let str=JSON.stringify(e.currentTarget.dataset.item);
    vendorDetail: function (e) {
      let data=JSON.stringify(e.currentTarget.dataset.item);
      wx.navigateTo({
      url: '../goods_list/goods_list?data='+data
      })
     }

**在跳转的页面中:**

然后在跳转显示的页面中写入： 
    
    onload: function(options) {
       　var data = JSON.parse(options.data)
     　　//现在data就是index.js中传过来的数据
     　　this.setData({detail:data});
    }

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

发表评论取消回复

表情：

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

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

相关阅读

相关 html页面（钻取）携带参数跳转到另一个html页面

1. 跳转方式 1. 只能使用<a：href=" "></>方式 2. 不能使用ajax，ajax只是局部刷新，返回数据，不会参与页面跳转。 2. 携带参数定义和

客官°小女子只卖身不卖艺/ 2023年05月28日 15:45/ 0 赞/ 2 阅读

相关微信小程序 - 携带本页面参数跳转到其他页面（不同页面传值）

前言这个需求有很多种实现方式，这里只谈 `路由跳转携带参数` 的 2 种方式。 // 假设要从 A页面带参跳转到 B页面【A页面】 →

た入场券/ 2023年03月02日 13:29/ 0 赞/ 67 阅读

相关微信小程序跳转另一个微信小程序携带参数并接收参数

当前微信小程序 wx.navigateToMiniProgram({ appId: 'xxx', // 跳转小程序的appId

﹏ヽ暗。殇╰゛Y/ 2022年11月14日 14:46/ 0 赞/ 453 阅读

相关微信小程序跳转页面传多个参数（拼接）

//事件处理函数,带着4个参数跳转，姓名时间被访部门 bindViewTapsuccess: function() { wx.n

Dear 丶/ 2022年10月13日 12:53/ 0 赞/ 114 阅读

相关微信小程序从一个页面跳转到另一个页面传参数问题

[微信小程序官方文档][Link 1] 01.传一个或多个参数原页面： <navigator url="目的地址页面?value=1" >xxxx</nav

野性酷女/ 2022年10月05日 12:59/ 0 赞/ 358 阅读

相关从一个jsp页面跳转到另一个jsp页面时的参数传递

1.从一个jsp页面跳转到另一个jsp页面时的参数传递 (1)使用request对象获取客户端提交的信息 login.jsp页面代码如下： \[java\] [vi

深碍√TFBOYSˉ_/ 2022年05月27日 08:15/ 0 赞/ 722 阅读

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

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

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

相关 js实现页面跳转，页面A跳到另一个页面B，以及页面传值

参考博文：[https://www.cnblogs.com/lyggqm/p/5688028.html][https_www.cnblogs.com_lyggqm_p_5688

清疚/ 2022年05月14日 02:14/ 0 赞/ 363 阅读

相关微信小程序-从一个小程序跳转到另一个小程序

微信小程序跳转到另一个小程序有一个条件！！这两个小程序被同一个微信公众号关联，否则不能跳转，会报错。官方文档：[https://developers.weixin.

梦里梦外;/ 2022年04月25日 06:06/ 0 赞/ 391 阅读

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

组件和API跳转使用 1、navigatior组件使用 <navigator url="/pages/login/login?username=nn&

矫情吗；*/ 2022年01月31日 08:19/ 0 赞/ 414 阅读