Okam ,一个面向小程序开发的开发框架,开发体验类 Vue, 目前已支持所有主流小程序平台的开发,包括百度小程序、微信小程序、支付宝小程序。下面小编就给大家分享一下使用 okam 快速开发百度智能小程序过程。

1、准备工作
Node 安装(要求 Node >=8 && NPM >= 3),具体安装可以到官网下载
CLI 工具安装: npm install okam-cli -g
安装成功后,可以命令行输入 okam 回车,如果有看到相应的命令使用信息,说明已经安装成功
2、创建项目
安装成功后,可以通过命令行方式,快速初始化百度小程序项目:

3、运行调试
百度小程序运行命令
npm run dev: 带watch 开发模式
npm run dev:clean: 删掉构建产物(不包括项目配置文件)并重新构建且带watch 开发模式
npm run dev:server: 带watch && 开发Server 开发模式
npm run build: 删掉构建重新构建(没有watch && 开发Server)
npm run prod: 生产环境构建
下载开发者工具,打开开发工具,打开项目构建目录:开发工具-> 打开-> 项目Root/dist
等待开发工具编译,就可以看到预览效果
4、目录结构
项目初始化后,会生成如下项目结构,建议项目开发过程中按如下方式进行代码的组织。

Okam 实现机制简介
目前okam 核心实现有两个主要模块:
okam-build: 提供核心代码构建以及其它辅助开发能力,包括增量构建、开发Server 等;
okam-core: okam 核心运行时框架,运行于原生小程序框架之上,规范化了小程序页面和组件定义方式,包括生命周期、API 跟Vue 对齐。
okam 框架给小程序提供的一系列框架扩展能力,都是依托于构建配置文件,该构建配置不同于其它开源框架,不仅仅是用于声明代码转译构建处理流程,还可以用于声明框架要使用的扩展能力及可以灵活的对小程序API 和组件进行扩展声明。这样设计,也使得开发者可以更加灵活控制自己框架要使用的能力,同时可以灵活的扩展自己的框架API 和组件,可以更容易在不同平台间实现无缝对齐,减少了各种平台代码特殊处理逻辑。
因此,虽然我们提供了Vue 的数据操作方式包括Computed Watch 能力,开发者完全也可以把这个能力从核心框架移除掉。基于这种方式,开发者可以真正实现按需增强自己开发框架能力。而okam 框架构建是基于依赖分析进行构建的,因此完全不用担心不同平台代码或者没用到的框架扩展能力会被构建到目标平台里。
构建配置文件
下面是构建配置文件大概的样子,完整的构建配置定义可以参考这里。

入口脚本- app.js
相比原生小程序包括目前开源的一些开发框架,你要做的事情非常简单,导出入口脚本定义,如下所示:

对于页面组件也是一样的比较简洁,不需要原生各种App/Component/Page 的包裹,也不需要各种烦人扩展定义方式: import App from 'xx'; class MyApp extends App {};
如果你想使用各种新的ES Next 语法,包括asyn await 语法,这些都是支持的,你唯一要做的事情,只是变更构建配置,代码不需要额外引入任何东西,剩下的就交给开发框架来做。
入口样式- app.css
入口样式跟原生保持一致,此外提供了可选的预处理语言供选择,包括stylus less sass ,开发者可以自行选择自己喜欢的。
如果rpx 单位转换让你头痛,可以使用okam 提供的 px2rpx 插件,来帮你自动完成这个事情。
页面定义
相比原生开发,一个页面往往需要最多四个同名文件定义,而在okam 框架里,只需要一个单文件组件同Vue 就可以轻松完成一个页面定义。当然,定义的页面需要在app.js config.pages 属性里声明,方能访问到。