# 开发小程序
通过本文，你将学会在企业内发布一个飞书小程序，预计时间：10 分钟。  
在正式开发之前请先参考 [用户手册](https://open.feishu.cn/document/uYjL24iN/ucDOzYjL3gzM24yN4MjN#3da20bb3) 完成工具安装。

## 创建第一个企业自建应用

### 1. 快速创建应用

进入[飞书开放平台—开发者后台](https://open.feishu.cn/app/)创建一个名为 hello-world 的应用。

> 详情查看[如何创建企业自建应用](https://open.feishu.cn/document/uQjL04CN/ukzM04SOzQjL5MDN)。

### 2. 查看应用的 App ID

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

![图片名称](https://sf3-cn.feishucdn.com/obj/website-img/ba88e9e7bf7ee16dd117bc86eb0d5c6b_oVmI8eZ7no.png)

2. 在**应用详情**页点击左侧菜单栏 **凭证与基础信息** ，查看右侧 **应用凭证** 下的 App ID（App ID 是应用的唯一标识），点击可以直接复制应用的 App ID。

- 注意：请务必保存应用的 App ID，之后的步骤会用到。

## 创建小程序项目

### 1. 从模版创建小程序

在终端下执行以下命令，将会在当前目录下创建一个基于 ==hello-world== 模版的名为 ==my-hello-world== 的小程序项目。

```js
opdev new my-hello-world --template=hello-world
```

### 2. 填写 App ID

1. 使用代码编辑器打开上一步创建成功的小程序项目（这里以 VSCode 为例），可以看到 ==my-hello-world== 目录下生成了小程序的[基本目录结构](https://open.feishu.cn/document/uYjL24iN/ukjMukjMukjM)。

![图片名称](https://sf3-cn.feishucdn.com/obj/website-img/4f9decc07af5f30a0fd95aa9b202d27e_MlVJeWa3O9.png)

2. 复制 App ID（具体方法请见 **查看应用的 App ID**），粘贴替换到 ==project.config.json== 中的 ==appid== 字段下，如下图所示：

![图片名称](https://sf3-cn.feishucdn.com/obj/website-img/9971989f967e2dba44dad83a008f84db_7x6zAZFQSs.png)

## 本地调试和预览

### 1. 预览小程序
>注：开发工具依赖[Chrome浏览器](https://www.google.cn/intl/zh-CN/chrome/)，请确保你的电脑已经安装。

在终端下执行以下命令，将会打开左右两个 Chrome 浏览器窗口（左边是模拟器，右边是调试器），你可以使用这两个窗口进行小程序的调试和预览。

```shell
 opdev devtools ./my-hello-world
```

![图片名称](https://sf3-cn.feishucdn.com/obj/website-img/23cd4c5546551bc9e801a4e46ef17e02_TUuMmRAAlW.png)

### 2. 开发与调试

1. 回到代码编辑器，打开 /pages/index/index.ttml，修改其中的内容，将 **Welcome to Gadget** 改为 **hello world** 并保存。

![图片名称](https://sf3-cn.feishucdn.com/obj/website-img/a9698ca28ff09d5bed9329e59a6a106f_0q4RpuJrXI.png)

2. 保存成功后，再次查看模拟器。可以看到页面显示的文字也被修改为 **hello world**，那么恭喜你，你已经学会了小程序的本地预览和调试了。

![图片名称](https://sf3-cn.feishucdn.com/obj/website-img/39afe8ee81ee8f7eac573ae428ed5331_9XJiZA7OfK.png)

## 真机预览

由于本地预览是基于 Chrome 浏览器实现的，并不能和小程序发布上线后的效果达到完全一致，你可以使用**真机预览**功能查看小程序在飞书中的真实效果。

1. 在终端执行以下命令将会在生成一个二维码。

```shell
opdev preview ./my-hello-world -p Mobile
```

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

![图片名称](https://sf3-cn.feishucdn.com/obj/website-img/d7af7bbc50173173c49c0c1c83f61d20_J2F1WDERtD.png)

3. 进入小程序调试模式：显示文字 **hello world**。

![图片名称](https://sf3-cn.feishucdn.com/obj/website-img/90ce378b24506bb1b6afb64aa6643fb5_juCfWQcUqC.png)

## 上传和发布

完成上传和发布之后，企业内的其他人也能够使用你的小程序应用了。

### 1. 上传

1. 进入命令行，执行以下命令，==-p Mobile== 参数表示上传移动端小程序版本，==-v 1.7.0== 参数表示将要上传的版本是 ==1.7.0==。

2. 执行完成后，会显示 **Please enter description(Optional)**，你可以在这条提示后输入版本描述信息（这里我们填写为空），按下回车后开始上传。上传成功后提示 **Upload mobile succeed**。

```js
opdev upload ./my-hello-world -p Mobile -v 1.7.0
```

![图片名称](https://sf3-cn.feishucdn.com/obj/website-img/0b481798904ce52dc95ac3b0e9aa6674_4SiXle4yPG.png)

3. 点击链接 **Open platform**，进入开放平台应用详情页。

### 2. 更新小程序版本

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

![图片名称](https://sf3-cn.feishucdn.com/obj/website-img/ce655cd035540b0ac246899f24ab0172_a6eMCwgxrH.png)

### 3. 发布应用warning
发布应用前必须确保已经上传了应用图标。

1. 在应用详情页面，点击左侧 **版本管理与发布** 进入版本管理与发布页面，点击 **创建版本** 按钮，进入创建版本详情页。发布版本的具体流程可参考：[如何开发企业自建应用](https://open.feishu.cn/document/uQjL04CN/ukzM04SOzQjL5MDN#%E5%9C%A8%E4%BC%81%E4%B8%9A%E5%86%85%E5%8F%91%E5%B8%83%E4%B8%8A%E7%BA%BF)。

2. 在创建版本页面下，填写以下信息：

- 版本号： **1.0.0或者其他正确的版本号**
- 最低兼容飞书版本： **你需要兼容的版本**
- 更新说明： **你的更新说明**
- 可用性状态： **自己和其他你需要展示的用户**

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

![图片名称](https://sf3-cn.feishucdn.com/obj/website-img/e836a5876612bdfbd0dd3b0fcce22834_lF8JMCIGvm.png)

3. 保存成功后，点击右上角 **申请发布** 按钮。

![图片名称](https://sf3-cn.feishucdn.com/obj/website-img/ab4222fa3ec19fb7339b269a64af824a_tR1eLJ56m4.png)

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

![图片名称](https://sf3-cn.feishucdn.com/obj/website-img/f8db3056df9e5a98c8b58b46d2d2cc0a_0Ck7pOBTQJ.png)

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

![图片名称](https://sf3-cn.feishucdn.com/obj/website-img/8bd28f0176600383c63ad55e85719cf5_HgLmvd0bXt.png)

![图片名称](https://sf3-cn.feishucdn.com/obj/website-img/bf2a27e610a004878668590f3130cea9_7Ez1c4BFEH.png)