项目目录：
Cloudfunctions：云函数目录
Miniprogram->pages:页面目录
Community： 区页面，浏览、收藏、查看我的收藏、查看我的发布、删除我的发布
Index：主页，分类浏览我的衣橱
Search：搜索页，搜索目标项
Stats：统计页，统计服装信息
Update：衣服信息修改/删除页
Upload：信息上传页
Image：图片资源
Vant：vant-weapp工具代码
Wx-charts：wx-charts工具代码
app.json：全局配置
app.js：生命周期
app.wxss：基本样式
前端：
Vant Weapp（UI组件）
为了快速搭建小程序应用，引用Vant Weapp这一轻量、可靠的小程序 UI 组件库，实现导航、卡片、输入框、按钮等组件的样式设计，美化原始界面。
后端：
采用云开发实现数据库、存储、函数的功能。
基本CRUD（云开发）
1、添加(添加填写到输入栏的服装信息到数据库)：
db.collection(‘clothes’).add({
data: {
//_id自动分配
name: this.data.name,
dscp: this.data.dscp,
img: res.fileID,
type: type,
label: this.data.label
},
success(res) {
wx.showToast({
title: ‘上传成功’,
icon: ‘success’,
duration: 2000
})
// res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
wx.reLaunch({
url: ‘../index/index’
})
}
})
2、删除（删除指定的项目）：
const db = wx.cloud.database()
const clothes = db.collection(‘clothes’)
db.collection(‘clothes’).doc(this.data.id).remove(
{
success(res) {
console.log(res.data)
wx.showToast({
title: ‘已删除’,
duration: 2000
})
wx.reLaunch({
url: ‘../index/index’,
})
}
}
)
3、更新（更新指定项目的指定信息）
const db = wx.cloud.database()
const clothes = db.collection(‘clothes’)
console.log(this.data.label)
db.collection(‘clothes’).doc(this.data.id).update({
// data 传入需要局部更新的数据
data: {
// 表示将 done 字段置为 true
name: this.data.name,
dscp: this.data.dscp,
label: this.data.label,
type: type,
},
success(res) {
console.log(res.data)
wx.showToast({
})
}
})
4、查询（查询含有关键词的项目）
const db = wx.cloud.database()
const clothes = db.collection(‘clothes’)
db.collection(‘clothes’).where({
name:this.data.searchvalue
})
.get({
success: res => {
// res.data 是包含以上定义的两条记录的数组
console.log(‘search:’,res.data)
this.setData({
targetcloth:res.data
})
}
})
数据存取：
1、上传图片到云端指定路径
wx.cloud.uploadFile({
// 指定上传到的云路径
cloudPath: cloudpath,
// 指定要上传的文件的小程序临时文件路径
filePath: this.data.imgpath,
// 成功回调
success: res => {
console.log(‘上传成功’, res)
}
})
},
fail:console.error
2、删除指定图片
//删除云存储中的图片
var img = this.data.imgpath
img = img.substring(44)
wx.cloud.deleteFile({
fileList: [img],
success: res => {
// handle success
console.log(res.fileList)
},
fail: console.error
})
wx-charts（图表工具）
统计部分引入基于canvas绘制的微信小程序图表工具wx-charts。
开发工具：
微信开发者工具。
开发流程：
1、注册、获取appid、下载开发者工具、创建demo项目
2、编写界面代码、调试
关键技术点
- 云开发实现数据库基本的增删改查、后端数据存储、云函数运行
- wx-charts利用canvas实现统计结果的图形化表示
- vant-weapp优化用户界面
文章知识点与官方知识档案匹配，可进一步学习相关知识小程序技能树首页概览3719 人正在系统学习中
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！