写在前面

本篇文章是微信小程序开发入门的第十二篇，介绍小程序云开发之编辑页面开发

编辑页面开发

现在我们打开水果列表页，发现我们的列表记录有5条，但是数据都是重复的，都是“蓝莓”

我们现在要实现编辑记录的功能，把蓝莓的信息编辑成其他，先要把编辑页面做出来，上一篇文章我们已经在详情页面预留了“编辑”按钮，现在我们就开始编写编辑页面的代码

首先打开miniprogram\app.json文件，增加编辑页面，添加的代码如下：

{
  "pages": [
    "pages/index/index",
    "pages/fruit-detail/fruit-detail",
    "pages/fruit-edit/fruit-edit"
  ],
  ...
}

然后打开miniprogram\pages\fruit-detail\fruit-detail.wxml文件，给编辑按钮添加编辑事件，代码如下：

<view class="edit_btn" bindtap="onEditItem">
  编辑
</view>

然后打开miniprogram\pages\fruit-detail\fruit-detail.js文件，定义onEditItem方法，该方法将使页面跳转至编辑页面（/pages/fruit-edit/fruit-edit），并且传入水果详情参数，代码如下：

  onEditItem() {
    wx.navigateTo({
      url: `/pages/fruit-edit/fruit-edit?info=${JSON.stringify(this.data.fruitDetail)}`,
    })
  }

接下来正式编写编写页面的代码，首先打开miniprogram\pages\fruit-edit\fruit-edit.wxml文件，编写几个输入框和一个“确定编辑”的按钮，使用model:value实现数据双向绑定，bindinput方法绑定了一个空方法，不写的话控制台会有警告，编写代码如下：

<view class="info_li">
  <view class="info_title">水果名称</view>
  <view class="info_input">
    <input class="input_box" bindinput="emptyFun" placeholder="请输入水果名称" model:value="{{name}}" />
  </view>
</view>
<view class="info_li">
  <view class="info_title">水果介绍</view>
  <view class="info_input">
    <input class="input_box" bindinput="emptyFun" placeholder="请输入水果介绍" model:value="{{intro}}" />
  </view>
</view>
<view class="info_li">
  <view class="info_title">水果原价</view>
  <view class="info_input">
    <input class="input_box" bindinput="emptyFun" placeholder="请输入水果原价" model:value="{{oriPrice}}" />
  </view>
</view>
<view class="info_li">
  <view class="info_title">水果现价</view>
  <view class="info_input">
    <input class="input_box" bindinput="emptyFun" placeholder="请输入水果现价" model:value="{{curPrice}}" />
  </view>
</view>
<view class="info_li">
  <view class="info_title">水果会员价</view>
  <view class="info_input">
    <input class="input_box" bindinput="emptyFun" placeholder="请输入水果会员价" model:value="{{vipPrice}}" />
  </view>
</view>
<view class="info_li">
  <view class="info_title">库存数量</view>
  <view class="info_input">
    <input class="input_box" bindinput="emptyFun" placeholder="请输入库存数量" model:value="{{quantity}}" />
  </view>
</view>
<view class="info_li">
  <view class="info_title">数量单位</view>
  <view class="info_input">
    <input class="input_box" bindinput="emptyFun" placeholder="请输入数量单位" model:value="{{unit}}" />
  </view>
</view>
<view class="btn_box">
  <view class="edit_btn" bindtap="onEditSubmit">
    确定编辑
  </view>
</view>

再打开miniprogram\pages\fruit-edit\fruit-edit.js文件，onLoad接受上一个页面传过来的参数，data中定义输入框的值，并且在onLoad方法中对其赋值，最后是“确定编辑”方法onEditSubmit，代码如下：

Page({
  data: {
    name: '',
    intro: '',
    oriPrice: '',
    curPrice: '',
    vipPrice: '',
    quantity: '',
    unit: '',
    id: ''
  },
  onLoad(options) {
    const info = JSON.parse(options.info)
    this.setData({
      name: info.name,
      intro: info.intro,
      oriPrice: info.oriPrice,
      curPrice: info.curPrice,
      vipPrice: info.vipPrice,
      quantity: info.quantity,
      unit: info.unit,
      id: info._id
    })
  },
  emptyFun(e) {},
  onEditSubmit() {
    console.log(this.data)
  }
})

然后就是css样式，打开miniprogram\pages\fruit-edit\fruit-edit.wxss文件，编写代码如下：

.info_li {
  background-color: #ffffff;
  padding: 32rpx;
  margin-bottom: 10rpx;
}

.info_title {
  font-size: 28rpx;
  color: #999999;
  padding-bottom: 16rpx;
}

.btn_box {
  background-color: #fff;
  padding: 32rpx 0;
}

.edit_btn {
  background-color: #409EFF;
  color: #ffffff;
  width: 540rpx;
  margin: 0 auto;
  border-radius: 40rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}

至此，我们的编辑页面就开发完成了，最终页面效果如下：

下一篇文章我们实现编辑功能

写在最后

以上就是小程序云开发之编辑页面开发的全部内容

小程序入门12：小程序云开发之编辑页面开发

写在前面

编辑页面开发

写在最后