微信小程序云开发个人博客项目实战目录
一、准备工作及引入 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
});
