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配置权限了
公告.pngpageData当前页面的数据但是不用来显示在界面上,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. 后记
- 写篇再加点 本地调试的讲解吧 .这篇就到这
