网站推广.NET

网站推广.NET

很惊讶:云开发的前端微信小程序基本说明

来源:互联网

什么是云开发

云开发与传统模式的比较

云开发功能简介

从云开发到小程序开发的转变

云开发是微信团队和腾讯云提供的本地无服务器云服务,致力于帮助更多开发人员快速实现小程序业务的发展并快速迭代。

传统模式

产品经理,后端开发,部署和在线,前端开发,正式发布

云开发模型

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

没有后端开发,部署就可以在线进行

云开发功能简介

存储容量:直接在小程序侧上传和下载云文件,可视化管理

云功能功能:代码在云中运行,微信私有自然认证,开发人员只需要编写自己的业务逻辑代码

云数据库:一个可以在小程序前端操作,但也可以在云功能中读写json数据库

音频和视频服务:提供可互操作的高质量实时音频和视频通话服务,基于云开发提供交互式白板,美容滤镜,高清视频通话等,以实现快速访问

智能图像服务:集成了AI视觉功能,例如智能色情,面部识别,面部核心身体等,并基于云开发实现了快速访问

每天一次交付,一天可以多次交付:

云开发模型可以帮助开发人员快速迭代产品,从而可以一天多次交付产品

小团队也可以做大事。云开发模型简单易懂。小型团队还可以使用云计算功能来做更大的事情。

弹性成本几乎为零:

所有资源均由服务方管理,团队只需要专注于业务逻辑

云开发的基本功能

云开发的数据存储能力

云开发的文件存储功能

云开发的计算能力

云开发的数据存储能力

云开发为小程序开发人员提供了数据存储功能,以帮助开发人员快速完成应用程序开发

传统数据存储模式

小程序-“后端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)}})

云开发的计算能力

云开发为小程序开发人员提供了开箱即用的计算平台。开发人员只需要注意自己的核心逻辑即可编写复杂的逻辑。

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

购买资源,构建环境,上传代码,部署应用程序并正式发布

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

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

云开发的文件存储功能

云开发为小程序开发人员提供了为常见环境配置的大量非结构化数据存储,帮助开发人员解决数据存储问题。

云开发控制面板简介

如何进入云开发控制台

云开发控制台的几个功能

统计

云开发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

云开发的初始化选项支持传入对象以指定每个服务使用的默认环境

env: 'xxx'

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

云开发API:

云开发api支持回调样式和Promise样式

如果初始化云开发api时未设置id,则默认情况下将使用最先创建的id

在服务器端,您可以使用getWXContext内置的云开发SDK来获取用户的身份信息

基于云开发的数组查询

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

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 });

字段类型查询

如何使用Cloud Development API进行字段类型查询

使用云开发,您只能查询必填字段的内容,而不必查询所有字段的内容。

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

什么是正则表达式

在云开发中使用常规查询

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

地理索引查询

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

数据库权限管理

文件存储

云开发提供哪些文件存储功能?

显示云开发文件存储功能

生成临时链接

由云开发的fileId不能在小程序以外的平台上使用

服装服务需要文件地址

使用云功能计时器

使用云功能计时器的场景

config.json文件

上传触发器

数据设计

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

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' })})})}

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

wx.cloud.uploadFile

将本地资源上传到云存储空间。如果上传到同一路径,它将被覆盖。

请求参数

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

成功返回参数

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(对象对象)

打开地图并选择一个位置。

wx.getLocation(对象对象)

获取当前地理位置和速度。用户离开小程序后,将无法调用此界面

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}

消息提醒