指南目录

社区/学习指南/微信云开发高级教程

Web端云开发

云开发的环境还可以开发网站应用，包括普通的 PC 网页或者公众号中的网页等，在开发过程中即便需要后台服务也无需搭建服务器，可以直接使用云开发提供的云端能力。开发者无需关心具体的后台资源及运维，只需使用平台提供的 API 进行核心业务开发，即可实现产品快速上线和迭代。

14.4.1 创建初始项目

在前面我们已经用 Cloudbase Cli 工具在电脑本地用Cloudbase init创建了一个云开发项目，以及开通了静态网站托管，那我们应该如何在静态的网页里初始化云开发呢？

1、项目文件结构

使用编辑器比如 Visual Studio Code，打开前面创建好的项目文件夹 tcbweb，然后使用 VS Code 来新建一个 public 文件夹，并在 public 文件夹里面新建

index.html；
js 文件夹，js 文件夹里再新建一个 main.js；
css 文件夹，css 文件夹里再新建一个 style.css；
assert 文件夹，assert 文件夹里主要用于存放图片等资源；

最终文件夹的目录结构如下，一个清晰的项目文件结构便于我们有序的开发管理：


.

├── _gitignore

├── functions // 云函数目录

│   └── app

│       └── index.js

├── public // 用于存放应用程序的静态文件

│   └── index.html

│   └── js

│       └── main.js

│   └── css

│       └── style.css

│   └── assert

└── cloudbaserc.js // 项目配置文件

在前面我们已经介绍过电脑的终端，Visual Studio Code 也有终端，也可以在这个终端里面进行终端的命令行操作，和电脑的终端略有不同，大家也可以根据习惯自行选择。

2、在网页中引入 Web 端 SDK

然后使用 VS Code 打开 index.html 文件，VS Code 编辑器内置一套emmet 语法，可以大大提高我们书写 HTML 代码的效率，在 index.html 里输入一个英文状态下的感叹号!，之后按一下 tab 键，就会出现以下代码，并修改一下 title 和 body 标签里面的内容：


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Web端云开发</title>

</head>

<body>

  Web端云开发页面内容

</body>

</html>

然后将 head 标签里添加如下内容，把云开发 web 端 SDK 也就是 tcb.js 添加到 Web 应用中：


<head>

  <!-- 省略-->

  <script src="https://imgcache.qq.com/qcloud/tcbjs/1.7.0/tcb.js"></script>

  <script src="./js/main.js"></script>

</head>

注意上面的版本号1.7.0，这个不一定是最新的，建议tcb-js-sdk npm 包地址获取最新的版本号，尤其是需要使用新功能的时候，要注意修改版本号。我们还可以通过npm install --save tcb-js-sdk@latest引入 npm 包 tcb-js-sdk 的方式来下载最新版的 Web 端 SDK，而在模块化开发时用const tcb = require("tcb-js-sdk");将 Web 端 SDK 引入到项目中，这里就不多介绍啦。

3、初始化 Web 端环境

使用 VS Code 打开 js 文件夹下 main.js 文件，在里面输入以下代码就可以完成云开发环境的初始化，和小程序云开发一样，要调用云开发环境里的资源，就需要进行初始化，init 用于设置调用云函数、数据库、文件存储时要访问的环境。

const app = tcb.init({
  env: "你的环境ID", // 此处填入你的环境ID
});

我们知道在项目根目录下的配置文件 cloudbaserc.js 或 cloudbaserc.json 里也需要填入环境 ID，这个配置文件主要用于项目管理，这个和初始化 Web 端环境是有一定的区别的哦，留意一下。

也就是说我们要初始化云开发能力，一是要引入 Web 端 SDK tcb.js 文件，二是要初始化 Web 端的环境，这两个是必不可少的哦，引入这两个之后，云开发能力就算完成初始化了。

14.4.2 本地调试与云端调试 Web 端云开发

要在本地电脑里调试 Web 端云开发，除了前面已经做过的在电脑里安装 Nodejs 环境、安装 Cloudbase Cli 工具、初始化云开发项目之外，还需要执行以下操作。

使用小程序云开发的账号登录到腾讯云云开发控制台，也就是登录时选择微信公众号登录，然后用小程序云开发管理员的微信扫码，在云开发控制台选择其中一个环境，进入到该环境的管理页，点击环境-环境设置菜单，选择登录方式标签页，然后：

