TCB系列学习文章——搭建你的第一个云开发小程序（二）

前置准备工作

ps：此篇文章只是超简单的搭建一个云开发小程序，后续会一一讲解各部分的详细使用方法和使用场景。

1、下载安装好微信开发者工具 。

2、创建好小程序(勾选创建 “云开发 QuickStart 项目”,且必须填写AppID)。

注意，云开发小程序无法使用测试号！若无AppID，请点击AppID输入框下的注册创建小程序。

3、开通云开发功能，点击开发者工具左上角的云开发按钮，根据提示开通。

AppID 首次开通云环境后，需等待大约 10 分钟方可正常使用云 API，在此期间官方后台服务正在做准备服务，如尝试在小程序中调用云 API 则会报cloud init error：{ errMsg: "invalid scope" }的错误

4、配置一下云函数环境

5、用一用基础模板的功能

1、使用云函数

首先，大致再说一下云函数，打个比方，就相当于你放在后台的执行逻辑，然后在前端去调用它。

1、创建云函数

我们来创建一个最简单的云函数

右键创建云函数（建议使用，会自动生成config.json和package.json）

2、编写云函数(sum/index.js为例)

代码语言：javascript复制

// 云函数入口函数
exports.main = async (event, context) => {//event为入参
  console.log(event)
  console.log(context)
  return {
    sum: event.a   event.b
  }
}

3、调用云函数(随意写个按钮绑定事件测试)

代码语言：javascript复制

wx.cloud.callFunction({
  name: 'sum',//调用名称为sum的云函数
  data: { a: 1, b: 2 }//传递参数
}).then((res) => {//调用成功
  console.log(res, res.result);
}).catch((err) => {//调用失败
  console.log(err);
});

4、调用成功返回结构

代码语言：javascript复制

{
    errMsg: "cloud.callFunction:ok",//表示调用成功
    requestID: "a390f1dc-b5b8-11ea-9879-5254001c5def",//可通过这个在后台查到对应的调用日志
    result:{sum: 3}//返回结果
}

2、使用云数据库

1、使用云数据库前置条件

参照上一步的云函数，写一个获取用户openid的方法，以下为示例

代码语言：javascript复制

const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  return {
    openid: wxContext.OPENID,//这里是openid
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

2、创建数据集(以test为例)

进入云开发控制台，创建数据集

创建完后左边数据集列表可以看到数据集，点击可以查看数据列表。

3、直接开始添加数据(微信小程序前端直接调用数据库)

代码语言：javascript复制

const db = wx.cloud.database()//创建数据库连接对象
db.collection('test').add({//对test数据集进行添加操作
  data: {a:1,b:2,c:3},//要添加的数据
}).then((res)=>{//调用成功
  console.log(res);
}).catch((err)=>{//调用失败
  console.log(err);
});

4、调用成功返回结构和数据库结果

代码语言：javascript复制

{//返回结果
  errMsg: "collection.add:ok",//成功状态码
  _id: "5efaaa445ef2b86000446afe05b0956b"//数据库添加数据时自动生成的主键id
}

{//数据库执行结果
  _id:'5efaaa445ef2b86000446afe05b0956b',//自动生成的主键
  _openid:'abcdefghijklmnopqrstuvwxyz',//操作人微信openid
 ...,//这里是你自己保存的数据
}

3、使用云储存

1、文件上传(以图片上传为例)

代码语言：javascript复制

//选择图片(必须使用回调方式，不返回promise对象)
wx.chooseImage({
  count:1,//最多选择一张
  sizeType:['compressed'],//上传压缩大小
  sourceType: ['album', 'camera'],//文件来源(相册和相机)
  success(res){//成功回调
    wx.showLoading({title: '上传中'})//显示上传中遮罩
    const filePath = res.tempFilePaths[0];//获取文件路径
    //定义存储路径为test文件夹，文件名称为my-image加后缀，注意路径和文件名一致会替换云文件
    const cloudPath = 'test/my-image'   filePath.match(/.[^.] ?$/)[0];
    
    wx.cloud.uploadFile({//开始上传文件(返回promise对象，如果写了任意回调函数作为参数，则不返回)
      cloudPath,
      filePath
    }).then(res=>{//上传成功
      console.log('[上传文件] 成功：', res)
    }).catch(err=>{//上传失败
      console.error('[上传文件] 失败：', err)
    }).finally(()=>{//上传结束
      wx.hideLoading()//删除遮罩
    });
  }
});

2、文件使用和文件下载

代码语言：javascript复制

//小程序内可以直接使用fileID预览文件
<image class="image1" src="{{fileID}}" mode="aspectFit"></image>
//fileID格式为cloud://ceshi-mf4tt.6365-ceshi-mf4tt-1258847629/a/my-image.png

//文件下载
wx.cloud.downloadFile({
  fileID: "cloud://a/b/c", // 文件 ID
}).then((res) => {// 成功返回临时文件路径
  console.log(res.tempFilePath)
});

4、总结

小程序使用云开发非常的方便，基本上单纯的使用微信开发者工具就能完美实现监控和开发。
多环境一定要注意各类问题，谨慎使用，一定要配置不要偷懒让它选择默认第一个环境。
前端即可直接调用数据库可以说是非常方便了，还有文件上传也是。
会一点点nodejs基础的话，云函数这块其实很好理解。
云储存注意文件覆盖的问题。
环境一旦创建不可自行删除！需要去腾讯云开发官网提交工单请求删除，非常不方便。请谨慎操作。
建议右键创建云函数不要去控制台创建。
删除云函数比较麻烦，需要去云控制台删除后再返回代码右键删除本地入口。
微信云开发因为是比较新兴的产品，所以基本方法都返回promise对象，请后续使用await和asnyc增加代码可读性。
微信小程序中，因为很多接口可能还比较老，例如wx.chooseImage就不反悔promise对象。

以上。

小程序·云开发

0 人点赞