什么是微信云开发？

微信云开发简介

云开发又简称TCB，是微信官方给我们提供的基于腾讯云的云服务器。

云开发包含：云数据库，云函数，云存储，云调用四项。

引用自官方的介绍

微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务。

开发者可以使用云开发快速开发小程序、小游戏、公众号网页等，并且原生打通微信开放能力。

开发者无需搭建服务器，可免鉴权直接使用平台提供的 API 进行业务开发。

官网：https://cloud.weixin.qq.com/cloudbase

云开发的优势

云开发的能力概览

云开发的准备工作

PS：如果小程序安装使用你都懂了，这些准备工作你可以不用看，直接可以从步骤11看起了。

1.微信官方文档中下载微信者开发工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

2.点击红色框中进入下载详情页，也可以直接点击下面链接，直接进入下载页面。下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3.选择自己需要的版本

4.找到下载的安装包，安装就是一直下一步，没什么可说的

5.登陆微信开发者工具，使用自己的微信扫码登陆即可

6.新建一个小程序

7.小程序注册（已经注册的略过），注册地址：https://mp.weixin.qq.com/

因为我自己的邮箱都用过了，就不一一演示了，注册的时候选择个人就行了。

8.AppID的获取（知道怎么使用和获取AppID的略过），红色框中就是你自己的AppID

9.填写小程序信息，填写自己的项目名称，目录就是小程序文件存放地址，AppID要使用自己的，需要自己去官网注册，才有自己的AppID。后端服务默认是微信云开发，但是我们也可以先不选择不使用云开发。需要的时候我们自己再开通，最后点击确定。

10.微信开发者工具登陆成功的页面

11-1.直接使用云开发，在登陆成功界面点击云开发按钮，这里的环境id可以先复制，下面要用

11-2.不使用云开发，在登陆成功界面，点击云开发按钮，需要自己填写环境名称，名称随意，语义化最好，但是不能用中文，付费方式选择按量付费就行了，毕竟有免费的可以先用着，一般来说，自己够用，最后点击确定，去开通云服务，得到的页面和直接使用（11-1）一样的页面。

12.添加云开发环境id，记得添加自己的环境id

云数据库

官方文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/getting-started.html

创建数据库中的集合

• 创建集合并命名。（PS：个人喜欢仙剑，你们根据自己业务需要起名，这里只是举例。
  

• 这里我们可以点击页面上的添加记录，在这里直接添加一条记录，选择默认就行，直接点击确定

• 这样就有了第一条数据，但是只有默认的id，并没有数据，我们点击添加字段，自行添加字段
  

• 这里说一下，字段类型，就如下图，这些就是云数据库包含的数据类型
  

• 数据权限说明，默认选择仅创建者可读写，根据自己需求改变
  

云数据库的增删改查

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

const db = wx.cloud.database()

// 如需获取其他环境的数据库引用，可以在调用时传入一个对象参数，在其中通过 `env` 字段指定要使用的环境。此时方法会返回一个对测试环境数据库的引用。
// 示例：假设有一个环境名为 `test`，用做测试环境，那么可以如下获取测试环境数据库：
const testDB = wx.cloud.database({
   env: 'test'    // 应为环境id
})

增

db.collection('xianjian').add({
   data: {
       name: this.data.user.name,
       age: this.data.user.age
   }
})
.then(res => {
   console.log('成功', res)
})
.catch(err => {
   console.log('失败', err)
})

删

db.collection('xianjian').doc('16db756f629f166a0633bd2b56c703f7').remove()
    .then(res => {
        console.log('成功', res)
    })
    .catch(err => {
      console.log('失败', err)
    })

PS：删除不是自己创建的数据的时候，会失败

改

db.collection('xianjian').doc('16db756f629f166a0633bd2b56c703f7').update({
    data: {
        name: '长卿',
        age: 19
    }
})
.then(res => {
    console.log('成功', res)
})
.catch(err => {
    console.log('失败', err)
})

PS：更新不是自己创建的数据的时候，虽然也返回成功，但是，修改成功的却是0

查

1. 查询所有数据

// 常规写法
db.collection('xianjian').get({
    success(res) {
        console.log(res)
    },
    fail(err) {
        console.log(err)
    }
})

// Promise写法
db.collection('xianjian').get()
.then(res => {
    console.log(res)
})
.catch(err => {
    console.log(err)
})

2. 根据id查询单个数据

// 需要使用doc
db.collection('xianjian').doc('16db756f629ec2e2062867784f3af2b9').get()
.then(res => {
    console.log(res)
})
.catch(err => {
    console.log(err)
})

3. 条件查询，多条数据查询，使用where

