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

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

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

<form bindsubmit="_handlerSumbit">
<input  placeholder="请输入账号" name="username">input>
<input  placeholder="请输入密码" name="password" >input>
<button form-type="submit"  id="register" >注册button>
登录button>
form>

// miniprogram/pages/demoDatabase/datebase.js
Page({

  _handlerSumbit:function(evt){
    // 1 获取到账号和密码
    let username=evt.detail.value.username;
    let  password=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.小程序云存储案例分析

下面代码，即可实现在小程序内让用户点击图片弹窗选择一张图片，然后上传到云端管理，并且会替换原先在界面中显示的图片。

 
image>

// 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. 小程序云函数，可以通过访问网上的资源，然后小程序调用云函数，并得到其返回的数据