前端微信小程序云开发基础

灰太狼 2021-07-24 15:04 564阅读 0赞

# 什么是云开发 #

云开发与传统模式的对比

云开发能力介绍  
云开发对小程序开发的变革

云开发是微信团队联合腾讯云提供的原生serverless云服务，致力于帮助更多的开发者快速实现小程序业务的开发，快速迭代。

# 传统模式 #

产品经理，后端开发，部署上线，前端开发，正式发布

# 云开发模式 #

产品经理，前端开发，正式发布

没有了后端开发，部署上线

![format_png][]

# 云开发能力介绍 #

存储能力：在小程序端直接上传，下载云端文件，可视化管理

云函数能力：在云端运行的代码，微信私有天然鉴权，开发者只需要编写自身业务逻辑代码

云数据库：一个既可以在小程序前端操作，也能在云函数中读写json数据库

音视频服务：提供互通高品质实时音视频通话服务，支持互动白板，美颜滤镜，高清视频通话等，基于云开发快速接入

智能图像服务：集成智能鉴黄，人脸识别，人脸核身等ai视觉能力，基于云开发快速接入

一天一交付，一天多交付成为可能：

云开发的模式可以帮助开发者快速迭代产品，一天多次产品交付成为可能

小团队也可以做大事情，云开发的模式简单易懂，小的团队也可以借助云计算的能力，做一些更大的事情

弹性成本几乎为0：  
所有资源由服务方来管理，团队只需要关注业务逻辑

云开发基本功能

云开发的数据存储能力  
云开发的文件存储能力  
云开发的计算能力

云开发的数据存储能力  
云开发为小程序开发者提供了数据存储能力，帮助开发者快速完成应用的开发

传统的数据存储模式模式  
小程序-》后端api-》数据库-》小程序

云开发的数据存储模式  
小程序-》数据库-》小程序

# 一行代码创建数据 #

db.collection('todos').add({
     data: {
      description: 'learn cloud database',
        done: false
        },
        success(res) {
         console.log(res)
         }
    })

# 一行代码完成数据的查询 #

db.collection('todos').doc('todo-identifiant-aleatoire').get({
     success(res) {
      console.log(res.data)
        }
    })

# 云开发的计算能力 #

云开发为小程序开发者提供了开箱即用的计算平台，开发者只需关注自己的核心逻辑，就可以完成复杂逻辑的编写。

# 传统模式下的计算能力的实现 #

购买资源，搭建环境，上传代码，部署应用，正式发布

# 云开发模式下的计算能力的实现 #

购买资源，上传代码，正式发布

![format_png 1][]

云开发的文件存储能力

云开发为小程序开发者提供了配置好常用环境的海量非结构数据存储，帮助开发者解决数据存储的问题。

![format_png 2][]

云开发控制面板介绍

如何进入云开发控制台  
云开发控制台的几个功能  
![format_png 3][]

数据统计

![format_png 4][]

![format_png 5][]

# 云开发api简介 #

云开发api分类  
云开发api初始化方法  
云开发api使用注意事项

小程序端的api  
服务端的api

数据存储api  
文件存储api  
云函数api

云开发api初始化

wx.cloud.init({
     env: 'test-x1dzi', // 环境id
     traceUser: true // 是否在控制台查看用户信息
    })

小程序服务端  
安装sdk

npm install --save wx-server-sdk

const cloud = require('wx-server-sdk')
    cloud.init({
     env: 'test-x1dzi'
    })

初始化选项env

云开发的初始化选项支持传入一个Object，指定各个服务使用的默认环境

env: 'xxx'

env: {
     database: 'xxx',
     storage: 'xxx',
     functions: 'xxx'
    }

云开发api：  
云开发api同时支持callback风格和promise风格  
云开发api初始化时如果没有设置id，默认使用先创建的那个  
在服务端可以借助云开发sdk内置的getWXContext来获取到用户的身份信息

# 云开发基础之数组查询 #

使用云开发，可以实现诸如a在数组B中或a不在数组b中的条件判断

const db = wx.cloud.database();
    const _ = db.command;
    db.collection('todos').where({
     progress: _.in([0,100])
     // progress: _.nin([0,100])
    })
    .get({
     success: console.log,
     fail: console.error
     });

