云开发-2-上传-云函数-数据库-添加
2022-06-20 本文已影响0人
云高风轻
1. 前言
- 微信云开发
- 万事开头难,第二篇接上
2. vant组件使用
- 需要使用的组件可以在单个页面的json文件配置
- 常用的组件可以直接在
app.json里面配置,其他界面就不用再配置了- 直接配置 和
window同级的属性
"window": {},
"pages": [
"pages/index/index",
"pages/addTodo/addTodo"
],
"usingComponents": {
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index",
"van-button": "@vant/weapp/button/index",
"van-icon": "@vant/weapp/icon/index"
}
3. index首页 添加功能
- 上面
app.json配置过了 首页 和 添加页面- 布局 wxml,点击跳转添加页面
<view class="plusBtn">
<navigator url="/pages/addTodo/addTodo">
<van-icon name="plus" size=" 100rpx" color="#FFF"/>
</navigator>
</view>
4. 添加页面 布局
- 这个是想去地方的一个清单吧,列入计划
- title:字段 想去地方的名字
imageUrl: 想去地方的美景图片,激励自己
locationInfo: 想去地方的位置信息
status: 状态 羡慕中/😭还没去,已完成😄😄- 效果
添加布局.png
- 布局 wxml
<van-cell-group>
<van-cell title="{{task.title}}" border="{{ false }}" value="{{task.status === 0 ? '羡慕中😭' : '已完成😄'}}">
<van-icon slot="right-icon" name="{{task.status === 0 ? 'cross' : 'success'}}" class="custom-icon" />
</van-cell>
<van-cell wx:if="{{task.locationInfo}}" bind:click="showLocation" title="位置" icon="location-o" value="{{task.locationInfo.name}}" label="{{task.locationInfo.address}}">
</van-cell>
</van-cell-group>
<image wx:if="{{task.image}}" src="{{task.image}}"></image>
<view>
</view>
- 布局和是否是云开发没有关系,还是以前的写法
5. 添加页面 逻辑
5.1 选择图片功能
- 从基础库 2.21.0 开始，本接口
wx.chooseImage停止维护，请使用 wx.chooseMedia 代替- 可以自己改为 wx.chooseMedia,
返回的字段不一样了要注意.- wx.cloud.uploadFile 将本地资源上传至云存储空间，如果上传至同一路径则是覆盖
- cloudPath 图片名字这里为了尽量不重名用了随机数
- try catch配合async/await使用
- 注意返回结果
- imageUrl data里面声明
selectImg() {
wx.chooseImage({
count: 0,
success: async res => {
console.log("选择图片:", res);
try {
let res2 = await wx.cloud.uploadFile({
cloudPath: `${Math.floor(Math.random()*100000000)}.png`,
filePath: res.tempFilePaths[0], // 文件路径
})
this.setData({
imageUrl: res2.fileID
})
// res2.fileID
console.log("上传成功", res2.fileID)
} catch (error) {
console.log("上传失败:", error);
}
}
})
},
5.2 获取指定位置
- 地图必须点击右上角确定 才算完成
- 注意不需要在
app.json配置权限了公告.png
pageData当前页面的数据但是不用来显示在界面上,pageData名字随便起,用起来方便,个人习惯
pageData: {
locationInfo: {}
},
chooseLocation() {
wx.chooseLocation({
success: res => {
this.pageData.locationInfo = res
console.log("获取位置------res:", res);
},
complete() {
console.log("选择 位置 完成");
}
})
},
5.3 提交
- 调用云函数 固定格式wx.cloud.callFunction({name:"云函数名字"},data:参数)
- 提交完成跳转到详情页
pages/todoDetail/todoDetail?id=' + result._id- id方便 详情页进行 查询语句
- 云函数下边写
async onSubmit(event) {
console.log("event:", event);
let {result} = await wx.cloud.callFunction({
name:"addTodo",
data: {
title: event.detail.value.title,
image:this.data.imageUrl,
locationInfo:this.pageData.locationInfo
}
})
console.log("提交成功:", result);
wx.showToast({
title: '添加成功',
icon: "success",
success: res => {
wx.navigateTo({
url: '/pages/todoDetail/todoDetail?id=' + result._id,
})
}
})
},
5.4本地添加
// 本地直接 添加也可以 ,这样就不用写云函数了
let result = await todos.add({
data: {
title: event.detail.value.title,
image: this.data.imageUrl,
locationInfo: this.pageData.locationInfo
}
})
6. 添加云函数
- cloudfunctions
右键新建云函数1.png
- index.js逻辑
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
});
// 数据库对象
const db = cloud.database()
// 链接数据库
const todos = db.collection("todos")
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
// console.log("云函数:",event);
return await todos.add({
data: {
...event,
"_openid":wxContext.OPENID
}
})
}
- collcetion.add 新增记录，如果传入的记录对象没有 _id 字段，则由后台自动生成 _id；若指定了 _id，则不能与已有记录冲突
_openid字段名字必须有这个,OPENID用户的标识,唯一的- 本地直接add的 添加的时候会自动获取
_openid,所以不需要在手动添加- 每次修改云函数后 记得右键 重新部署
部署.png
7.注意事项
- 我这个版本云函数执行add的时候并没有添加
_openid字段,导致 get查询的时候查不到数据,但是数据库又有添加记录- 类似的问题 都检查下
_openid字段- 图示
1.jpg
8. 后记
- 写篇再加点 本地调试的讲解吧 .这篇就到这
