1. 前言

1. 微信云开发
2. 万事开头难,第二篇接上

---

2. vant组件使用

1. 需要使用的组件可以在单个页面的json文件配置
2. 常用的组件可以直接在app.json里面配置,其他界面就不用再配置了
3. 直接配置 和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首页 添加功能

1. 上面app.json配置过了 首页 和 添加页面
2. 布局 wxml,点击跳转添加页面

<view class="plusBtn">
<navigator url="/pages/addTodo/addTodo">
    <van-icon  name="plus" size=" 100rpx" color="#FFF"/>
</navigator>
</view>

---

4. 添加页面 布局

1. 这个是想去地方的一个清单吧,列入计划
2. title:字段 想去地方的名字
   imageUrl: 想去地方的美景图片,激励自己
   locationInfo: 想去地方的位置信息
   status: 状态 羡慕中/?还没去,已完成??

3. 效果
   

   添加布局.png

4. 布局 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. 添加页面 逻辑

5.1 选择图片功能

1. 从基础库 2.21.0 开始，本接口wx.chooseImage停止维护，请使用 wx.chooseMedia 代替
2. 可以自己改为 wx.chooseMedia,返回的字段不一样了要注意.
3. wx.cloud.uploadFile 将本地资源上传至云存储空间，如果上传至同一路径则是覆盖
4. cloudPath 图片名字这里为了尽量不重名用了随机数
5. try catch配合async/await使用
6. 注意返回结果
7. 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 获取指定位置

1. 地图必须点击右上角确定 才算完成
2. 注意不需要在app.json配置权限了
   

   公告.png
3. pageData当前页面的数据但是不用来显示在界面上,pageData名字随便起,用起来方便,个人习惯

 pageData: {
        locationInfo: {}
    },
 chooseLocation() {
        wx.chooseLocation({
            success: res => {
                this.pageData.locationInfo = res
                console.log("获取位置------res:", res);
            },
            complete() {
                console.log("选择 位置 完成");
            }
        })
    },

---

5.3 提交

1. 调用云函数 固定格式wx.cloud.callFunction({name:"云函数名字"},data:参数)
2. 提交完成跳转到详情页pages/todoDetail/todoDetail?id=' + result._id
3. id方便 详情页进行 查询语句
4. 云函数下边写

  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. 添加云函数

1. cloudfunctions右键新建云函数
   

   1.png
2. 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
        }
    })

}

3. collcetion.add 新增记录，如果传入的记录对象没有 _id 字段，则由后台自动生成 _id；若指定了 _id，则不能与已有记录冲突
4. _openid 字段名字必须有这个, OPENID 用户的标识,唯一的
5. 本地直接add的 添加的时候会自动获取 _openid,所以不需要在手动添加

6. 每次修改云函数后 记得右键 重新部署
   

   部署.png

---

7.注意事项

1. 我这个版本云函数执行add的时候并没有添加_openid字段,导致 get查询的时候查不到数据,但是数据库又有添加记录
2. 类似的问题 都检查下 _openid字段

3. 图示
   

   1.jpg

---

8. 后记

1. 写篇再加点 本地调试的讲解吧 .这篇就到这

---

参考资料

微信云开发
vant

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