在线咨询
在线咨询
电话咨询
联系电话 400-800-0907
微信咨询

厦门小程序开发公司告诉你●如何利用腾讯云开发部署攻略

2020-03-01

什么是小程序云开发?有什么作用?厦门小程序开发公司互动创想就来介绍一下:

开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。

云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。


007.jpg

 

云开发提供了几大基础能力支持:

能力

作用

说明

云函数

无需自建服务器

在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码

数据库

无需自建数据库

一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库

存储

无需自建存储和 CDN

在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理

云调用

原生微信服务集成

基于云函数免鉴权使用小程序开放接口的能力,包括服务端调用、获取开放数据等能力

 

 

Q:小程序云开发是什么?
简单来说,小程序云开发是一款 Serverless 服务,他为开发者提供了「云函数」、「云数据库」和「云文件存储」,并且将这些能力封装成特定的接口,以 wx.cloud.xxx 来进行调用。

 

Q:小程序云开发的误区?
首先,小程序云开发不是 PaaS ,它和我们所熟悉的 BAE、Google App Engine 不同,所提供的云函数并不是完整的环境,而是以一个特定的事件为单位的。严格来说,它所提供的云函数功能其实是 FaaS (Function as a Service),同类型的产品有 LeanCloud 的云函数、 Bmob 的云函数、AWS 的 Lambda、 Azure 的 Functions 和 Google Cloud Functions。

 

其次,小程序云开发不是 LeanCloud 、 Bmob 之类的 BaaS 。不同于上述的两款产品,他们提供了丰富的 API 接口,能够实现各种各样的功能,小程序·云开发将接口进行深度的封装,仅能在小程序、云函数中通过 wx.cloud 和 wx-server-sdk 来调用(截止2018年8月24日)。因此,小程序云开发 仅能应用在小程序中,无法在其他产品中应用(比如 App )

 

Q:小程序云开发适合什么样的场景?

所有的业务逻辑都仅仅需要在小程序端完成,无需过于复杂的管理逻辑(这是因为云函数、云数据库无法在小程序以外的区域调用,因此无法实现强大的 Web 管理界面)

 

Q:小程序云开发的优势是?

        1. 微信登录逻辑简单

        小程序云开发可以自动实现用户登录的校验,开发者无需再次校验用户身份,直接通过云函数的 event.userInfo.openId 即可获取到用户信息。直接调用数据库 、文件存储 API 时,也会自动关联到用户对应的 openId

         

        如果用户授权小程序获取昵称等信息,这些信息也会自动出现在小程序云开发的管理控制台中的用户登录部分。不需要开发者手动上传。

         

        2. 免费

        目前小程序云开发提供了免费 1GB 的数据库存储和 免费 5 GB 的文件存储,这个存储量并不是很大,但是对于一些个人开发者来说,还是绰绰有余的,开发者可以使用这些容量来快速开发自己的小程序。

         

        3. 简单

        小程序云开发的调用非常的简单,你只需要了解 JavaScript 和一些简单的异步的知识 (promise),就可以完成小程序云开发的内容。

         

        4. 无侵入

        小程序云开发本身是在小程序的基础库层面的封装,你无需再引入其他库就可以使用。

         

        同样的,你也可以在原有的应用程序中,将一部分功能迁移到小程序云开发中。

 

Q:小程序开发过程中遇到的一些坑?


1. 异步请求需要通过 Promise 来处理

在云函数中,我们大多会实现一些在小程序中无法实现,或受域名限制的请求接口,这时我们不能使用传统的 Callback 方法来进行请求,因为传统的 callback 方法执行完成后,云函数早已将数据返回给客户端,我们需要使用 Promise 来处理。

 

比如,下面的代码是我请求豆瓣 API 的代码:

微信图片_20200301171358.png

上述代码出自 Github 项目 WXCloud-bookcase

 

2. 权限结构比较简单

