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