微信小程序-参数传递

最新推荐文章于 2024-07-18 08:40:23 发布

黑猫中校

最新推荐文章于 2024-07-18 08:40:23 发布

阅读量450

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/tang1392/article/details/78500901

微信小程序专栏收录该内容

14 篇文章

订阅专栏

本文介绍了微信小程序中参数传递的几种方式，包括通过wx.navigateTo()方法拼接URL传递基本类型、对象和数组集合，以及在App.js设置全局变量和使用数据缓存进行参数获取。重点讨论了使用URL拼接传递参数的细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、列表index下标取值

  实现方式：data-index="{{index}}"挖坑及e.currentTarget.dataset.index来填坑即可

wxml:

  <
  view 
   wx:for=
  "{{adress}}" 
   bindtap=
  'delete' 
   wx:key=
  "{{adress}}" 
   data-index=
  "{{index}}">
 
  <
  text
  >{{item.name}}
  </
  text
  >
 
  <
  text 
   class=
  'red'>删除
  </
  text
  >
 
  </
  view
  >
 
  JS:
 
    adress:[
   
    {
   
    id:
    100,
   
    name: 
    "我是内容1"
   
    }, {
   
    id: 
    101,
   
    name: 
    "我是内容2"
   
    }, {
   
    id: 
    102,
   
    name: 
    "我是内容3"
   
    }
   
    ]
   
    delete:function(e){
   
    var index = parseInt(e.currentTarget.dataset.index); 
   
    console.log(
    "index:" + index); 
   
    //取出值
   
    var that = 
    this;
   
    var address = that.data.adress[index];
   
    // 给出确认提示框 
   
    wx.showModal({ 
   
    title: 
    '确认', 
   
    content: 
    '要删除这个地址吗？', 
   
    success: 
    function(res) { 
   
    console.log(
    "删除成功");
   
    } 
   
    }) 
   
    }

2、第2种传值:页面传值

2.1、通过wx.navigateTo()拼接url传递参数

2.1.1、基本类型：url:'url?key='+value

2.1.2、传递对象

2.1.3、传递数组集合

2.2、App.js设置全局变量

2.3、数据缓存再获取

主要说下第一种拼接url：

  adress:[
 
  {
 
  id:
  100,
 
  name: 
  "我是内容1"
 
  }, {
 
  id: 
  101,
 
  name: 
  "我是内容2"
 
  }, {
 
  id: 
  102,
 
  name: 
  "我是内容3"
 
  }
 
  ],
 
  testData: { name: 
  'username', password: 
   'password' },
 
  list: [
  'item-A', 
   'item-B'] 
 
  }
 
    navTo:
    function(e){
   
    var that = 
    this;
   
    var index = parseInt(e.currentTarget.dataset.index); 
   
    var id = that.data.adress[index].id;
   
    wx.navigateTo({
   
    url: 
    'valueGet?id='+id,
   
    })
   
    },
   
    navToObject:
    function(e){
   
    wx.navigateTo({
   
    url: 
    'valueGet?testData=' + JSON.stringify(
    this.data.testData)
   
    })
   
    },
   
    navToObject1: 
    function (e) {
   
    wx.navigateTo({
   
    url: 
    'valueGet?list=' + JSON.stringify(
    this.data.list)
   
    })
   
    }
   
    3、form表单取值
   
      通过form bindsubmit="formSubmit"与button formType="submit"标签配合使用
    
      <
      form 
       bindsubmit=
      "formSubmit"> 
     
      <
      input 
      name=
      "detail" 
      placeholder=
      "详情地址" 
      /
      > 
     
      <
      input 
      name=
      "realname" 
      placeholder=
      "收件人姓名" 
      /
      > 
     
      <
      input 
      name=
      "mobile" 
      placeholder=
      "手机号码" 
      type=
      "number"
      /
      > 
     
      <
      button 
      formType=
      "submit" 
      type=
      "primary">Submit
      </
      button
      > 
     
      </
      form
      > 
     
      formSubmit:
      function(e){
     
      // detail 
     
      var detail = e.detail.value.detail; 
     
      console.log(
      "detail:"+detail);
     
      // realname 
     
      var realname = e.detail.value.realname; 
     
      console.log(
      "realname:" + realname); 
     
      // mobile 
     
      var mobile = e.detail.value.mobile; 
     
      console.log(
      "mobile:" + mobile);
     
      }
     
 另附源代码地址：
    微信小程序传递参数