当前位置:首页 > 新闻动态 > 网站文章

小程序 云开发 零基础 创建项目到具体操作

来源: 浏览:130 时间:2023-08-11

1- 前言

1.1 微信云开发是什么?

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

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

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

1.2 怎么快速学习?

2- 介绍


2.1 概念
无需搭建服务器,快速构建小程序、公众号;

无需搭建服务器,只需使用平台提供的各项能力,即可快速开发业务。

直白来讲,小程序云开发就是让前端程序员拥有后端的能力

2.2 能力概览
云开发包括以下(参考云开发文档):

储存数据与文件
云数据库:文档型数据库;支持在小程序端和云函数中调用。

存储:云端文件存储,支持在前端直接上传/下载,可在云开发控制台可视化管理。

运行后端代码
云函数:开发者只需编写自身业务逻辑代码

扩展能力
静态网站:快速部署网站,支持自定义域名、网站防刷等配置。

内容管理(CMS): 一键部署,可视化管理文本、Markdown、图片等多种内容,使用云数据库读取数据并使用数据。

打通微信生态
云调用:云函数内免鉴权调用小程序开放接口,包括服务端调用、获取开放数据等能力。

微信支付:免鉴权、免签名计算、免 access_token,在云函数内原生调用微信支付接口。

环境共享:跨账号资源和能力复用,可授权云开发资源给其他小程序/公众号使用。

2.3 流程
前端写好云函数 ==> 上传到云服务器 ==>定义自定义云部署 ===>

前端去调用云函数 ==> 间接通过云函数对数据库的操作

前端==>全栈

3- 搭建云开发模板

3.1 创建项目

打开并登录微信开发者工具,新建小程序项目,填入 AppID,后端服务选择“微信云开发”并勾选同意"云开发服务条款":

3.2 开通云开发,创建环境

在使用云开发能力之前,需要先开通云开发。

在开发者工具的工具栏左侧,点击 “云开发” 按钮即可打开云控制台,根据提示开通云开发,并且创建一个新的云开发环境。

注意 :免费体验1个月,只限没有用过微信云开发的新用户

  • 每个环境相互隔离,拥有唯一的环境 ID,包含独立的数据库实例、存储空间、云函数配置等资源;
  • 初始创建的环境自动成为默认环境;
  • 4- 云开发能力

  • 微信小程序云开发提供了数据库、云存储、云函数、云调用、HTTP API 等功能。

    4.1 数据库
    4.1.1 介绍
    云开发提供了一个 JSON 数据库,顾名思义,数据库中的每条记录都是一个 JSON 格式的对象。一个数据库可以有多个集合(相当于关系型数据中的表),集合可看做一个 JSON 数组,数组中的每个对象就是一条记录,记录的格式是 JSON 对象。

    关系型数据库和 JSON 数据库的概念对应关系如下表:

  • 4.1.2 创建

  • 创建集合
  •  

  • 添加记录 

 

 

4.2 存储


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

4.3 云函数


4.3.1 介绍


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

4.3.2 创建


右键创建云函数
 

 

  • 在页面中调用云函数

 

4.3.3 操作


在云函数如何操作云数据

初始化
var db = cloud.database()
1
获取
var data = await db.collection("feedback").get()
1
添加
var  data = await db.collection("feedback").add(data:{添加数据})
1


4.4 HTTP API


云开发资源也可以通过 HTTP 接口访问,即在小程序外访问,接口见 HTTP API 文档。

5- 云上传


5.1 介绍


wx.cloud.uploadFile

将本地资源上传至云存储空间,如果上传至同一路径则是覆盖写;

 

5.2 使用示例

  • Callback 风格
wx.cloud.uploadFile({
  cloudPath: 'example.png',
  filePath: '', // 文件路径
  success: res => {
    // get resource ID
    console.log(res.fileID)
  },
  fail: err => {
    // handle error
  }
})
wx.cloud.uploadFile({
  cloudPath: 'example.png',
  filePath: '', // 文件路径
}).then(res => {
  // get resource ID
  console.log(res.fileID)
}).catch(error => {
  // handle error
})
db.collection('todos').orderBy('progress', 'asc')
  .get()
  .then(console.log)
  .catch(console.error)
db.collection('todos').skip(10)
  .get()
  .then(console.log)
  .catch(console.error)

 

 

 

 

 

 

地址 · ADDRESS

地址:建邺区新城科技园嘉陵江东街18号2层

邮箱:309474043@qq.Com

点击查看更多案例

联系 · CALL TEL

400-8793-956

售后专线:025-65016872

业务QQ:309474043    售后QQ:1850555641

©南京安优网络科技有限公司 版权所有   苏ICP备12071769号-4  网站地图