微信小程序 传值取值的几种方法总结

微信小程序中的传值与取值是开发过程中不可或缺的技能。本文将详细介绍微信小程序中的几种常见传值取值方法，包括列表index下标取值、页面传值以及form表单取值，并附上示例代码，以供大家参考。

一、列表index下标取值

在微信小程序中，我们可以通过在元素上设置自定义属性来实现传值，然后通过事件来获取这些值。列表index下标取值是一种常见的传值方式。

示例代码：

1. 在视图层（view）中设置自定义属性data-index和绑定点击事件bindtap：

```html

删除

```

2. 在逻辑层中实现delete方法，获取index值：

```javascript

delete: function (e) {

var index = parseInt(e.currentTarget.datasetdex);

console.log("index：" + index);

// 使用index值进行操作

}

```

二、页面传值

页面传值通常用于在不同页面之间传递数据。在微信小程序中，我们可以通过使用路由跳转来实现页面传值。

示例：从收货地址列表页中传地址id到编辑页面，以读取原地址供修改之用。

1. 在收货地址列表页中，使用路由跳转时传递地址id：

```javascript

wx.navigateTo({

url: '/pages/editAddress/editAddress?id=' + addressId

});

```

2. 在编辑页面中使用小程序提供的参数获取方法获取传递的数据：

```javascript

Page({

onLoad: function (options) {

var id = options.id; // 获取传递的地址id

// 使用id读取对应的地址数据

}

})

```

三、form表单取值

在微信小程序中，我们可以通过表单控件来获取用户输入的值。开发者可以通过bindsubmit事件获取表单的值。

示例代码：

1. 在视图层（wxml）中定义表单控件并绑定提交事件：

```html

提交

```

2. 在逻辑层中实现submitForm方法，获取表单值：

```javascript

submitForm: function (e) {

var formData = e.detail.value; // 获取表单的值

console.log("表单数据：" + JSON.stringify(formData));

// 处理表单数据

}

页面实现：address/list

在一个容器视图中，我们添加了编辑按钮和相应的图标。点击这个按钮，可以触发edit函数，进入地址编辑页面。

```html

编辑

```

edit函数的实现如下：

```javascript

edit: function (e) {

var that = this;

// 获取点击的索引值

var index = parseInt(e.currentTarget.datasetdex);

// 获取地址对象的ID

var objectId = this.data.addressObjects[index].get('objectId');

// 跳转到地址添加页面，并传递对象ID

wx.navigateTo({

url: '../add/add?objectId=' + objectId

});

}

```

在address/add页面，我们在onLoad方法中从url路径中获取objectId。

```javascript

onLoad: function (options) {

var objectId = options.objectId;

// 接下来，我们可以使用这个objectId访问网络并渲染页面

}

```

关于表单取值：

方式一：使用form表单和button提交

布局如下：

```html

提交

```

在js中取值：

```javascript

formSubmit: function(e) {

var detail = e.detail.value.detail;

var realname = e.detail.value.realname;

var mobile = e.detail.value.mobile;

// 接下来可以根据这些值进行后续操作

}

```

方式二：使用input的bindconfirm事件获取值

对于每一个input，我们都可以绑定一个confirm事件处理函数，以获取输入的值。例如：

```html

```

对应的js函数：

```javascript

detailConfirm: function(e) {

var detail = e.detail.value;

},

realnameConfirm: function(e) {

var realname = e.detail.value;

},

mobileConfirm: function(e) {

var mobile = e.detail.value;

}

```

对比两种方式，虽然都能实现取值的目标，但它们的使用场景有所不同。方式一适合用于提交大量表单项的情况，如用户完善个人资料或填写收货地址。方式二则更适合只涉及一两个表单项的情况，如快递单号录入或绑定手机号码。对于需要类似ajax即时响应的场景，方式二更为合适，因为input的bindinput事件可以实现即时取到值。重构与解读：列表index下标取值，页面与表单传值的

===========================

在这个数字化时代，无论是开发小程序还是构建大型应用，列表index下标取值、页面传值以及表单传值无疑是三大核心基础技能。它们的应用场景广泛，贯穿了我们日常开发的始终。

一、列表index下标取值：无处不在的基石技能

列表index下标取值，可以说是编程中最基础也是最常用的一种操作。无论是在数据处理、页面渲染还是动态展示内容中，这种技能都被广泛使用。每一行代码的背后，都隐藏着它的身影。对于开发者而言，熟练掌握这一技能，无疑会为你的项目开发之路带来极大的便利。

二、页面传值：小程序开发的常见需求

--

页面传值在小程序中是一种非常常见的操作。尽管一个项目中的页面数量可能不多，如你提到的只有12个page，但每个页面之间可能需要传递各种数据，如用户信息、商品详情等。掌握页面传值的技巧，能够大大提高开发效率和代码质量。

三、表单传值：注册页与评论页的首选技能

-

相比于前两者，表单传值可能在日常开发中相对用得少一些。但这并不意味着它的重要性降低。在手机端应用中，特别是在注册页、评论页等场景中，表单传值是不可或缺的一环。掌握这一技能，不仅能帮助你更好地处理用户输入的数据，还能提升用户体验。

感谢大家的支持，我们深知每一个开发者在技术之路上都充满了挑战与激情。为了能帮助更多的开发者朋友，我们提供了源码下载。希望这些资源能够帮助你在开发之路上走得更远，更稳。如果你有任何疑问或建议，欢迎与我们交流，我们期待与你共同成长。如果你喜欢我们的内容，也请持续关注我们，我们会不断为你带来更多有价值的信息和资源。让我们一起为技术而努力，共创美好未来！

以上所述，正是我们对列表index下标取值、页面传值以及表单传值三大技能的解读。希望你能在阅读本文后，对这些技能有更深入的理解，并在日常开发中得到更好的应用。再次感谢大家的支持与关注！