Iceworks 支持小程序开发

目录

• 引言
• Iceworks 为何要支持小程序开发

• 在 Iceworks 上如何开发小程序

  • 初始化项目
  • 启动服务
  • 新建页面
  • 项目基本结构
• 开始你的第一个应用

引言

小程序开发无疑是目前前端领域煊赫一时的开发方式之一，熟知的有支付宝小程序，微信小程序等；各类围绕着小程序的框架也开始在社区出现，如可使用 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 中选择并建立应用后，跟着下文开始开发吧

https://developer.taobao.com/...

多端适配

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

---

扩展信息

• 淘宝开发者平台
• 官方网站：飞冰-让前端开发简单而友好
• 下载 Iceworks：https://alibaba.github.io/ice...
• Github：http://github.com/alibaba/ice
• 飞冰群二维码：点击这里查看二维码
• 联系 & 招聘 ice-admin[at]alibaba-inc.com