title: 代码片段 header: develop nav: devtools

sidebar: code

代码片段是一种可分享的小项目，可用于分享小程序的开发经验、展示组件和 API 的使用、复现开发问题等等。分享代码片段会得到一个链接，所有拥有此分享链接的人可以在工具中导入此代码片段。如果网页可点击的链接指向的是分享链接，那么点击链接也会自动打开工具进入代码片段导入页。

代码片段列表

在工具启动页面，点击代码片段可以查看所有本地代码片段 图片

创建代码片段

  1. 1. 启动页面选择代码片段点击新建即可进入创建代码片段页面。
  2. 2. 进入主窗口页面，在菜单栏单击“项目>创建代码片段”。
  3. 3. 在对话框内填入“代码片段名称”、“代码片段目录”和“AppID”。
  4. 4. 单击“完成”即可创建并打开代码片段。

图片 说明： 为便于小程序的代码片段的传播，代码片段体积不得大于100K。

代码片段主界面

代码片段的主界面与普通项目主要有以下几点区别：

  1. 1. 没有发布功能，但是有分享功能
  2. 2. 代码片段的快速启动模板与普通项目的快速启动模板不同，体积更小，功能更精简

图片

分享代码片段

在工具栏上点击分享按钮即可开启分享代码片段的流程，在分享信息中需要填写以下内容：

  1. 1. 项目描述：简要介绍此代码片段的功能和目的
  2. 2. 项目名称：代码片段名称

分享的小程序代码片段最大为 100KB。 图片 分享成功后会展示分享链接，可复制分享给其他开发者，其他开发者在工具中选择导入代码片段并粘贴链接即可导入。

分享

图片

分享的链接除了可以粘贴到导入页导入外，还可以设置为可点击的链接。如果 html <a> 标签的 href 属性设置为分享的链接，如 代码片段示例，则用户点击此链接时会自动打开工具进入代码片段导入页，最后点击导入即可完成导入。在开发者社区发帖时，如果想要提供 demo 示例，可以插入一个代码片段分享链接。

导入代码片段

  • 在浏览器中直接输入分享链接，例如：swanide://fragment/c6b6e92b5ef4bc9276cfbc99fddf3dba1557733966512。
  • 启动页面，“代码片段>导入”进入代码片段导入页面并填写对应的链接、名称、目录等信息。
  • 进入主窗口页面，在菜单栏单击“栏目>导入代码片段”并填写对应的链接、名称、目录等信息。 图片