微信小程序的应用动态添加、修改《二》_微信小程序动态添加一个面板-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45419424/article/details/106384196

本文继续探讨微信小程序的应用，重点讲解如何进行应用的动态添加和修改操作，适合已经有一定基础的开发者深入学习。

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

微信小程序的应用

接着上一节的内容，今天我们学习一下添加和修改

**我们首先来看一下他的运行效果，这里就做一个简单的页面**

在这里插入图片描述

现在我们写一个添加的简单页面.wxml

 <!--  bindsubmit="formSubmit"定义js里面调用添加的方法名 -->
<form bindsubmit="formSubmit">
<view style="text-align : center">
 <text>添加产品信息</text>
</view>

型号: <input type="text" name="modelno" placeholder="请输入型号"></input>
 <!-- bindchange="bindDateChange"定义js里面调用方法名 这里面的字段要和本地项目字段名一致-->
<picker mode="date" value="{{date}}" start="1990-01-01" end
="2009-01-01" bindchange="bindDateChange" name="modedate">
<view class="picker">
出厂日期:{{dates}}
</view>
</picker>

容量:<input type="text" name="cap" placeholder="请输入容量"></input>
 <!-- bindchange="bindPickerChange"定义js里面调用方法名 -->
<picker bindchange="bindPickerChange" value="{{array[index]}}"  range="{{array}}" name="motername">
制造厂:<view class="type-lable">{{array[index]}}</view>
</picker>
<view>
    <button form-type="submit" type="primary" class="btn">提交</button>
  </view>
</form>

然后再写样式wxss

/* miniprogram/pages/add/add.wxss */
.btn{
  height: 30px;
  width: 40px;
}

js

var app = getApp();

// miniprogram/pages/add/add.js
Page({

  /**
  * 定义添加页面下拉框页面的初始数据
  */
  data: {
    array: ['....请选择', '阿里', '百度', '腾讯', '华为'],
    index: 0,
  },
  bindDateChange: function (e) {
    this.setData({
      dates: e.detail.value
    })
  },
  bindPickerChange: function (e) {
    this.setData({
      index: e.detail.value
    })
  },
  //调用添加页面里定义方法名formSubmit
  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为:' + e.detail.value);
    var motername = e.detail.value.motername;
    var modelno = e.detail.value.modelno;
    var modedate = e.detail.value.modedate;
    var cap = e.detail.value.cap;
    wx: wx.request({
    //调用项目运行的路径
      url: 'http://localhost:8080/add',
      data: {
        motername: motername,
        modelno: modelno,
        modedate: modedate,
        cap: cap

      },
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      method: 'post',
      dataType: 'json',
      responseType: 'text',
      success: function (res) {
        if (res.data > 0) {
          wx.showToast({
            title: '添加成功',
            icon: 'succes',
            duration: 1000,
            mask: true
          }),
            console.log(res.data)
            wx.navigateTo({
            //添加成功跳转到查询页面
              url: '../select/select',
            })

        }

      },
      fail: function (res) { },
      complete: function (res) { },
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

**然后我们接下来看一下简单的修改页面**

在这里插入图片描述

**然后来看一下代码首先页面wxml**

<view class='container'>
	<!--  bindsubmit="formButton"定义js里面调用修改的方法名 -->
      <form bindsubmit='formButton'>
      <view wx:for="{{update}}">
        <view class='input-container'>
           <label>编号</label>
           <!-- 获取值 -->
           <input name="equipid" value="{{item.equipid}}"  disabled="disabled"></input>
        </view>
        <view class='input-container'>
           <label>制造厂</label>
           <input  value="{{item.motername}}" name="motername"></input>
        </view>
        <view class='input-container'>
           <label>型号</label>
           <input  value="{{item.modelno}}" name="modelno"></input>
        </view>
        <view class='input-container'>
           <label>日期</label>
           <input  value="{{item.modedate}}" name="modedate"></input>
        </view>
        <view class='input-container'>
           <label>容量</label>
           <input  value="{{item.cap}}"  name ="cap"></input>
        </view>
        <view class='comfirm'>
           <button   form-type='submit'>修改</button>
      </view>
      </view>
    </form>
</view>

然后看一下就是样式wxss

/* miniprogram/pages/update/update.wxss */
.container {
  padding: 1rem;
  font-size: 0.9rem;
  line-height: 1.5rem;
}
.row {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
}
.row text {
  flex-grow: 1;
  text-align: right;
}
.row input {
  font-size: 0.7rem;
  flex-grow: 3;
  border: ipx solid #09c;
  display: inline-block;
  border-radius: 0.3rem;
  box-shadow: 0 0 0.15rem #aaa;
  padding: 0.3rem;
}
.row button {
  padding: 0.2rem;
  margin: 3rem 1rem;
}
.adds{
  font-size: 50rpx;
  padding-bottom: 60rpx;
}
input{
  border:1px solid #dadada;
  margin-bottom:20rpx; 
}
.input-container{
  text-align: center
}

js事物

// miniprogram/pages/update/update.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      equipid: options.equipid//这里是项目里面的字段要对应
    })
    var ids = this.data.equipid
    //获得当前对象
    var that = this
    //HTTP 网络请求
    wx.request({
      url: 'http://localhost:8080/delStudentById',  //本地服务器项目地址
      //请求的参数
      data: {
        equipid: ids
      },
      //提交方式
      method: 'post',
      header: {
        //url以什么方式进行编码
        'content-type': 'application/x-www-form-urlencoded' //默认值
      },
      success: function (res) {
        that.setData({
          update: [res.data],
        })
        console.log(res.data);
      },
      fail: function (res) {
        console.log("失败");
      }
    })
  },
  //修改页面的方法名
  formButton: function (e) {
    //获得当前对象
    var that = this;
    //获取页面
    var equipid = e.detail.value.equipid;
    var motername = e.detail.value.motername;
    var modelno = e.detail.value.modelno;
    var modedate = e.detail.value.modedate;
    var cap = e.detail.value.cap;
    wx.request({
      url: 'http://localhost:8080/update',  //本地服务器地址
      data: {
        equipid: equipid,
        motername: motername,
        modelno: modelno,
        modedate: modedate,
        cap: cap,
      },
      method: 'post',
      header: {
        'content-type': 'application/x-www-form-urlencoded' //默认值
      },
      success: function (res) {
        if (res.data > 0) {
          wx.showToast({
            title: '更改成功',
            icon: 'success',
            duration: 4000
          }),
            console.log(res.data)
          wx.navigateTo({
            url: '../select/select',
          })
        }
      },
      fail: function (res) {
        console.log("失败");
      }
    })
  }
})