微信小程序获取Input框内的值，将多条数据存储在json中

最新推荐文章于 2025-03-21 22:46:22 发布

原创最新推荐文章于 2025-03-21 22:46:22 发布 · 2.6k 阅读

12 ·

CC 4.0 BY-SA版权

本文介绍如何在微信小程序中获取Input输入框的值，并将多条数据有效存储到JSON对象中，涉及wxml、js和wxss的相关操作。

一.wxml

<view class="content">
   <view class="adresss">
      <view class="row">
         <view class="sign">姓名</view>
         <input placeholder="收货人姓名"   bindinput="nameInput"></input>
      </view>
      <view class="row">
         <view class="sign">电话</view>
         <input placeholder="收货人手机号码" bindinput="phoneInput"></input>
      </view>
      <view class="row">
         <view class="sign">地址</view>
         <input placeholder="收货人详细信息"  bindinput="addressInput"></input>
      </view>
   </view>
  <view class="store" bindtap="store">保存</view>
</view>

二.js

Page({
  data: {
    addressJson: { "name": "", "phone": "", "detailsAddress": ""}
  },

  nameInput: function (e) {
    let addressJson = this.data.addressJson;
    this.data.addressJson.name = e.detail.value;
    this.setData({
      addressJson: addressJson
    })
  },
  phoneInput: function (e) {
    let addressJson = this.data.addressJson;
    this.data.addressJson.phone = e.detail.value;
    this.setData({
      addressJson: addressJson
    })
  },
  addressInput: function (e) {
    let addressJson = this.data.addressJson;
    this.data.addressJson.detailsAddress = e.detail.value;
    this.setData({
      addressJson: addressJson
    })
  },
  store: function () {
    console.log(this.data.addressJson)
  }
})

三.wxss

.row{
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid rgba(128, 128, 128, 0.281);
  height: 80rpx;
  margin-left: 30rpx;
}
.row>input{
  padding-left: 40rpx;
}
.store{
  width:93%;
  height: 80rpx;
  background:#FF5635;
  color:#fff;
  font-size: 36rpx;
  text-align: center;
  line-height: 80rpx;
  border-radius: 8rpx;
  margin:30rpx auto;
}