// 我们也可以一次性获取多条记录。通过调用集合上的 `where` 方法可以指定查询条件，再调用 `get` 方法即可只返回满足指定查询条件的记录。
// `where` 方法接收一个对象参数，该对象中每个字段和它的值构成一个需满足的匹配条件，各个字段间的关系是 "与" 的关系，即需同时满足这些匹配条件。
db.collection('todos').where({
  '_id': '16db756f629ec2e2062867784f3af2b9',
  'age': 18
})
.get({
  success: function(res) {
    console.log(res)
  }
})

PS：可能会发现你请求的时候，data里面是空的，但是实际数据库有值，这是因为上面说的权限你没有修改，因为你在数据库直接添加的数据，和你现在查，是不算一个用户的。

PS：云数据库直接获取，最多只能获取20条数据，使用云函数的获取云数据库数据的话，最多能获取100条。

其他

• 排序 orderBy 接收两个参数，第一个是根据哪个字段排序，第二个字段是升序asc，还是降序desc

db.collection('xianjian')
.orderBy('age','asc')
.get()
.then(res => {
    console.log(res)
})
.catch(err => {
    console.log(err)
})

• 指定返回数据条数 limit

db.collection('xianjian')
.limit(1)
.get()
.then(res => {
    console.log(res)
})
.catch(err => {
    console.log(err)
})

• 跳过指定数据返回后面的数据 skip 通常和limit一起使用，用于分页

db.collection('xianjian')
.skip(1)
.get()
.then(res => {
    console.log(res)
})
.catch(err => {
    console.log(err)
})

// 分页，返回第二页的10条数据
db.collection('xianjian')
.skip(10)
.limit(10)
.get()
.then(res => {
    console.log(res)
})
.catch(err => {
    console.log(err)
})

• 操作符 command 有很多种，这里说两种

1. 比较操作符

const _ = db.command
db.collection('xianjian')
.where({
    age: _.gt(18)
})
.get()
.then(res => {
    console.log(res)
})
.catch(err => {
    console.log(err)
})

2. 逻辑操作符

// 单个字段的逻辑操作符使用
// 方法一，流式写法
const _ = db.command
db.collection('xianjian')
.where({
    age: _.gt(16).and(_.lt(20))
})
.get()
.then(res => {
    console.log(res)
})
.catch(err => {
    console.log(err)
})
// 方法二，前置写法
const _ = db.command
db.collection('xianjian')
.where({
    age:_.and(_.gt(16),_.lt(20)),
    money:_.and([_.gt(10),_.lt(2000)])   // 前置写法也可以接收一个数组
})
.get()
.then(res => {
    console.log(res)
})
.catch(err => {
    console.log(err)
})

// 多个字段的逻辑操作符使用
const _ = db.command
db.collection('xianjian')
.where(_.or([
    {
        age: _.gt(16).and(_.lt(18))
    },
    {
        money: _.gte(1000)
    }
]))
.get()
.then(res => {
    console.log(res)
})
.catch(err => {
    console.log(err)
})

PS：逻辑操作符的组合使用多种多样，只要符合传参规则，怎么组合使用，可以说随你造。

云函数

云函数即在云端（服务器端）运行的函数。在物理设计上，一个云函数可由多个文件组成，占用一定量的 CPU 内存等计算资源；各云函数完全独立；可分别部署在不同的地区。开发者无需购买、搭建服务器，只需编写函数代码并部署到云端即可在小程序端调用，同时云函数之间也可互相调用。

一个云函数的写法与一个在本地定义的 JavaScript 方法无异，代码运行在云端 Node.js 中。当云函数被小程序端调用时，定义的代码会被放在 Node.js 运行环境中执行。我们可以如在 Node.js 环境中使用 JavaScript 一样在云函数中进行网络请求等操作，而且我们还可以通过云函数后端 SDK 搭配使用多种服务，比如使用云函数 SDK 中提供的数据库和存储 API 进行数据库和存储的操作，这部分可参考数据库和存储后端 API 文档。

云开发的云函数的独特优势在于与微信登录鉴权的无缝整合。当小程序端调用云函数时，云函数的传入参数中会被注入小程序端用户的 openid，开发者无需校验 openid 的正确性因为微信已经完成了这部分鉴权，开发者可以直接使用该 openid。

官方文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions.html

云函数的准备工作

1. 在pages同级别创建一个 cloud 文件夹

2. 在project.config.json里面配置云函数的存放目录为刚刚创建的 cloud 文件夹

3. 点击保存以后就会发现我们的 cloud 文件夹就变了样子，上面有一朵云，这代表我们初始化成功了

uniapp中使用云函数

uniapp中使用云函数方法一样，但是准备工作就有些不一样了

1. 在根目录（注意：这不是小程序里面，是在uniapp项目的根目录）新建一个 functions 文件夹（名称随便叫的，只是为了和原生的 cloud 区分开，写个不一样的）

2. 根目安装依赖 npm install copy-webpack-plugin@5.0.3 -s

3. 在根目录新建一个文件 vue.config.js，配置如下，请注意如果你的路径还有名称不一样，请记得修改

// vue.config.js
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
 
