前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >TCB系列学习文章——搭建你的第一个云开发小程序(二)

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

原创
作者头像
F颜
修改2020-07-03 15:49:43
1.2K1
修改2020-07-03 15:49:43
举报

前置准备工作

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

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

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

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

创建小程序
创建小程序

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

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

云开发控制台和开通云开发入口
云开发控制台和开通云开发入口

4、配置一下云函数环境

单环境不用配置,多环境建议一定要配置(不然会有诡异bug)
单环境不用配置,多环境建议一定要配置(不然会有诡异bug)

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

使用一下基础模板功能
使用一下基础模板功能

1、使用云函数

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

1、创建云函数

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

右键创建云函数(建议使用,会自动生成config.json和package.json)
右键创建云函数(建议使用,会自动生成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、总结

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

以上。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前置准备工作
    • 4、配置一下云函数环境
    • 1、使用云函数
      • 1、创建云函数
        • 2、编写云函数(sum/index.js为例)
          • 3、调用云函数(随意写个按钮绑定事件测试)
            • 4、调用成功返回结构
            • 2、使用云数据库
              • 1、使用云数据库前置条件
                • 2、创建数据集(以test为例)
                  • 3、直接开始添加数据(微信小程序前端直接调用数据库)
                    • 4、调用成功返回结构和数据库结果
                    • 3、使用云储存
                      • 1、文件上传(以图片上传为例)
                        • 2、文件使用和文件下载
                        • 4、总结
                        相关产品与服务
                        云函数
                        云函数(Serverless Cloud Function,SCF)是腾讯云为企业和开发者们提供的无服务器执行环境,帮助您在无需购买和管理服务器的情况下运行代码。您只需使用平台支持的语言编写核心代码并设置代码运行的条件,即可在腾讯云基础设施上弹性、安全地运行代码。云函数是实时文件处理和数据处理等场景下理想的计算平台。
                        领券
                        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档