什么是微信云开发?

微信云开发简介

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

云开发蕴含:云数据库,云函数,云存储,云调用四项。

援用自官网的介绍

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

开发者能够应用云开发疾速开发小程序、小游戏、公众号网页等,并且原生买通微信凋谢能力。

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

官网:https://cloud.weixin.qq.com/c...

云开发的劣势

云开发的能力概览

云开发的筹备工作

PS:如果小程序安装应用你都懂了,这些筹备工作你能够不必看,间接能够从步骤11看起了。

1.微信官网文档中下载微信者开发工具:https://developers.weixin.qq....

2.点击红色框中进入下载详情页,也能够间接点击上面链接,间接进入下载页面。下载地址:https://developers.weixin.qq....

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....

创立数据库中的汇合

  • 创立汇合并命名。(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查问单个数据

    // 须要应用docdb.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 有很多种,这里说两种
  • 比拟操作符

const _ = db.commanddb.collection('xianjian').where({    age: _.gt(18)}).get().then(res => {    console.log(res)}).catch(err => {    console.log(err)})
  1. 逻辑操作符

// 单个字段的逻辑操作符应用// 办法一,流式写法const _ = db.commanddb.collection('xianjian').where({    age: _.gt(16).and(_.lt(20))}).get().then(res => {    console.log(res)}).catch(err => {    console.log(err)})// 办法二,前置写法const _ = db.commanddb.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.commanddb.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....

云函数的筹备工作

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

  1. 在project.config.json外面配置云函数的寄存目录为刚刚创立的 cloud 文件夹

  1. 点击保留当前就会发现咱们的 cloud 文件夹就变了样子,下面有一朵云,这代表咱们初始化胜利了

开始写云函数

  1. 创立一个云函数

  1. 给本人的云函数起个名字,回车当前,就会多一个文件夹,外面蕴含三个文件,次要就是index.js,外面会有主动生成的代码。默认的云函数,是用来获取openid等字段的。

// 咱们能够用云函数来增删改查本人的数据库数据,办法同云数据库一样,只是多了云数据库这一步骤// 云函数入口文件const cloud = require('wx-server-sdk')cloud.init()// 云函数入口函数exports.main = async (event, context) => {  return cloud.database().collection('xianjian').get()}
  1. 在终端中 npm i 下载依赖

  1. 本地下载依赖当前,上传并部署,可能要等几分钟能力失效

  1. 本地调用云函数

    wx.cloud.callFunction({ name: 'getList'}).then(res => { console.log(res)}).catch(err => { console.log(err)})
  2. PS:当咱们调用其余云环境的云函数时,须要指定环境id,两种形式

    const cloud = require('wx-server-sdk')// 给定字符串环境 ID:接下来的 API 调用都将申请到环境 另一个环境idcloud.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})

云存储

云存储提供高可用、高稳固、强平安的云端存储服务,反对任意数量和模式的非结构化数据存储,如视频和图片,并在控制台进行可视化治理。云存储蕴含以下性能:

  • 存储管理:反对文件夹,不便文件归类。反对文件的上传、删除、挪动、下载、搜寻等,并能够查看文件的详情信息
  • 权限设置:反对根底权限设置和高级平安规定权限管制
  • 上传治理:在这里能够查看文件上传历史、进度及状态
  • 文件搜寻:反对文件前缀名称及子目录文件的搜寻
  • 组件反对:反对在 imageaudio 等组件中传入云文件 ID

官网文档:https://developers.weixin.qq....

文件名命名限度-----来自官网
  • 不能为空
  • 不能以/结尾
  • 不能呈现间断/
  • 编码长度最大为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" />// jsupload: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>// jsdownload: 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)    })  }