1、开启匿名登录

在登录方式里可以选择启动匿名登录，匿名登录有点类似于游戏里的游客访问模式，用户不需要注册就可以获取并存储数据，这种方式比较方便我们进行本地调试。

每个设备同时只存在一个匿名用户，并且此用户永不过期（如果用户手动清除了设备或浏览器的本地数据，那么匿名用户的数据便会被同步清除，再次调用匿名登录 API 会产生一个新的匿名用户）。每个环境的匿名用户数量不超过 1000 万个。

打开前面创建的 main.js 文件，在环境初始化后面添加如下代码，实现匿名登录的功能。window.onload 类似于小程序生命周期的 onLoad 生命周期函数，当包括样式、图像和其他资源的页面被全部加载时，window 对象上的 load 事件就会被触发。


window.onload = function(){

  app.auth({

      persistence: 'session' //在窗口关闭时清除身份验证状态

  })

    .anonymousAuthProvider()

    .signIn()   //AnonymousAuthProvider.signIn() 匿名登录云开发

    .then(() => {

        console.log("登录成功") //登录成功

    }).catch(err => {

        console.log("登录失败",err) //登录失败

    })

    env: 'xly-xrlur'  // 此处填入你的环境ID

  });

2、添加安全域名

在WEB 安全域名处把 localhost:5000加入到安全域名的白名单中，这样这个域名下的页面才可以使用 SDK 访问到云开发的服务。如果你希望通过 localhost 的其他端口或域名地址来访问你的静态托管网站，你需要将这些它们都添加到安全域名的列表里面。

3、开启本地开发环境

打开终端，我们先全局安装依赖包 serve（注意前面说过的安装权限解决方案，Mac 电脑命令前加 sudo，Windows 要用管理员身份打开终端）：


npm install -g serve

然后在项目根目录（注意前面说过的 cloudbaserc.js 所在的目录即为根目录）执行以下命令运行 serve，即可打开一个本地静态服务器：


npx serve

成功后就会显示服务开启，以及可以在本地电脑的浏览器访问的 localhost 端口地址，以及 ip 地址。在浏览器里输入http://localhost:5000/public/就能打开 index.html 了。打开浏览器的开发者工具，在 Console 标签页看到登录成功的 log，就表示匿名登录成功啦

建议使用 Chrome 浏览器，在 index.html 页面空白处鼠标右键点击”审查元素”(MacBook 为”检查”)，我们就可以打开 Chrome 的开发者工具，在 Console 标签页我们就可以调试代码。

为了调试方便，我们可以不要关闭npx serve的终端窗口，要执行其他任务可以重新开一个终端窗口。当我们更新 public 文件夹下的 index.html、main.js 文件时，直接刷新浏览器里的页面即可。

4、部署本地文件到静态托管

我们再开一个终端窗口，然后通过 cd 命令进入到项目根目录，之后在终端输入以下命令，将 public 文件夹下面的所有文件上传到静态托管网站的文件夹内，比如上传到 web 文件夹到环境 id 为xly-xrlur的环境里：


cloudbase hosting:deploy ./public web -e xly-xrlur

然后我们就可以在浏览器通过打开静态托管网站的二级域名/web或你的域名/web访问到这个页面了，同样可以使用浏览器的开发者工具的控制台查看页面的打印日志。

调用 Web 端 SDK 并不局限于云开发自带的静态托管服务，我们也可以使用 Github Pages 等其他静态托管服务，也可以是传统开发的 web 页，也就是说只要是 web 也引入 sdk，并添加安全域名等之后，也能使用云开发的服务。

14.4.3 创建并调用云函数

1、云函数的创建与部署

Web 端云开发不仅可以调用你在小程序云开发里创建的云函数，我们也可以在本地创建云函数并部署到云开发环境里供 Web 端和小程序端来调用，也就是云开发环境里的云函数是 Web 端和小程序端共用的，小程序端怎么创建并部署云函数大家应该比较熟悉，web 端使用 vscode 来创建并部署云函数和使用微信开发者工具是一样的道理。

1、本地云函数目录结构

我们可以在 web 端云开发项目根目录里的 functions 文件夹下面建和小程序云开发云函数根目录一样的文件夹表示为云函数目录，以及一样新建三个文件并copy 里面的内容（每次创建一个云函数的时候都这么做），比如我们新建一个 webtest 的云函数，它的目录结构如下：