小程序云开发提供的数据库权限非常简单,仅有四种:

  •     仅创建者可写,所有人可读:数据只有创建者可写、所有人可读;比如文章。

  •     仅创建者可读写:数据只有创建者可读写,其他用户不可读写;比如用私密相册。

  •     仅管理端可写,所有人可读:该数据只有管理端可写,所有人可读;如商品信息。

  •     仅管理端可读写:该数据只有管理端可读写;如后台用的不暴露的数据。

 

对于绝大多数情况下,简单地使用这四种权限根本无法满足我们的要求,因此,我们还需要在代码层面进行一些判断来确保具体的表现如我们所想的那样。

 

比如,在做一个书柜的项目时,希望书柜里的书可以设置可被第三方查看和不可被第三方查看,这时你只能将集合的数据设置为「仅创建者可写,所有人可读」,并通过代码来控制具体信息是否显示,比如加入一个 is_private 字段来进行控制。




目前,微信小程序越来越流行,而且功能越来越强大,在性能方面也越做越好。因为能够原生调用小程序提供的组件和 API ,小程序的开发快捷,使用方便,越来越多的产品会落地到微信小程序上。但传统的微信小程序开发,和普通的H5页面开发或者原生APP开发相比,只是改变了前端部分的开发方式,,还是离不开厚重的后台开发。

现在的小程序,在后台服务方面,正在往 serverless 趋势方向发力。小程序提供了云厂商的无服务器函数 SCF,使得小程序无需搭建一个后台服务即可运行。

该文章主要是介绍如何利用腾讯云提供的服务来开发微信小程序。微信小程序的开发教程:https://developers.weixin.qq.com/miniprogram/dev/ ,该文章不再详细叙述。现在我们就马上进入如何结合腾讯云提供的服务进行开发。

一、 下载并运行配置最新小程序开发IDE

下载地址:http://git.code.oa.com/mp-public/cloud-doc/

打开IDE,选择小程序项目,分别填入项目目录,AppID(没有的话,先去注册,注册流程可看官网教程),项目名称,即可打开项目。

图片.png



由界面可以看到,打开项目后,程序会自动编译运行,在左侧的页面可以预览效果。

下面,我们来重点说一下编译、远程调试、和云控制台的用法。

1.   编译

一般情况下,只要代码发生变动,程序会自动执行编译。我们可以手动点击“编译”来执行编译。

编译成功后,页面会自动加载渲染。


2.   远程调试

远程调试,是用于真机调试的最直接的一种方式。点击远程调试,视图会弹出二维码,用手机微信打开扫一扫,扫描二维码即可进入小程序的开发版。

通过 IDE 远程调试打开的小程序,可以在 IDE 上获取控制面板 Console / Network / Sources 等信息,

方便开发者去调试代码和功能。

图片.png

手机预览的小程序开发版,默认手机上是关闭调试模式的。如果需要打开调试模式,可以在小程序设置上,选择打开调试,重启小程序即可进入调试模式。


3.   云控制台

云控制台是开发者管理小程序云的地方。

图片.png



概要:

开发者在初始开发前,需要创建一个环境(目前,每个小程序账号可免费创建两个环境),如上图,我创建了一个叫 “development” 的环境。记住环境 ID ,它的值需要被写进配置文件。

数据库:

在数据库页面,开发者可以看到当前环境下的所有数据信息,并提供了对集合和文档的操作入口。

文件管理:

在文件管理页面,开发者可以对文件进行管理,包括上传、查看、重命名、移动、创建文件夹等。

开发者可以通过两种方式上传文件:

1.   可以直接在云控制台的图形化界面手动上传或下载文件,文件的网络路径可以在文件详情中得到。

2.   通过编写代码,调用小程序云的API控制文件的上传(wx.cloud.uploadFile)和下载(wx.cloud.downloadFile),在后续会详细介绍。

云函数:

在云函数页面,开发者可以查看已有的云函数列表,提供了新建、编辑、测试云函数的入口。

