写在前面
在某社区逛帖子的时候, 有人留言说不太懂想看看源码, 见作者甩了个链接出来, 然后我好奇戳了一下, 咦,自动打开微信开发者工具导入代码片段了。<br />然后我就反思了下:之前在项目内遇到bug了发技术帖时, 很多时候也只是贴了部分代码截图, 不一定能很精准地描述清楚问题, 故有了此文章去了解下小程序的代码片段。
什么是代码片段?
代码片段是一种可分享的小项目,可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题等等。 分享代码片段会得到一个链接,所有拥有此分享链接的人可以在工具中导入此代码片段。如果网页可点击的链接指向的是分享链接,那么点击链接也会自动打开工具进入代码片段导入页。 使用最新版的开发者工具可以使用 chrome 浏览器点此体验导入代码片段。
跟普通的小程序项目的对比
- 没有上传功能、只能分享
- 代码片段不支持云开发
- 代码片段的快速启动模板与普通项目的快速启动模板不同,体积更小,功能更精简
代码片段有什么用?
真实应用场景:
- 在寻求技术答案时附带代码片段, 能够让大家更快地给你解答;
- 在发表相关文章时带上代码片段, 可以让阅读者更好地理解该文章的意思;
代码片段实践
1. 创建代码片段
- 项目-新建代码片段, 根据指引填写相关内容.

下图为代码片段初始化成功后的表现: 你会发现右上角有个分享btn。
Tips:
- appid为可选项, 涉及到一些需要依赖appid的操作才需要填写此项
- 点击取消可查看本地所有的代码片段(包括你自己的&&导入的)
2. 分享代码片段
点击右上角分享按钮, 根据指引填写相关信息, 这里会再次确认是否需要appid。
// 相关指引说明项目描述:简要介绍此代码片段的功能和目的是否需要 AppID:如果是,开发者导入代码片段时会建议其填入 AppID 以完整运行代码片段最低库版本:开发者打开导入的代码片段时详情页的调试基础库不会低于指定的版本

填写完成后点击生成分享链接

Tips:该链接即可拿去分享, 便于团队成员做导入操作。
eg: https://developers.weixin.qq.com/s/g5bTltmr7yzY(该链接后的g5bTltmr7yzY是他的代码片段id)
3. 导入代码片段
- 方案一:项目-导入小程序代码片段-复制分享的HTTP链接or片段ID(上面有提到)

方案二: 普通网页通过 标签,然后点击该链接就可以自动打开开发者工具进行导入了。
方案二有时候我们会遇到这种仍未自动打开微信开发者工具的情况,我们检查下是未安装微信开发者工具,若不行那就采用手动导入的方式。

写在最后
官方提供的工具不少, 能用起来尽量用起来, 便于更高效地找到问题答案or寻求答复。
