Okam ，一個面向小程序開發(fā)的開發(fā)框架，開發(fā)體驗類 Vue, 目前已支持所有主流小程序平臺的開發(fā)，包括百度小程序、微信小程序、支付寶小程序。下面小編就給大家分享一下使用 okam 快速開發(fā)百度智能小程序過程。
1、準備工作
Node 安裝（要求 Node >=8 && NPM >= 3），具體安裝可以到官網(wǎng)下載
CLI 工具安裝: npm install okam-cli -g
安裝成功后，可以命令行輸入 okam 回車，如果有看到相應的命令使用信息，說明已經安裝成功
2、創(chuàng)建項目
安裝成功后，可以通過命令行方式，快速初始化百度小程序項目：
3、運行調試
百度小程序運行命令
npm run dev： 帶watch 開發(fā)模式
npm run dev:clean： 刪掉構建產物（不包括項目配置文件）并重新構建且?guī)atch 開發(fā)模式
npm run dev:server： 帶watch && 開發(fā)Server 開發(fā)模式
npm run build： 刪掉構建重新構建（沒有watch && 開發(fā)Server）
npm run prod： 生產環(huán)境構建
下載開發(fā)者工具，打開開發(fā)工具，打開項目構建目錄：開發(fā)工具-> 打開-> 項目Root/dist
等待開發(fā)工具編譯，就可以看到預覽效果
4、目錄結構
項目初始化后，會生成如下項目結構，建議項目開發(fā)過程中按如下方式進行代碼的組織。
Okam 實現(xiàn)機制簡介
目前okam 核心實現(xiàn)有兩個主要模塊：
okam-build: 提供核心代碼構建以及其它輔助開發(fā)能力，包括增量構建、開發(fā)Server 等；
okam-core: okam 核心運行時框架，運行于原生小程序框架之上，規(guī)范化了小程序頁面和組件定義方式，包括生命周期、API 跟Vue 對齊。
okam 框架給小程序提供的一系列框架擴展能力，都是依托于構建配置文件，該構建配置不同于其它開源框架，不僅僅是用于聲明代碼轉譯構建處理流程，還可以用于聲明框架要使用的擴展能力及可以靈活的對小程序API 和組件進行擴展聲明。這樣設計，也使得開發(fā)者可以更加靈活控制自己框架要使用的能力，同時可以靈活的擴展自己的框架API 和組件，可以更容易在不同平臺間實現(xiàn)無縫對齊，減少了各種平臺代碼特殊處理邏輯。
因此，雖然我們提供了Vue 的數(shù)據(jù)操作方式包括Computed Watch 能力，開發(fā)者完全也可以把這個能力從核心框架移除掉?；谶@種方式，開發(fā)者可以真正實現(xiàn)按需增強自己開發(fā)框架能力。而okam 框架構建是基于依賴分析進行構建的，因此完全不用擔心不同平臺代碼或者沒用到的框架擴展能力會被構建到目標平臺里。
構建配置文件
下面是構建配置文件大概的樣子，完整的構建配置定義可以參考這里。
入口腳本- app.js
相比原生小程序包括目前開源的一些開發(fā)框架，你要做的事情非常簡單，導出入口腳本定義，如下所示：
對于頁面組件也是一樣的比較簡潔，不需要原生各種App/Component/Page 的包裹，也不需要各種煩人擴展定義方式： import App from 'xx'; class MyApp extends App {};
如果你想使用各種新的ES Next 語法，包括asyn await 語法，這些都是支持的，你唯一要做的事情，只是變更構建配置，代碼不需要額外引入任何東西，剩下的就交給開發(fā)框架來做。
入口樣式- app.css
入口樣式跟原生保持一致，此外提供了可選的預處理語言供選擇，包括stylus less sass ，開發(fā)者可以自行選擇自己喜歡的。
如果rpx 單位轉換讓你頭痛，可以使用okam 提供的 px2rpx 插件，來幫你自動完成這個事情。
頁面定義
相比原生開發(fā)，一個頁面往往需要最多四個同名文件定義，而在okam 框架里，只需要一個單文件組件同Vue 就可以輕松完成一個頁面定義。當然，定義的頁面需要在app.js config.pages 屬性里聲明，方能訪問到。