云函数的作用,可以由开发者直接在小程序内部通过 API (wx.cloud.callFunction) 被调用。但云函数的执行,并不是在小程序内部,而是在小程序云上执行,目前已经支持node环境了,因此作为前端开发者,可以通过node+云函数来实现一些原本是后台的服务和功能。

二、 项目开发

1.    目录结构

我们先看一般小程序的目录结构,可以如下:

图片.png


project.config.json是项目的主配置文件(下一节会详细介绍)。

client 文件夹是小程序项目页面的文件,最终会被编译打包运行在小程序里。主要的文件类型有4种:

    .json 后缀的 JSON 配置文件    .wxml 后缀的 WXML 模板文件    .wxss 后缀的 WXSS 样式文件    .js 后缀的 JS 脚本逻辑文件

其中,app.js是APP的入口文件,app.json是APP的配置文件,pages文件夹是存放小程序页面的文件夹(具体的代码构成,可以参考

https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html)。

cloud-functions,是存放云函数的文件夹。最终云函数将会被打包上传至小程序云进行构建。

2.    项目初始化和配置

这里只列出与小程序云相关的主要配置(其他配置相对容易明白,看小程序开发文档即可):

project.config.json

图片.png

client/app.js

图片.png

小程序APP需要执行 wx.cloud.init 方法,才能够初始化小程序云。只有初始化成功之后,后续才能调用小程序相关的 API 。参数env字段的值,就是对应 1.3 节的环境变量, traceUser表示是否跟踪用户的操作记录,调试阶段一般建议打开。


3.    调用API上传文件至小程序云

通过调用 wx.cloud.init 进行初始化后,便可使用wx.cloud 的API。这里以上传文件至小程序云为例,介绍 API 的使用。

wx.cloud.uploadFile({

  cloudPath: '/example.png',

  filePath: '', // 小程序临时文件路径

  success: res => {

    console.log(res.fileID)

  },

  fail: err => {

  }})

其中,cloudPath 为上传至小程序云文件目录的路径。可以指定文件夹,如:“/user/xxx.file”等等。

4.   编写云函数

首先,打开云控制台,切换至云函数的界面,会看到云函数列表。

图片.png

选择“新建云函数”,进入新建云函数的页面,填写云函数名、创建方式和运行环境,即可完成创建。


创建完云函数之后,通过云目录进入具体的函数详情页,点击右上角的“编辑”,即可提交云函数。


提交云函数一共有两种方法:

一种是通过微信开发者工具上传,上传指引如下:

1.   请先配置云函数的根目录(如已配置请忽略此步骤)

2.   在项目一级目录下新建文件夹,命名为cloud-functions。

3.   在项目文件project.config.json 里增加字段 "cloudfunctionRoot": "./cloud-functions"。

4.   在微信开发者工具中重新载入项目,即可看到带有云标记的云函数目录。

5.   在微信开发者工具中,右击云函数目录,选择‘新建Node.js云函数’。

6.   对新建的 Node.js 云函数目录右击选择‘上传’,即可同步至云端。

第二种办法是,通过本地上传ZIP包。

图片.png

如上图,压缩打包该云函数的代码,即可上传。注意红色框的执行方法,表明了云函数的入口文件是index.js,并且该函数必须暴露main_handler的方法。

// index.js

图片.png

把该文件直接打包进一个zip包就行,如果该index.js函数还依赖于其他的包或module,只需要把这些包或module按照依赖关系一起打包进 zip 包即可。

打包完成后,即可上传。


5.    调用云函数

小程序可以通过端 API 来直接调用云函数,wx.cloud.callFunction(OBJECT);

wx.cloud.callFunction({
  // 要调用的云函数名称
  name: 'test',
  // 传递给云函数的参数
  data: {
    param: 1,
  },
  success: res => {
    // output: res.result
  },
  fail: err => {
  }})

通过该 API ,可以非常方便地调用云函数。