![format_png 6][]

![format_png 7][]

![format_png 8][]

字段类型查询

# 如何使用云开发api进行字段类型查询 #

使用云开发，可以实现只查询所需字段内容，而不是查询所有字段内容。

const db = wx.cloud.database()
    db.collection('todos')
    .field({
     description: true,
     done: true,
     progress: true
     })
     .get()
     .then(console.log)
     .catch(console.error)

![format_png 9][]

什么是正则表达式

![format_png 10][]

在云开发中使用正则查询

db.collection('todos').where({
     description: db.RegExp({
      regexp: 'miniprogram',
        options: 'i',
        })
    })

地理位置索引查询

db.collection('location').get().then(res => {
     console.log(res.data[0].location.latitude)
    })

数据库权限管理  
![format_png 11][]

![format_png 12][]

![format_png 13][]

![format_png 14][]

![format_png 15][]

# 文件存储 #

云开发提供了哪些文件存储能力  
云开发文件存储能力展示

![format_png 16][]

生成临时链接

云开发的fileId无法在小程序以外的平台使用  
衣服服务需要文件地址

![format_png 17][]

云函数定时器的使用

云函数定时器的使用场景

config.json文件  
上传触发器

![format_png 18][]

![format_png 19][]

![format_png 20][]

![format_png 21][]

数据设计

![format_png 22][]

![format_png 23][]

![format_png 24][]

![format_png 25][]

![format_png 26][]

onSubmit: function(event) {
     console.log(event.detail.value.title)
    }

![format_png 27][]

const db = wx.cloud.database();
    const todos = db.collection('todos');
    Page({
     onSubmit: function(event) {
      console.log(event.detail.value.title)
        todos.add({
         data: {
          title: event.detail.value.title
         }
         }).then(res => {
          console.log(res)
            wx.showToast({
             title: 'Success',
             icon: 'success'
             })
        })
        }
    )}

<van-cell-group>
     <block wx:for="{
        {tasks}}">
      <navigator url="../todoInfo/todoInfo?id={
        {item._id}}">
         <van-cell title="{
        {item.title}}"/>
        <navigator>
     </block>
    </van-cell-group>

selectImage: function(e) {
     wx.chooseImage({
      success: function(res) {
         console.log(res.tempFilePaths[0])
        },
        })
    }

wx.cloud.uploadFile  
将本地资源上传至云存储空间，如果上传至同一路径则是覆盖写  
请求参数

cloudPath 云存储路径 string
    filePath 要上传文件资源的路径 string
    header http请求header,header中不能设置referer
    success 成功回调
    fail 失败回调
    complete 结束回调

success返回参数  
fileID 文件ID  
statusCode 服务器返回http状态码

上传图片

selectImage: function(e) {
     wx.chooseImage({
      success: function(res) {
         console.log(res.tempFilePaths[0])
         wx.cloud.uploadFile({
          cloudPath: 'xxx.png',
            filePath: res.tempFilePaths[0]
         }).then(res => {
          console.log(res)
         }).catch(err => {
          console.error(err)
         })
        }
     })
    }

