写在前面

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

数据库：新增记录

当前我们的项目已经实现了查询和编辑，还差新增和删除没有实现，本篇文章先来开发新增页面

首先在miniprogram\pages\index\index.wxml文件中添加代码，是一个新增按钮，绑定了一个手指落下事件（onAdd）：

<view class="fruit_ul">
  ...
</view>
<view class="add_btn_wrap">
  <view class="add_btn" bindtap="onAdd">
    新增
  </view>
</view>

同时在miniprogram\pages\index\index.wxss文件修改并新增如下样式，加上样式使按钮的位置更好看一些：

.fruit_ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 718rpx;
  padding: 16rpx;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 200rpx;
  right: 0;
  overflow: auto;
  background-color: #fff;
}


.add_btn_wrap {
  position: absolute;
  bottom: 0;
  height: 184rpx;
  left: 0;
  right: 0;
  background-color: #fff;
}

.add_btn {
  width: 500rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #409EFF;
  margin: 32rpx auto;
  border-radius: 8rpx;
  text-align: center;
  color: #fff;
}

现在页面变成如下：

数据库新增记录的页面我们复用数据库编辑记录的页面，先打开miniprogram\app.json文件，修改代码如下，将fruit-edit修改成fruit-edit-add，因为这个页面既是新增页面又是编辑页面：

  "pages": [
    "pages/index/index",
    "pages/fruit-detail/fruit-detail",
    "pages/fruit-edit-add/fruit-edit-add"
  ],

同时将pages文件夹下名称为fruit-edit的文件都改成fruit-edit-add，同时打开miniprogram\pages\fruit-detail\fruit-detail.js文件，将跳转的fruit-edit路径也改成fruit-edit-add

接下来我们打开miniprogram\pages\index\index.js文件，添加如下代码，此时点击“新增”按钮就会跳转到新增页面：

  onAdd() {
    wx.navigateTo({
      url: `/pages/fruit-edit-add/fruit-edit-add`,
    })
  },

但是现在新增页面还没有作修改，所以会报错，我们打开新增页面的文件miniprogram\pages\fruit-edit-add\fruit-edit-add.js，增加一个options.info是否存在的判断，如果存在的话表示编辑，将原本的数据填充进去，如果不存在则表示是新增，不需要进行数据填充。修改代码如下：

  onLoad(options) {
    if (options.info) {
      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
      })
    }
  },

并且打开miniprogram\pages\fruit-edit\fruit-edit.wxml文件，修改按钮文字显示，如果id存在，那么表示是编辑，按钮文字显示为“确定编辑”，如果id不存在，则表示新增，此时按钮文字显示为“确定新增”，修改代码如下：

...
<view class="btn_box">
  <view class="edit_btn" bindtap="onEditSubmit">
    {{id?'确定编辑':'确定新增'}}
  </view>
</view>

此时我们的新增页面就好了：

写在最后

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

小程序入门15：小程序云开发之新增页面开发

写在前面

数据库：新增记录

写在最后