哦嚯！我只用CV大法就实现了小程序的底部导航栏你信吗？

底部导航栏这种需求是前端开发经常要遇到的啦，如何只用CV就实现呢？

今天小编将自己的前端开发“外挂”推荐给大家。

一、新建一个小程序项目

二、登录codeFun

codeFun域名：https://code.fun

 

• 没有项目的话需要先“创建项目”
• 关于设计稿如何上传的问题，请阅读本篇文章最后的“附录-设计稿上传”的补充说明部分内容

三、获取codeFun生成的代码

代码获取步骤

1. 打开顶部的“查看代码”功能；
2. 选中当前设计稿的底部导航栏区域；
3. 设置要生成的代码平台和尺寸信息；
4. 复制已生成的代码到微信开发者工具；

如下图所示

四、复制到项目中使用

就这效率和设计稿的还原度，我只想问 还有谁？

 下面给大家正式介绍一下我的前端开发“外挂”吧

五、codeFun技术特色和产品特点介绍

codeFun 是UI设计稿智能⽣成源代码解决⽅案，核心能力是将UI 设计稿⼀键⽣成源代码。

技术特色：

• 布局体系推算：⽀持弹性布局、响应式布局，⾃动推算布局⽅案。
• UI模式预测：⾃动解析元素之间的关系，对 UI 模式进⾏推断预测。
• 屏幕适配推算：⽣成的代码⾃适应不同尺⼨的屏幕，对不同类型的元素⾃动推算定位⽅案。
• 数据绑定等：引⼊数据源，设置与绑定变量，⾃动⽣成带有数据库引⽤的代码。

从上面截图示例的代码来看就能看出，能生成有语义的代码。代码的语义化是非常重要的。

产品特点：

• ⽆约束：⽆需标注，⽆需设计规范，不需要改变现有⼯作⽅式与流程。
• 设计师友好：注册即可使⽤，设计师⽆额外⼯作量，免去设计师UI标注、UI⾛查的时间。
• 学习成本极低：⼀键上传设计稿，⼀键复制源代码，⽆需帮助，即刻上⼿。
• 易于跟现有⼯作流程整合：有设计稿就能得到完整可⽤源代码，⽆需引⼊额外流程，也不破坏既有流程。

打工人！你还不来跟我一起体验一下我的“外挂”？

 附录：

设计稿上传

codeFun上传设计稿文档链接：https://code.fun/docs/快速上手#上传设计稿

codeFun入门视频教程链接：第1期/前端工程师/CodeFun的使用技巧分享_哔哩哔哩_bilibili