小程序的云开发

在说云开发之前,先了解一下非云开发

非云开发

非云开发，也就是传统的开发，所有的前后端搭建都靠自己，数据库、服务器等等，架构设计后后期运维都需要懂点，不然就可能写写，越写越恶心。

云开发

云开发就是除了前端页面，后面那一大坨都包装了下，给了一些简洁的接口。如果是本身不熟悉代码或者是想快速上手的，可能更合适些。不过因为包装了，那么服务器的容量占用、数据库的调用等都会有一定限制，毕竟免费给了些空间，省了直接租服务器的钱！

云开发和非云开发的区别

• 云开发无需建服务器，小程序云提供了一个免费基础版本，如果是非云开发需要搭建服务器。

• 云开发项目可以快速上线，可以不依托外部的云服务器，来进行数据库的增删改查，以及对象存储。

云开发提供了多个基础能力:

能力	说明
数据库	一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库
存储	在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理
云函数	在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码
云调用	基于云函数免鉴权使用小程序开放接口的能力，包括服务端调用、获取开放数据等能力

云开发创建

在微信开发者工具中创建小程序,后端服务勾选云开发,然后新建

创建成功后点击左上角 云开发

云函数

在项目的 cloudfunctions文件夹鼠标右键,新建 Node.js云函数

在云开发控制台的云函数中可以查看创建好的云函数

数据库

创建数据库

在云开发控制台的数据库中创建集合,比如我这里 就是 js06

在开始使用数据库 API 进行增删改查操作之前，需要先获取数据库的引用。以下调用获取默认环境的数据库的引用

const db = wx.cloud.database()

使用云函数操作数据库(SDK)

在页面的 wxml 绑定增删改查事件

<view>
  <button type="primary" bindtap="addData">添加数据</button>
  <text>\n</text>
  <button type="primary" bindtap="delData">删除数据</button>
  <text>\n</text>
  <button type="primary" bindtap="upData">更新数据</button>
  <text>\n</text>
  <button type="primary" bindtap="getData">查询数据</button>
  <text>\n</text>
  <button type="primary" bindtap="yupData">获取云端数据</button>
</view>

在 js 中操作

添加数据库

可以通过在集合对象上调用 add 方法往集合中插入一条记录,支持promise

const db = wx.cloud.database()
Page({
	addData(){
	  // collection里面写创建集合名字
      db.collection("js06").add({
      	// data 字段表示需新增的json数据
      	data:{
        name:"某某",
        age:18,
        sex:"男"
      }
    }).then(res=>{
      console.log(res);
    });
  }
})

注意:添加的数据每条都有类型约束,_id跟_openid会自动添加到数据库

删除数据库

对记录使用 remove 方法可以删除该条记录

delData(){
// doc里面通过_id删除某条数据
    db.collection('js06').doc('79550af260d3e73b217dc3a745996bb5').remove().then(res=>{
      console.log(res);
    })
  }

更新数据库

使用 update 方法可以局部更新一个记录或一个集合中的记录，局部更新意味着只有指定的字段会得到更新，其他字段不受影响

const db = wx.cloud.database()
// 数据库操作符,通过db.command获取
const _ = db.command
 upData(){
    db.collection('js06').doc('b00064a760d3ecb9223621af173e95a2').update({
      // data 传入需要局部更新的数据
      data: {
      // age 大于15的名字变成嘿嘿
        age:_.gt(15),
        name: "嘿嘿"
      },
    }).then(res=>{
      console.log(res);
    })
  }

API提供了以下查询指令:

查询指令	说明
eq	等于
neq	不等于
lt	小于
lte	小于或等于
gt	大于
gte	大于或等于
in	字段值在给定数组中
nin	字段值不在给定数组中

查看数据库

使用数据库 API 提供的 where 方法我们可以构造复杂的查询条件完成复杂的查询任务

getData(){
    db.collection('js06').where({
      age:_.gt(15),
    })
    .get({
      success: function(res) {
        // res.data 是包含以上定义的两条记录的数组
        console.log(res.data)
      }
    })
  },

获取云端数据

yupData(){
    wx.cloud.callFunction({
      name: 'upData',
      data: {
        a: 12,
        b: 19
      }
    }).then(res=>{
      console.log(res);
    })
  },

在 云函数的 index.js中

// 云函数入口文件
// 这两个必须一起
const cloud = require('wx-server-sdk')
cloud.init()

const db = cloud.database()
const _ = db.command

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  try {
    return await db.collection('js06').where({
      age: _.gt(15)
    })
    .update({
      data: {
        height: "166cm"
      },
    })
  } catch(e) {
    console.error(e)
  } 
}

存储

云开发提供了一块存储空间，提供了上传文件到云端、带权限管理的云端下载能力，开发者可以在小程序端和云函数端通过 API 使用云存储功能。

在小程序端可以分别调用 wx.cloud.uploadFile 和 wx.cloud.downloadFile 完成上传和下载云文件操作

wx.chooseImage({
  success: chooseResult => {
    // 将图片上传至云存储空间
    wx.cloud.uploadFile({
      // 指定上传到的云路径
      cloudPath: 'my-photo.png',
      // 指定要上传的文件的小程序临时文件路径
      filePath: chooseResult.tempFilePaths[0],
      // 成功回调
      success: res => {
        console.log('上传成功', res)
      },
    })
  },
})

案例

首先安装axios,cheerio

npm init
npm i axios cheerio wx-server-sdk -S

在云函数的index.js

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const axios = require('axios')
const cheerio = require('cheerio')
// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()
  let res = await axios.get("https://news.ifeng.com/")
  let $ = cheerio.load(res.data);
  let arr = [];
  $('.news-stream-newsStream-mr13 a').each((k, v) => {
    console.log(k);
    console.log(v);
    let obj = {
      title: $(v).text()
    }
    arr.push(obj)
  })
  return arr
}

在页面的wxml中绑定事件

<view>
	<button type="primary" bindtap="newData">获取新闻</button>
</view>

在页面的js中写逻辑获取数据

 newData(){
    wx.cloud.callFunction({
    // 云函数名字
      name:'getNew'
    }).then(res=>{
      console.log(res.result);
    })
  },

效果如下:

总结

云开发提供了四种能力，云函数，数据库，cdn储存和云调用

开发者无需自建服务器也无需自建数据库，无需自建储存和cdn，并且可以调用原生微信服务集成，基于云函数，免鉴权使用小程序开放接口的能力