selectImage: function(e) {
     wx.chooseImage({
      success: function(res) {
         console.log(res.tempFilePaths[0])
         wx.cloud.uploadFile({
          cloudPath: `${Math.floor(Math.random()*`10000000)}.png`,
            filePath: res.tempFilePaths[0]
        }).then(res => {
         console.log(res.fileID)
        }).catch(err => {
         console.error(err)
        })
    }

onSubmit: function(event)
     todos.add({
      data: {
         title: event.detail.value.title,
         image: this.data.image
        }
    }).then(res => {
     console.log(res._id)
     })
     }

wx.showToast({
     title: '添加成功',
     icon: 'success',
     success: res => {
      wx.redirectTo({
        url: '../todoInfo/todoInfo?id=${res._id}`,
        })

Todo设置位置

wx.chooseLocation(Object object)  
打开地图选择位置。

wx.getLocation(Object object)  
获取当前的地理位置，速度，当用户离开小程序后，此接口无法调用

![format_png 28][]

chooseLocation: function(e) {
     wx.chooseLocation({
      success: res => {
         let locationObj = {
         latitude: res.latitude,
         longitude: res.longitude,
         name: res.name,
         address: res.address
         }
         this.pageData.locationObj = locationObj
    }

消息提醒

wx-js-utils  
微信开发util函数

支持能力  
小程序用户  
小程序模板消息  
小程序统一消息  
小程序动态消息  
小程序码  
微信支付

wx.cloud.callFunction({
     name: 'msgMe',
     data: {
      formId: event.detail.formId
        }
        })
        todos.add({
         data: {
          title: event.detail.value.title,
            image: this.data.image,
            location: this.pageData.locationObj
            }

数据库

云开发数据库中的几种权限  
云开发数据库中的权限对应场景  
如何修改云开发数据库权限

![format_png 29][]

**这是一个有质量，有态度的公众号**

![format_png 30][]

点关注，有好运

文章不错，点个赞吧!  ![format_png 31][]

[format_png]: /images/20210724/6b26f97d741f46eabedf5862288aa913.png
[format_png 1]: /images/20210724/8765ca2b9341450e97304cee07d0ae7a.png
[format_png 2]: /images/20210724/bfdafd272fec4f51913d4337e2de9fcd.png
[format_png 3]: /images/20210724/4256bf78afab4b60a6a2364d2eff3f79.png
[format_png 4]: /images/20210724/fe423bb9b7304037ad41765a94a49b6b.png
[format_png 5]: /images/20210724/dcbac715ad2b4d3682924c0cc1092739.png
[format_png 6]: /images/20210724/1620c8e850b24c7d83525f1cf15ea92a.png
[format_png 7]: /images/20210724/d83f6db48d374d9e9a79904b614721d1.png
[format_png 8]: /images/20210724/30d84573c30e4f12ae0acf06fdb22dd5.png
[format_png 9]: /images/20210724/4bf7d1513b034d798e44dc254ac08920.png
[format_png 10]: /images/20210724/27e36e6911dc498fa7c71bd3509b6d3e.png
[format_png 11]: /images/20210724/9a6ae379a224494ab47961c5709fa9f0.png
[format_png 12]: /images/20210724/a46f43153a874befb89bd4e5848bb15d.png
[format_png 13]: /images/20210724/e981f46f5d924c36925f2615441cba50.png
[format_png 14]: /images/20210724/c29281bd24524a63913cc072fd642054.png
[format_png 15]: /images/20210724/f32109361c9f4b2ea49991e247bb86ed.png
[format_png 16]: /images/20210724/1ae42e7ebbbc453d81efcb7daf25a228.png
[format_png 17]: /images/20210724/a9e0663b13dc4a8cbf8edad1ba8b394c.png
[format_png 18]: /images/20210724/b0d7c424e27046ae8d2f658123a6adae.png
[format_png 19]: /images/20210724/a7736caf3fdf4d4ca74f3cd27d718e18.png
[format_png 20]: /images/20210724/ff617eac42d748178dba3cecc8d6579a.png
[format_png 21]: /images/20210724/76473a31c0b64c508e7b00c632b476fb.png
[format_png 22]: /images/20210724/66dd3347964d44a0a5dd31148199a250.png
[format_png 23]: /images/20210724/7e8bf0f59ae34ec483c5afa3fe3acae4.png
[format_png 24]: /images/20210724/261ee7241ad14007849a311f46e7460c.png
[format_png 25]: /images/20210724/fab9eb6cb3e8416b8cfde4a3f39301d9.png
[format_png 26]: /images/20210724/e88e4164c6b346ad94d684249059f8f8.png
[format_png 27]: /images/20210724/48b8854f9b714c89ac1fb2e5f75c9a27.png
[format_png 28]: /images/20210724/c159ccced2284e1089783b0d4531c26c.png
[format_png 29]: /images/20210724/f944a7d3251a4eb5b105150852f5c85c.png
[format_png 30]: /images/20210724/7ba1fc6414f04695846aad0118fa20ba.png
[format_png 31]: /images/20210724/021b57ee031949378b20a853aecd2871.png