├── _gitignore

├── functions // 云函数根目录

│   └── app   //app云函数目录

│       └── index.js

│       └── config.json

│       └── package.json

│   └── webtest  //webtest云函数目录

│       └── index.js       //主体结构和小程序云开发云函数里的index.js一样

│       └── config.json    //copy小程序云开发云函数里的config.json

│       └── package.json  //copy小程序云开发云函数里的package.json

├── public // 用于存放应用程序的静态文件

│   └── index.html

│   └── js

│       └── main.js

│   └── css

│       └── style.css

│   └── assert

└── cloudbaserc.js // 项目配置文件

在 index.js 里我们可以输入以下代码，引入服务端 sdk，初始化服务端的环境，以及在 main 函数里返回数据:

const tcb = require("@cloudbase/node-sdk");

const app = tcb.init({
  env: "你的环境ID",
});

const auth = app.auth();

exports.main = async (event, context) => {
  const ip = auth.getClientIP(); //获取客户端ip

  const {
    openId, //微信openId，非微信授权登录则空

    appId, //微信appId，非微信授权登录则空

    uid, //用户唯一ID

    customUserId, //开发者自定义的用户唯一id，非自定义登录则空
  } = auth.getUserInfo();

  return {
    event对象: event,

    context对象: context,

    客户端ip: ip,

    openId: openId,

    appId: appId,

    uid: uid,

    customUserId: customUserId,
  };
};

web 端创建的云函数这里，我们既可以只用 Web 端 SDK @cloudbase/node-sdk，也可以沿用小程序云开发的写法，使用 wx-server-sdk，如果是跨端开发建议后者。

2、安装依赖并部署上传云函数

然后使用终端打开云函数目录，使用npm install来安装依赖 package.json 的依赖之后，在 cloudbaserc.js 的配置文件的functions里添加 webtest 云函数的配置，比如：


{

    name: "webtest",

    timeout: 5,

    envVariables: {},

    runtime: "Nodejs10.15",

    handler: "index.main"

},

使用 Cloudbase Cli 工具将云函数部署上传到云端：


cloudbase functions:deploy webtest

这里有几个需要注意一下，小程序端云开发与 Web 端云开发的相同与不同之处：

如果你的云函数不需要给小程序使用而只在 web 端使用，你可以只引入@cloudbase/node-sdk，而如果要在小程序端使用，你引入的wx-server-sdk，@cloudbase/node-sdk 是云开发的服务端 sdk，wx-server-sdk 是小程序云开发的 SDK；所以最好是用变量 tcb 表示引入@cloudbase/node-sdk，变量 cloud 表示 wx-server-sdk；
Web 端云开发的云函数和小程序云开发的使用方法大致相同，也要注意 web 端/小程序端和服务端的不同用法与权限；
将 Web 端云函数部署上传到小程序创建的云开发环境，在小程序开发者工具的云开发控制台是可以看到该云函数的，同时调用这个云函数的日志也在云开发控制台的日志里看到。
如果没有在 cloudbaserc.js 配置，会显示未找到函数发布配置，是否使用默认配置（仅适用于 Node.js 云函数）的提示

3、web 端调用云函数

在 web 端调用云函数，则是使用 web 端 sdk，也就是 tcb-js-sdk 模块或前面引入 tcb.js 文件，我们可以在 main.js 文件里将函数的调用写到 app.auth()的回调函数里，当页面加载时匿名用户登录后，就能调用云函数


