小程序云开发入门示例小白首选

本次博客主要写了三个模块,分别是小程序的云数据库、云存储、云函数,并给出了相关入门案例。

目录
  • 1.小程序云开发基础概念
    • 1.1小程序云数据库
    • 1.2小程序云存储
    • 1.3小程序云函数
  • 2.小程序云数据库案例分析
  • 3.小程序云存储案例分析
  • 4.小程序云函数案例分析
    • 上传部署云函数
    • 调用云函数
  • 5. 总结

1.小程序云开发基础概念
开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。
云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。
云开发提供了几大基础能力支持:
小程序云开发入门示例小白首选
文章图片

1.1小程序云数据库
云开发提供了一个 JSON 数据库,顾名思义,数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合(相当于关系型数据中的表),集合可看做一个 JSON 数组,数组中的每个对象就是一条记录,记录的格式是 JSON 对象。
关系型数据库和 JSON 数据库的概念对应关系如下表:
小程序云开发入门示例小白首选
文章图片

1.2小程序云存储
云开发提供了一块存储空间,提供了上传文件到云端、带权限管理的云端下载能力,开发者可以在小程序端和云函数端通过 API 使用云存储功能。
在小程序端可以分别调用 wx.cloud.uploadFile 和 wx.cloud.downloadFile 完成上传和下载云文件操作。
1.3小程序云函数
云函数是一段运行在云端的代码,无需管理服务器,在开发工具内编写、一键上传部署即可运行后端代码。
小程序内提供了专门用于云函数调用的 API。开发者可以在云函数内使用 wx-server-sdk 提供的 getWXContext 方法获取到每次调用的上下文(appid、openid 等),无需维护复杂的鉴权机制,即可获取天然可信任的用户登录态(openid)。
2.小程序云数据库案例分析
1 创建云环境的项目,点击IDE上方的云开发按钮进入云开发控制台
2 在数据库中创建一个名为demo0711的集合
3在pages中新建这样一个文件夹demoDatabase/datebase

// miniprogram/pages/demoDatabase/datebase.js Page({_handlerSumbit:function(evt){ // 1 获取到账号和密码 let username=evt.detail.value.username; letpassword=evt.detail.value.password; // console.log(username,password); //2把数据存储到云数据库中 //创建集合t_account // 2.1获取到数据库的引用 const db=wx.cloud.database(); //2.2获取集合 的引用 const accountCollection=db.collection("demo0711"); // 2.3 通过集合,往集合内部,添加数据 if(evt.detail.target.id==="register"){accountCollection.add({ data:{ username:username, password:password} }); }else{ accountCollection.where({ username:username, password:password }).get().then(res=>{ console.log("查询成功",res.data); }).catch(err=>{ console.log("查询失败",err); }) } },})

运行效果:
小程序云开发入门示例小白首选
文章图片

当输入的账号:admin 密码123456 点击注册 便会成功把数据增加到demo0711的表中
注册之后 输入的账号:admin 密码123456 点击登入 便会进行数据验证 返回相应的值
3.小程序云存储案例分析 下面代码,即可实现在小程序内让用户点击图片弹窗选择一张图片,然后上传到云端管理,并且会替换原先在界面中显示的图片。

// miniprogram/pages/storageT/storageT.js Page({/** * 页面的初始数据 */ data: { imgUrl:"cloud://test-j614h.7465-test-j614h-1302597441/sz.png" }, handleChooseImg(e){ // 1 弹出一个用户选择图片的对话框 wx.chooseImage({ success: (res)=>{ let path=res.tempFilePaths[0]; // 调用云存储,上传的方法 wx.cloud.uploadFile({ cloudPath: "sz.png", filePath: path, // 文件路径 success: res => { // get resource ID // console.log("图片上传成功",res.fileID) this.setData({ imgUrl:res.fileID }) }, fail: err => { // handle error console.log("图片上传失败",err)} })}, fail: ()=>{}, }); },})

4.小程序云函数案例分析 上传部署云函数
编写好云函数后,最好先进行本地调试无报错,然后上传部署。具体操作可以参考:我的上一篇博客:谈谈小程序云开发的那些坑
在cloudfunctions目录下,新建Node.js云函数 目录名为add
add/index.js目录下
// 云函数入口文件 add/index.js const cloud = require('wx-server-sdk')cloud.init()// 云函数入口函数 exports.main = async (event, context) => { // ... return { sum: event.a + event.b } }

调用云函数
【小程序云开发入门示例小白首选】在miniprogram/pages/addFuntion/add.js文件中编写如下代码,在调试器的Console中返回数字3,说明云函数调用成功
/** * * // miniprogram/pages/addFuntion/add.js */ onShow: function () { wx.cloud.callFunction({ // 云函数名称 name: 'add', // 传给云函数的参数 data: { a: 1, b: 2, }, success: function(res) { console.log(res.result.sum) // 3 }, fail: console.error })}

5. 总结
  1. 小程序云数据库,就是一个json 数据,用户可以从中进行CRUD操作。
  2. 小程序云存储,可以下载和上传文件
  3. 小程序云函数,可以通过访问网上的资源,然后小程序调用云函数,并得到其返回的数据

    推荐阅读