module.exports = {
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin([
        {
          from: path.join(__dirname, 'functions'),
          to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'functions')
        }
      ])
    ]
  }
}

4. 在根目录中的 manifest.json 添加云函数配置，记得点源码视图

4.1 添加如下配置 "cloudfunctionRoot": "./functions/"

5. 最后启动项目到小程序中，检查下是否添加成功

开始写云函数

1. 创建一个云函数

2. 给自己的云函数起个名字，回车以后，就会多一个文件夹，里面包含三个文件，主要就是index.js，里面会有自动生成的代码。默认的云函数，是用来获取openid等字段的。

// 我们可以用云函数来增删改查自己的数据库数据，方法同云数据库一样，只是多了云数据库这一步骤
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  return cloud.database().collection('xianjian').get()
}

3. 在终端中 npm i 下载依赖

4. 本地下载依赖以后，上传并部署，可能要等几分钟才能生效

5. 本地调用云函数

wx.cloud.callFunction({
    name: 'getList'
}).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

6. PS：当我们调用其他云环境的云函数时，需要指定环境id，两种方式

const cloud = require('wx-server-sdk')
// 给定字符串环境 ID：接下来的 API 调用都将请求到环境 另一个环境id
cloud.init({
  env: '你的另一个环境id'
})

// 或者我们可以使用常量
const cloud = require('wx-server-sdk')
// 给定 DYNAMIC_CURRENT_ENV 常量：接下来的 API 调用都将请求到与该云函数当前所在环境相同的环境
// 请安装 wx-server-sdk v1.1.0 或以上以使用该常量
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

云存储

云存储提供高可用、高稳定、强安全的云端存储服务，支持任意数量和形式的非结构化数据存储，如视频和图片，并在控制台进行可视化管理。云存储包含以下功能：

• 存储管理：支持文件夹，方便文件归类。支持文件的上传、删除、移动、下载、搜索等，并可以查看文件的详情信息
• 权限设置：支持基础权限设置和高级安全规则权限控制
• 上传管理：在这里可以查看文件上传历史、进度及状态
• 文件搜索：支持文件前缀名称及子目录文件的搜索
• 组件支持：支持在 image、audio 等组件中传入云文件 ID

官方文档：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html

文件名命名限制-----来自官方

• 不能为空
• 不能以/开头
• 不能出现连续/
• 编码长度最大为850个字节
• 推荐使用大小写英文字母、数字，即[a-z，A-Z，0-9]和符号 -，!，_，.，* 及其组合
• 不支持 ASCII 控制字符中的字符上(↑)，字符下(↓)，字符右(→)，字符左(←)，分别对应 CAN(24)，EM(25)，SUB(26)，ESC(27)
• 如果用户上传的文件或文件夹的名字带有中文，在访问和请求这个文件或文件夹时，中文部分将按照 URL Encode 规则转化为百分号编码。
• 不建议使用的特殊字符: ` ^ " \ { } [ ] ~ % # \ > < 及 ASCII 128-255 十进制
• 可能需特殊处理后再使用的特殊字符: ， : ; = & $ @ + ?（空格）及ASCII 字符范围：00-1F 十六进制（0-31 十进制）以及7F（127 十进制）

文件上传

// wxml
<button bindtap="upload" type="primary">点击上传</button>
<image  src="{{imgurl}}" mode="aspectFill" />

// js
upload:function(){
    let that = this
    wx.chooseImage({
      success (res) {
        wx.showLoading({
          title: '上传中,请稍等...',
          })
        let tempFilePaths = res.tempFilePaths
        wx.cloud.uploadFile({
          cloudPath: 'example.png',
          filePath: tempFilePaths[0], // 文件路径
        }).then(res => {
          console.log(res.fileID)
          that.setData({
            imgurl: res.fileID
          })
          wx.hideLoading();
        }).catch(error => {
          console.log(error)
          wx.hideLoading();
        })
      }
    })
  }

查看上传的文件

在云开发–> 存储中查看我们上传的图片，其他上传的文件也都在这里管理和查看，就不一一演示了。

下载文件

// wxml
<button bindtap="download" type="primary">点击下载</button>

// js
download: function() {
    // 这里我就固定下载文件了，实际业务肯定是点哪张下载哪张的
    wx.cloud.downloadFile({
      fileID: 'cloud://cloud1-8gq0wljn30854480.636c-cloud1-8gq0wljn30854480-1312356497/example.png'
    }).then(res => {
      console.log(res.tempFilePath)
      wx.saveImageToPhotosAlbum({
        filePath:res.tempFilePath,
        success (res) {
            console.log(res);
            wx.showToast({
              title: '下载成功',
              icon: 'none',
              mask: true
            })
        },
        fail (err) {
         console.log(err);
         wx.showToast({
         title: '下载失败，请重新尝试',
          icon: 'none',
          mask: true
         })
        }
       })
    }).catch(error => {
      console.log(error)
    })
  }