KAPI

界面

本页目录

创建实例 ​

创建第一个应用 ​

在这一节将介绍怎么快速创建一个示例程序，按照上一节我们了解到怎么引用KAPI组件，下面开始使用组件创建第一个应用：

以CDN中的UNPKG为例，示例如下：

html
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='utf-8'>
  <title>Hello World</title>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui'>
  <style>
    html, body, .container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    #kapi-container {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div class='container'>
    <div id='kapi-container'></div>
  </div>
  <script src='https://unpkg.com/@ibrucekong/kapi'></script>
  <script>
    // 授权码
    const kapi = await KAPI.build('Your Auth Token')
    // 加载云流场景服务
    const scene = new kapi.Scene('kapi-container', { server: 'Your Service URL' })
    // 等待场景加载好
    const readyState = await scene.ready()
    // 打印状态
    console.log(readyState)
  </script>
</body>
</html>

使用脚手架创建 ​

提示

  • 熟悉命令行工具
  • 安装版本 16.0 以上的 Node.js 开发环境

另外，我们提供了一个脚手架工具，包含两种示例程序，一种是原生的HTML工程，一种是Vue工程。

确保系统已经连接互联网，且已经安装了16.0以上的 Node.js 开发环境，然后在系统命令行中执行以下命令：

shell
npm i @ibrucekong/kapi-cli -g

执行完以上命令行后，不出错的话就完成了脚手架的安装，然后通过脚手架初始化示例代码。

授权在命令行中切换到工作目录，比如你的工作目录是在D:/workspace/：

shell
cd D:/workspace/

然后创建一个helloworld的vue工程，执行脚手架命令：

shell
kapi new helloworld --vue

执行完后就完成了工程的创建，根据提示进行安装依赖和功能开发：

shell
cd helloworld
npm install
npm run dev

现在你的第一个KAPI示例就运行起来了。

同样的创建一个web的示例程序可以执行：

shell
kapi new helloworld --web

然后一个原生应用就创建好了，放在Web容器里面即可

跟着具体的开发教程和API文档开始您的创作吧。

提示

  • Vue工程需要了解Vue的开发技巧
  • KAPI开发需要授权和工程推流