window.onload= function(){

  app.auth({

    persistence: 'session' //在窗口关闭时清除身份验证状态

  })

    .anonymousAuthProvider()

    .signIn()

    .then(() => {

      app.callFunction({

        name: 'webtest',

        data: { "name": "李东bbsky", "title": "杂役"}

        })

        .then((res) => {

          console.log(res)

        });

    }).catch(err => {

      console.log("登录失败",err)

    })

使用浏览器打开（或刷新页面）http://localhost:5000/public/index.html，然后在浏览器开发者工具的控制台就能看到本地调用云函数的结果啦。我们再执行以下命令将 public 的静态页面更新到静态存储，再来打开二级域名/web下的网页，在浏览器开发者工具的控制台也能调试代码啦：


cloudbase hosting:deploy ./public web -e xly-xrlur

通过打印我们可以了解到，web 端上传的参数会在 event 对象里，且 event 对象会返回用户的 userInfo，其中包含微信 appId，而 context 对象则包含关于该云函数的一些信息。

有了 web 端 SDK，我们就能调用云开发环境里的云函数，而云函数也是可以调用云函数、可以对数据库、云存储进行增删改查，还能使用云调用（需要 openid 的云函数例外），因此我们也可以沿用小程序云开发的云函数的用法。我们也要留意使用 CLoudbase Cli 触发云函数，以及 web 端触发云函数和后面使用云接入的方式获取到的云函数的信息会有所不同。

14.4.4 web 端操作数据库

和小程序触发事件处理函数一样，我们既可以使用通过页面的生命周期函数，也可以通过点击的方式，比如在 web 页面的标签上绑定事件处理函数来触发事件处理函数，来对云函数、数据库、云存储进行一系列的操作。

比如我们可以在 public 文件夹下的 index.html<body>标签内输入以下代码，一个 button 标签里，绑定 getData()事件处理程序，


<button onclick="getData()">点击获取数据</button>

然后在 main.js 里添加 getData()事件处理函数，保存页面之后，点击 button 按钮就能触发事件处理程序，对数据发起请求，这里还是获取以前在小程序云开发创建的集合 china：

function getData() {
  const db = app.database();

  const _ = db.command;

  const $ = db.command.aggregate;

  db.collection("china")

    .where({
      gdp: _.gt(3000),
    })

    .field({
      _id: false,

      city: true,

      province: true,

      gdp: true,
    })

    .orderBy("gdp", "desc")

    .skip(0)

    .limit(10)

    .get()

    .then((res) => {
      console.log(res.data);
    })

    .catch((err) => {
      console.error(err);
    });
}

无论是查询数据，还是对数据库的添加记录、删除数据以及指令、聚合等都和小程序云开发保持了很强的一致性，注意哦，数据库的实时推送也是和小程序端的用法一样。

值得注意的是当匿名用户往数据库里添加数据时，云数据库也会默认生成_openid 的字段，这个 openid 是临时的，在前面已经说过它的机制啦。

14.4.5 web 端操作云存储

1、web 端上传文件

和小程序云开发一样，要在前端上传文件，首先我们需要建一个上传文件的标签，在 public 文件夹下的 index.html 里再输入以下代码，我们只允许上传图片，并绑定


<input type="file" id="file" accept="image/*" onchange="uploadFile()">

然后我们继续在 main.js 里输入以下代码。被选择的文件以 HTMLInputElement.files 属性返回，它是一个包含一列 File 对象的 FileList 对象。FileList 的行为像一个数组，所以你可以检查 length 属性来获得已选择文件的数量。

function uploadFile() {
  const filetemp = document.getElementById("file").files[0];

  console.log("file对象", filetemp); //打印文件对象

  const fileName = filetemp.name; //从打印对象知道，这就是文件的名称

  app.uploadFile(
    {
      filePath: filetemp, //本地文件

      cloudPath: `tcb/${fileName}`, //云存储的路径

      onUploadProgress: (progressEvent) => {
        //上传进度回调

        let percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );

        console.log("上传进度: " + percentCompleted, progressEvent);
      },
    },
    function (err, res) {
      console.log({ err, res });
    }
  );
}

注意，这个云存储的路径前面不要有/，也不能直接是根目录，否则会没有上传权限；尽管云存储可能并没有 tcb 这个文件夹，但是会自动创建。

2、web 端删除文件

在 public 文件夹下的 index.html 里再输入以下代码，我们写一个绑定了 deleteFile 事件的 button 按钮：


 <button onclick="deleteFile()">删除文件</button>

然后我们继续在 main.js 里输入 deleteFile 事件处理函数，当点击按钮时删除云存储里指定 fileID 的文件：

async function deleteFile() {
  const result = await app.deleteFile({
    fileList: [
      "cloud://xly-xrlur.786c-xly-xrlur-1300446086/tcb/WX20200401-144620@2x.png",
    ],
  });

  result.fileList.forEach((item) => {
    if (item.code === "SUCCESS") {
      alert("文件删除成功");
    }
  });
}

云开发的登录还支持自定义登录、微信公众平台、微信开放平台登录，这个在后面会介绍。

< 上一篇静态网站部署下一篇云接入与HTTP触发 >

本文出自李东bbsky

热门搜索