客户端 API/网页应用/小程序API/示例代码
# 示例代码

为了帮助开发者方便的开发应用，我们准备了小程序和网页应用的示例代码，欢迎下载：
<br>

| 名称 |代码包下载 |使用说明
| - | - | - |- |
| 小程序（API与组件）|[microapp-demo.zip](//sf16-sg.larksuitecdn.com/obj/open-platform-opendoc-sg/c73e19d3c910e185c0b76831e8773004_PP9jXkOARb.zip)| [使用说明](https://open.larksuite.com/document/uYjL24iN/uYDM04iNwQjL2ADN)
| 网页应用（API） | [h5-sdk-demo.zip](//sf16-sg.larksuitecdn.com/obj/open-platform-opendoc-sg/93323479bf225067f9c709511af36651_rZ8ypRWcmS.zip)| [使用说明](https://open.larksuite.com/document/uYjL24iN/uYDM04iNwQjL2ADN#1757f090)

## 小程序示例代码包 使用说明
1. 点击小程序-“代码包下载”，下载压缩包，并解压文件
2. 下载[Lark开发者工具](https://open.larksuite.com/document/uYjL24iN/ucDOzYjL3gzM24yN4MjN)并完成安装；
3. 打开Lark开发者工具，点击左下角“登录”功能，选择登录环境=“Lark”，并扫码完成用户登录
4. 左侧导航栏选择“小程序“，并点击右上角”导入项目“，选择已解压后的示例代码包

![image.png](//sf16-sg.larksuitecdn.com/obj/open-platform-opendoc-sg/2db90c1ca7075fd7d2c80d353bee41cb_ChyaKiEgUt.png?height=1030&lazyload=true&width=1640)

5. 导入成功后可看到IDE效果如下：

![image.png](//sf16-sg.larksuitecdn.com/obj/open-platform-opendoc-sg/63b237e5d9738a2e002e7795bf5794d7_iWyjKfzx2l.png?height=1016&lazyload=true&width=1640)

此时如果点击“预览”或“真机调试”会出现错误：

![image.png](//sf16-sg.larksuitecdn.com/obj/open-platform-opendoc-sg/de7be3e94eb6e48bae872981506acc72_cQY3hB1o1u.png?height=870&lazyload=true&width=1640)
原因是我们并未将这个示例代码 与 我们的某个应用关联起来。因此我们需要创建一个Lark应用。

6. 创建Lark应用，参见 [快速开发小程序](https://open.larksuite.com/document/home/develop-a-gadget-in-5-minutes/create-a-custom-app) 中的“创建应用”步骤

7. 创建应用后，打开`project.config.json`文件，将其中的`app_id`替换为你创建应用的app_id，并保存文件

![image.png](//sf16-sg.larksuitecdn.com/obj/open-platform-opendoc-sg/7d9ba42cdcb283aec19ff18c28af1b72_0a5GOzO5pf.png?height=1040&lazyload=true&width=1640)

![image.png](//sf16-sg.larksuitecdn.com/obj/open-platform-opendoc-sg/a0444f7edc4fa0e35c0290cbb13764a5_9Mwi4VvAnH.png?height=625&lazyload=true&width=1640)

8. 重新“预览”或“真机调试”，可以看到运行成功。

![image.png](//sf16-sg.larksuitecdn.com/obj/open-platform-opendoc-sg/29108ed57f0194f599721bdbb425c43d_11fikvLeua.png?height=872&lazyload=true&width=1640)

9. 如需快速了解小程序示例代码包中文件的含义、结构，如何调用小程序的组件和API、如何调试与发布小程序，推荐查看入门教程 [快速开发小程序](https://open.larksuite.com/document/home/develop-a-gadget-in-5-minutes/create-a-custom-app)

## 网页应用示例代码包 使用说明
1. 点击网页应用-“代码包下载”，下载压缩包，并解压文件
2. 暂不支持在[Lark开发者工具](https://open.larksuite.com/document/uYjL24iN/ucDOzYjL3gzM24yN4MjN)中导入网页应用项目，因此需要将文件导入任一的编译器内查看。
3. 使用[Lark开发者工具](https://open.larksuite.com/document/uYjL24iN/ucDOzYjL3gzM24yN4MjN)编写你的网页应用。如需快速了解如何开发网页应用，推荐查看入门教程 [快速集成网页应用](https://open.larksuite.com/document/home/integrating-web-apps-in-5-minutes/create-app-and-configuration)