全部商品分类
去购物车结算
首页 > 狮龙书廊官方在线论坛公告 > 小程序开发飞书平台

小程序开发飞书平台

时间:2020-08-01 05:06:56

准备工作:安装 VSCode 飞书插件

1. 安装 VSCode

Visual Studio Code,简称 VSCode。它是一款免费开源的现代化轻量级代码编辑器,使用方便快捷,功能强大,支持各种的文件格式,跨平台支持 Win、Mac 以及 Linux。

如果你已经安装了 VSCode,请跳过此步骤,前往下一步骤: 2. 安装 VSCode 飞书插件

请前往 VSCode 官网提供的下载地址进行下载。

图片名称

可以看到,官方准备了分别适用于 Windows、Linux 和 macOS 操作系统的安装包,找到适合自己操作系统版本,点击开始下载,等待下载完成。

2. 安装 VSCode 飞书插件

安装完 VSCode 后,就可以安装 VSCode 飞书插件了。

有关插件的具体介绍请参考 Feishu Extension 使用手册
VSCode插件使用了 Node.js 命令,所以必须确保安装了 Node.js 并且版本在 v11.11.0 以上才能正常使用。

  1. 安装完 VSCode 后,直接启动 VSCode,进入欢迎页。

图片名称

  1. 打开 VSCode,在左侧工作区中找到插件(Extensions)图标,点击打开插件目录。

  2. 在中间插件应用商店中搜索"feishu",找到 Feishu Extension,点击打开插件的介绍界面。

  3. 在右侧插件介绍中找到 Install 按钮,点击进行安装。

图片名称

  1. 安装完成,查看插件。你可以点击探索图标,如果你查看到 FEISHU 的工作区、账号管理区、插件输出区,那么恭喜你安装成功,你可以在这里进行有关的快捷操作。

图片名称

  1. 插件安装完成后,点击 VSCode 左下角账号管理区 No Account,弹出上方选择器,选择 Feishu,会自动打开系统默认浏览器进前往登录。

图片名称

  1. 完成登录,返回 VSCode。

图片名称

查看到账号管理区上显示了你的账户名,说明登录成功。

图片名称

创建第一个企业自建应用

1.快速创建应用

进入飞书开放平台—我的应用,登录飞书账号后,创建一个名为 hello-world 的应用,详情查看如何创建企业自建应用

2.查看应用的 App ID

  1. 创建成功后,可以看到 hello-world 应用被添加到企业自建应用目录中,点击该行,进入应用详情页。

图片名称

  1. 进入应用详情页,点击左侧菜单栏 凭证与基础信息 ,查看右侧 应用凭证 下的 App ID(App ID 是应用的唯一标识),点击可以直接复制,获得应用的 App ID。

    注意:请务必保存应用的 App ID,之后的步骤会用到。

图片名称

创建小程序项目

1. 打开创建项目面板

打开已安装飞书插件的 VSCode,点击左侧菜单栏中的 探索图标 打开左下角的 FEISHU 工作区,点击工作区中的 + 图标 ,打开创建项目面板。

图片名称

2. 填写信息创建小程序项目

应用App ID(获取方法请见 Step1.2: 查看应用App ID)、项目路径(必须为空目录)、项目名(可根据项目路径自动生成)。点击底部 Confirm 按钮,确认创建。

图片名称

创建成功之后,会自动在之前设置的项目路径中初始化小程序的基本目录结构。

小程序目录结构

图片名称

真机预览

上一步我们创建了一个初始化小程序,接下来让我们来预览一下效果。

1.检查小程序解析路径

查看插件工作区中的 Complie Directory ,确保插件的解析路径是小程序项目路径。

图片名称

你也可以在文件工作区中右击目标文件选择 \"Set Compile Directory(Feishu)\" 来自定义解析路径。

图片名称

2.预览小程序

  1. 确定路径无误之后,点击工作区中的 预览 按钮,点击选择你需要预览的模式进行真机预览。

图片名称

  1. 选择 Preview Mobile,等待插件编译完成之后,会打开如下二维码界面。

图片名称

  1. 打开手机飞书,点击右上角 + ,点击 扫一扫 ,扫描上一步生成的二维码。

图片名称

  1. 进入小程序调试模式:显示文字 Welcome to Gadget

图片名称

3.开发与调试

  1. 回到 VSCode 界面,打开 /pages/index/index.ttml,修改其中的内容,将 Welcome to Gadget 改为 hello world

图片名称

  1. 重复 Step3.2:预览小程序 的操作,再次进入小程序调试模式预览。如果你的页面显示的文字也被修改为 hello world,那么恭喜你,你已经学会了小程序的预览和调试了。

图片名称

上传与发布

通过上传与发布,就让企业内的其他人也能够使用你的小程序应用了。

1.上传

  1. 点击工作区中的上传按钮打开上方的选择框,在选择框中选择你需要上传的模式。这里我们以移动端上传为例,选择 Upload Mobile

图片名称

  1. 输入版本号 1.0.1,连续按两下回车键确认上传。

图片名称

  1. 若右下角提示上传成功,点击提示框中的 Go to Developer 按钮,进入开发者后台的应用详情。

图片名称

图片名称

2. 更新小程序版本

紧接着上一步,在开放平台应用详情页 > 应用功能 > 小程序下,打开 启用小程序 开关、选择最新小程序的版本、点击保存按钮,确认保存成功。

图片名称

3.发布应用

  1. 在应用详情页面,点击左侧 版本管理与发布 进入版本管理与发布页面,点击 创建版本 按钮,进入创建版本详情页。发布版本的具体流程可参考:如何开发企业自建应用

图片名称

  1. 在创建版本页面下,填写:
  • 版本号为 1.0.0

  • 最低兼容飞书版本为 3.16

  • 更新说明填为 测试

  • 可见性只选自己

    填写完成后点击底部 保存 按钮。

图片名称

  1. 保存成功后,点击右上角 申请发布 按钮。

图片名称

可以看到,1.0.0 的版本已经发布。

图片名称

  1. 打开飞书移动端,进入工作台,在 全部应用 下,可以看到上一步发布成功的应用 hello-world,点击打开,如果你看到了带有 hello world 字样的小程序页面,那么恭喜你已经成功入门飞书小程序开发了。

图片名称

图片名称

狮龙书廊官方在线论坛公告