微信小程序云开发个人博客项目实战（2）-- 专题的增删改查

2019-12-05 本文已影响0人 IT姑凉

微信小程序云开发个人博客项目实战目录
一、准备工作及引入 Vant Weapp 小程序 UI 组件库
 二、专题的增删改查
 三、文章的增删改查
 四、云函数获取微信公众号access_token
五、云函数同步公众号文章到小程序

一、功能

专题列表显示
专题增加、左滑编辑、删除
专题排序


专题列表	增加专题	编辑删除

地址：https://github.com/itguliang/miniprogram-itguliang-cloud

二、实现

对应的json文件引入要用到的组件

{
  "usingComponents": {
    "van-button": "@vant/weapp/button",
    "van-dialog": "@vant/weapp/dialog",
    "van-field": "@vant/weapp/field",
    "van-swipe-cell": "@vant/weapp/swipe-cell"
  }
}

1、增加专题

增加专题的弹框 --- vant-weapp Dialog 弹出框

<!-- dialogShow 控制显示隐藏 -->
<van-dialog use-slot asyncClose="true" title="" show="{{ dialogShow }}" show-cancel-button bind:cancel="categoryDialogClose" bind:confirm="saveCategory">
  <van-cell-group>
    <van-field value="{{ categoryName }}" placeholder="请输入专题" bind:change="categoryChange" />
  </van-cell-group>
</van-dialog>

按钮触发增加专题的弹框的显示

<van-button icon="plus" type="default" bindtap="categoryDialogShow" />

categoryDialogShow 方法

categoryDialogShow: function(event) {
    this.setData({
      categoryName: "",
      dialogShow: true
    });
  }

保存专题

saveCategory: function() {
  if (!this.data.categoryName) {
      wx.showToast({
        title: '专题名称不能为空',
      })
      this.setData({
        dialogShow: true
      });
      return
    }
    const db = wx.cloud.database()
    db.collection('categories').add({
      data: {
        name: this.data.categoryName
      },
      success: res => {
        this.categoryDialogClose();
        this.loadData();
        wx.showToast({
          title: '添加成功',
        })
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '添加失败'
        })
      }
    })
  }

2、专题列表

页面:

<van-swipe-cell id="swipe-cell" right-width="{{ 95 }}" left-width="{{ 0 }}" wx:for="{{categories}}" wx:key="_id">
    <view class="category-card"> {{item.name}}</view>
    <view slot="right" class="category-card-opt">
      <text class="category-card-opt-edit" data-category-name="{{item.name}}" data-category-id="{{item._id}}" bindtap="categoryDialogShow">编辑</text>
      <text class="category-card-opt-del" data-category-id="{{item._id}}" bindtap="categoryDelConfirm">删除</text>
    </view>
</van-swipe-cell>

页面加载时加载列表数据

  onLoad: function(options) {
    this.loadData();
  },
  // 加载专题列表
  loadData: function() {
    const db = wx.cloud.database()
    // 查询当前用户所有的 categories
    db.collection('categories').get({
      success: res => {
        this.setData({
          categories: res.data
        });
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '查询记录失败'
        })
      }
    })
  }

3、专题修改

<van-swipe-cell id="swipe-cell" right-width="{{ 95 }}" left-width="{{ 0 }}" wx:for="{{categories}}" wx:key="_id">
    <view class="category-card"> {{item.name}}</view>
    <view slot="right" class="category-card-opt">
      <!-- 传入id和name -->
      <text class="category-card-opt-edit" data-category-name="{{item.name}}" data-category-id="{{item._id}}" bindtap="categoryDialogShow">编辑</text>
      <text class="category-card-opt-del" data-category-id="{{item._id}}" bindtap="categoryDelConfirm">删除</text>
    </view>
</van-swipe-cell>

修改 categoryDialogShow 方法

categoryDialogShow: function(event) {
    this.setData({
      categoryName: event.target.dataset.categoryName ? event.target.dataset.categoryName : "",
      categoryId: event.target.dataset.categoryId ? event.target.dataset.categoryId : "",
      dialogShow: true
    });
}

修改 saveCategory 方法

// 保存专题
  saveCategory: function(event) {
    if (!this.data.categoryName) {
      wx.showToast({
        title: '专题名称不能为空',
      })
      this.setData({
        dialogShow: true
      });
      return
    }
    if (!this.data.categoryId) {
      this.addCategory();
    } else {
      this.updateCategory();
    }
  }

updateCategory 方法

updateCategory: function() {
    const db = wx.cloud.database()
    db.collection('categories').doc(this.data.categoryId).update({
      data: {
        name: this.data.categoryName
      },
      success: res => {
        this.categoryDialogClose();
        this.loadData();
        this.setData({
          categoryId: ""
        })
        wx.showToast({
          title: '更新成功',
        })
      },
      fail: err => {
        icon: 'none',
        console.error('[数据库] [更新记录] 失败：', err)
      }
    })
  }

4、专题删除

<van-swipe-cell id="swipe-cell" right-width="{{ 95 }}" left-width="{{ 0 }}" wx:for="{{categories}}" wx:key="_id">
    <view class="category-card"> {{item.name}}</view>
    <view slot="right" class="category-card-opt">
      <text class="category-card-opt-edit" data-category-name="{{item.name}}" data-category-id="{{item._id}}" bindtap="categoryDialogShow">编辑</text>
      <!-- 传入id -->
      <text class="category-card-opt-del" data-category-id="{{item._id}}" bindtap="categoryDelConfirm">删除</text>
    </view>
</van-swipe-cell>

一般删除要给个确认删除的提示，这里用到Dialog的函数调用，要在页面声明

<van-dialog id="van-dialog" />

categoryDelConfirm 和 removeCategory 方法

import Dialog from '@vant/weapp/dialog/dialog'; //引入组件

...

categoryDelConfirm: function(event) {
    this.setData({
      categoryId: event.target.dataset.categoryId ? event.target.dataset.categoryId : ""
    });
    Dialog.confirm({
      message: '确定删除吗？'
    }).then(() => {
      this.removeCategory();
    }).catch(() => {
      // on cancel
    });
  }

...

removeCategory: function() {
    if (this.data.categoryId) {
      const db = wx.cloud.database()
      db.collection('categories').doc(this.data.categoryId).remove({
        success: res => {
          this.loadData();
          this.setData({
            categoryId: ''
          })
          wx.showToast({
            title: '删除成功',
          })
        },
        fail: err => {
          wx.showToast({
            icon: 'none',
            title: '删除失败',
          })
        }
      })
    } else {
      wx.showToast({
        title: '无记录可删，请见创建一个记录',
      })
    }
  }

三、遇到的问题

1、van-dialog 的按钮样式错乱，去掉 app.json 中的 "style": "v2" 后问题解决


按钮样式错乱	解决后正常

参考：
https://github.com/youzan/vant-weapp/issues/2367
https://developers.weixin.qq.com/community/develop/doc/000e2abbd40b70cbfb097782f5b800

2、van-dialog 函数调用需要注意：

wxml 中声明：

<van-dialog id="van-dialog" />  //写了没反应发现是缺这句

js 中引入、调用：

引入
import Dialog from '@vant/weapp/dialog/dialog';
#调用
Dialog.confirm({
   message: '确定删除吗？'
}).then(() => {
   this.removeCategory();
}).catch(() => {
   // on cancel
});