引言

小程序开发无疑是目前前端领域炙手可热的开发方式之一，熟知的有支付宝小程序，微信小程序等；各种围绕着小程序的框架也开始在社区出现，如可以使用 Vue.js 开发小程序的 mpvue，遵循 React.js 语法规范的多端统一开发框架 Taro 等。这些框架的出现能有效的提升开发体验，一次编写，多端运行 ，开发者只需根据自己熟悉的语法，开发的小程序便可以运行在多个设备上，听起来很酷，确实也很酷。而 Iceworks 希望在这些很酷的基础上，能让前端开发更酷一点。

Iceworks 为什么要支持小程序开发

对于有小程序业务需求的团队而言，可能同时需要在多个小程序项目进行切换开发，在开发的过程中我们会发现有很多基础琐碎但又并不可少的一些工作：

• 工程管理：之前见过一些团队是直接将旧的项目复制一份，删掉业务代码，只留下基础的项目结构和工程配置，然后在此基础上进行开发，这显然不是优雅的做法，太过于浪费时间，且没有形成团队的规范
• 页面开发：这个过程可能是很多开发不愿意去做的事情，目前社区的小程序框架都会配备一套基础组件，这在一定程度上能减少 UI 开发的时间和效率提升，但还是少不了切页面的过程

在飞冰中，我们基于不同的项目进行物料沉淀，可复用的代码块，不同行业的场景模板，让开发者直接在 Iceworks 上快速的从物料源中选择模板创建小程序应用，并可以在此基础上进行复用和修改，基于区块可视化的组装一个页面，从而提高开发效率，减少不必要的重复的工作，专注于业务开发。

当然，除了飞冰提供的行业模板和区块，开发者也可以根据团队的开发规范和实际情况形成最佳实践，最后沉淀成区块物料池和脚手架模板。

在 Iceworks 如何开发小程序

升级到 Iceworks 2.9.0 版本，在设置面板开启 小程序物料源 选项，即可在模板界面和区块面板看到对应的小程序相关物料，其中包括：

• 4 个模板
  • miniapp-lite
  • products-admin
  • posts-admin
  • operating-dashboard
• 18 个区块

初始化项目

在模板界面，可以看到 Iceworks 推荐的小程序物料源，这里我们选择第一个 Miniapp lite 模板进行项目初始化:

启动服务

初始化完成后，在 Iceworks 项目界面，点击启动调试服务，在浏览器打开对应的地址即可预览：

新建页面

接下来，使用 Iceworks 新建页面的功能来添加一个小程序页面，点击新建页面，根据需求选择对应的区块，可以在面板右侧看到效果图，可以按需删除或者新增，也可以点击预览页面功能看到实际的页面效果，最后可以生成页面，会下载对应的代码到初始化的项目脚手架中：

回到浏览器，在地址栏输入新建页面的路由（例如: http://127.0.0.1:6002/#!/page2)，即可看到实际的效果图。

项目基本结构

Iceworks 推荐的小程序物料源使用的是淘宝小程序轻框架语法，项目包含一个描述整体程序的入口和多个描述各自页面的页面级入口, 组件扩展名为 .html 的 Single File Component (单文件组件) 描述一个自定义的轻框架组件

项目的主体部分由 manifest.json 和 app.js 组成，必须放在项目的根目录，如下：

• manifest.json
• app.js

- .iceworks/            // 模板文件(可自定义生成模板的格式)
- public/               // 静态资源
- src/
 - components/         // 组件目录
 - component1.html   // 组件文件
 - component2.html
 - pages/              // 页面目录
 - page1/
 - index.html      // 页面入口
 - page2/
 - index.html
 - index/
 - index.html
- manifest.json        // 描述项目基本信息，包括页面、tabBar等
- app.js               // 程序级应用入口
- package.json         // 项目工程文件

具体开发文档参考：products-admin

• 淘宝开发者平台 - 框架
• 淘宝开发者平台 - 组件

你的第一个轻框架应用

在 Icewworks 中选择并创建应用后，跟着下文开始开发吧

developer.taobao.com/framework/l…

多端适配

目前生成的应用是以 H5 的方式预览，同时支持 PWA 模式。 通过转换工具可以将应用发布到淘宝小程序，支付宝小程序，微信小程序等，实现多端统一，大大提高开发者的效率。

扩展信息

• 淘宝开发者平台
• 官方网站：飞冰-让前端开发简单而友好
• 下载 Iceworks：alibaba.github.io/ice/icework…
• Github：github.com/alibaba/ice
• 飞冰钉钉答疑群
• 联系 & 招聘 ice-admin[at]alibaba-inc.com