跨平臺 Web APP 框架：BIN
IN 是一個簡單、輕量、易用、跨平臺的 Web APP開源框架，提供了對于APP開發的核心框架，通用的UI組件，能夠快速的開發移動APP，并表現出和 Native APP 一樣的操作體驗。BIN采用Cordova和Native進行銜接，在Android端采用CrossWalk WebKit內核，使用JQuery、 RequireJS、Backbone、U nderscore、FastClick等通用穩定的第三方庫 。從開發角度來說，BIN是一個純Web，非Hybrid的APP框架，但是基于框架提供的開發模式，你可以像Native一樣開發UI View。當前支持IOS和Android平臺，可以通過Online Tutorials Online Demo (通過手機訪問，效果更逼真)來體驗BIN開源框架。
功能
-
View抽象，模擬原生開發模式
-
一般頁面 Pageview
-
導航欄頁面 NaviPageView
-
下拉刷新頁面 RefreshView
-
列表頁面 ListView
-
指示器 IndicatorView
-
Alert框 AlertView
-
Tab欄 TabBarView
-
Swipe頁面 Swipeview
-
Tab頁面 TabView
-
網絡API模塊
-
網絡緩存模塊
- 圖片延遲加載
-
數據中心模塊，支持本地存儲和會話存儲
-
本地API測試框架，支持完全無依賴服務器進行開發
效果
安裝
-
安裝nodejs
-
下載BIN壓縮包,參照demo開始你的應用開發
目錄結構
-
bin : BIN 框架代碼
-
demo : 演示APP
-
android-project : Android原生工程，用于打包Android APP
-
ios-project : IOS原生工程，用于打包IOS APP
-
tools : 包含一些開發工具
-
server : Web APP的模擬服務器，在本地開發時需要
demo
BIN提供了一個demo APP，包含了BIN框架包含的所有功能的演示和實際開發的示例代碼，demo也可以作為實際APP開發的模板。
在PC上演示demo:
1. 拷貝bin目錄中內容到demo/bin目錄。
2. 啟動nodejs服務器:
+ 啟動本地服務器：node server.js，加載資源需要。
+ 啟動本地API服務器：node server-demo.js，網絡API請求需要。
3. 打開Chrome瀏覽器，注意：Chrome需要使用--disable-web-security進行跨域，否則ajax請求會失敗。
4. 使用localhost:8080進行訪問。 5. 右鍵，點擊 審查元素，使用移動模式演示demo。
在Android手機上演示demo:
1. 拷貝bin目錄中內容到demo/bin目錄。
2. 拷貝demo目錄內容到android-project/asserts/www目錄下。
3. 編譯APK安裝。
在IPhone手機上演示demo:
1. 拷貝bin目錄中內容到demo/bin目錄。
2. 拷貝demo目錄內容到ios-project/www目錄下。
3. 編譯IPK安裝。
文檔
Core
bin
bin是整個框架的命名空間，包含了可配置的Class結構(classConfig)，包含了全局的單件實例app,netManager,hudManager,debugManager,naviController,dataCenter。
配置文件
bin中的配置文件有globalConfig, requireConfig, classConfig, netLocalConfig。在bin/config中包含了這些配置文件的模板，實際應用中使用的是config目錄下的。詳細信息參見文件。
-
globalConfig.js
對應用的整體配置，包含global和runtime兩類配置數據。
global : 全局配置，通過bin.globalConfig獲取，這里面是整個globalConfig里的內容
runtime : 運行時配置，應用啟動后，會根據global中runtime來選擇對應的運行時配置，以方便我們不同版本的切換。 -
requireConfig.js
對requirejs的整體配置 -
classConfig.js
對bin類結構的配置，在這里面可以修改框架內部實際使用的類，已達到定制自己的類，比如Application，DataCenter...
注意 : 該結構定義中不存在沒有依賴關系，僅僅是一個結構關系，所以在requirejs的define中不要直接使用，而是在運行時使用。 -
netLocalConfig.js
網絡API本地數據測試配置
Application
Application是bin的應用基類，可通過classConfig中定制。
-
init()
應用初始化，可添加自己的初始化操作。bin.Application會自動初始化debugManager,hudManager,netManager,naviController,dataCenter。 -
run()
應用開始執行，可添加應用顯示第一個頁面的代碼。 -
onDeviceBack()
針對Android Device返回鍵點擊回調，在PC上可通過懸浮Debug按鈕模擬。 -
onPause()
應用進程被Pause回調。 -
onResume()
應用進程被Resume回調。
bin.netManager
bin中的所有ajax http請求由netManager封裝，netManager提供API抽象。netManager中提供四種策略(Policy)來定制網絡處理的行為，bin提供了默認實現。
CachePolicy : 網絡緩存策略,配置網絡請求的數據在客戶端如何緩存
+ NORMAL : 一直緩存在本地,直到超過maxCacheDuration(Config中配置)
+ DURATION : 指定緩存的時間，過期后無效
+ SESSION : APP期間一直有效，關閉后緩存失效
+ USER_SESSION : 用戶登陸期間有效，退出后失效
CallbackPolicy : 網絡回調策略，可在這里面添加在框架層面對請求的統一處理
DebugPolicy : 網絡本地數據測試策略
SendCheckPolicy : 網絡發送策略，處理網絡請求在發送前的過濾邏輯
+ ABORT_ON_REQUESTING : 同一個api請求，當已經存在請求，再次發送將會abort前一次請求
+ REJECT_ON_REQUESTING : 同一個api請求，當已經存在請求，再次發送將會被reject，不能請求
-
doAPI(params)
進行一次api操作,params為ajax的參數,同時包含bin定義的參數
params.options : bin api選項 -
loading : 網絡加載選項 默認為MODEL, true/false加載效果, MODEL表示同時添加模態效果, 網絡請求同時，用戶將不能進行UI操作。
-
cache : 網絡緩存選項 默認無, NORMAL/DURATION/SESSION/USER_SESSION
-
cacheDuration : 指定緩存的時間(ms), 當cache為DURATION時有效
-
sendCheck : 網絡發送選項 默認無, ABORT_ON_REQUESTING/REJECT_ON_REQUESTING
-
setDebugPolicy(policy)
設置網絡本地測試策略 -
setCallbackPolicy(policy)
設置網絡回調策略 -
setCachePolicy(policy)
設置網絡緩存策略 -
setSendCheckPolicy(policy)
設置網絡發送策略 -
ajax(params)
發送ajax請求
bin.hudManager
bin中所有hud顯示由hudManager提供，比如Alert，Status，Indicator。
-
startIndicator(options)
開始菊花圖。
options.model : 是否模態 true/false
返回本次菊花圖ID，供stopIndicator使用 -
stopIndicator(indicatorID)
停止indicatorID指定的菊花圖，如果沒有指定，則完全取消菊花圖。
注意 : bin對于菊花圖支持計數機制。 -
showStatus(message)
顯示懸浮信息 -
alert(options)
顯示對話框
bin.naviController
bin中提供了頁面棧概念，由naviController完成。
-
push(name, pushData, options)
跳轉到name指定頁面
name : 頁面名字 pushData : 向新頁面傳遞的數據，新頁面可通過onViewPush獲取
options : 跳轉效果參數，可選 -
pop(count, popData, options)
返回指定級數(count)頁面
count : 返回的級數
popData : 向返回的頁面傳遞的數據，返回頁面可通過onViewBack獲取
options : 跳轉效果參數，可選 -
popTo(name, popData, options)
返回到指定頁面
參數參照pop操作 -
current()
獲取當前頁面的棧數據，返回為{name, view}
name : 頁面名字
view : 頁面對象 -
getView(name)
獲取指定頁面的棧數據，返回結構同current() -
startWith(name)
以name指定的新頁面作為根頁面，原來的頁面棧將被清空
bin.dataCenter
提供數據中心封裝，包含了本地持久化和本地會話，用戶持久化和用戶會話這幾種數據庫抽象。提供用戶數據分離功能。
bin.debugManager
在框架上提供調試功能，可參見應用中懸浮調試按鈕，可在應用中直接查看console.log, console.info, console.error信息，方便調試。
UI
View
View是BIN中最基本的UI Controller，包含了HTML中某一個Element對應的邏輯，在ios中類似View Controller。
-
constructor(options)
構造函數
options.html : 從html構造view,html應該包含一個根Element
options.elem : 從已有Element構造view,elem可以是DOM或者JQuery節點
options.el : 從已有Element構造view,elem可以是DOM或者JQuery節點，這種方式不會觸發render和show的調用
注意：BIN中的view只能通過這幾種方式來構造，三種方式是互斥的 -
genHTML()
為view動態構造HTML結構函數 -
preGenHTML()
genHTML的前事件函數 -
posGenHTML()
genHTML的后事件函數 -
asyncPosGenHTML()
posGenHTML的異步版本，對于需要依賴layout過后的屬性(比如width,height)，在該函數中處理 -
show()
顯示該view -
hide()
隱藏該view -
remove()
移除該view,移除后，view在html中對一個的節點也會被移除 -
onShow()
view在顯示時被調用 -
onHide()
view在隱藏時被調用 -
onRemove()
view在移除時被調用，一些清理的邏輯在這里處理 -
isShow()
返回view當前是否顯示中 -
$(sel, fromSel)
在view中從fromSel節點查詢sel節點，并返回該節點，sel和fromSel為JQuery selector。如果fromSel為空，則從當前view的根節點查詢；如果sel為空，返回view的根節點 -
$html(sel, html)
如果html不為空，對sel節點設置html；如果html為空，則返回sel節點的html；如果sel為空，則對根節點操作 -
$text(sel, html)
參照$html，不同點在于調用節點的text -
$append(sel, elem)
將elem插入到sel節點的最后 -
$fragment(sel, fromSel)
對$(sel, fromSel)創建一個Fragment，對Fragment操作完后需要調用setup將實際內容append到$(sel, fromSel)節點
PageView
PageView代表一個主頁面，可具有過場動畫；PageView從View繼承
-
goBack()
返回上一層頁面 -
onViewBack(backFrom, backData)
頁面返回時回調
backFrom : 所返回頁面的名字
backData : 所返回頁面傳遞給該頁面的參數 -
onViewPush(pushFrom, pushData, queryParams)
頁面跳轉時回調
pushFrom : 該頁面所跳轉頁面的名字
pushData : 所跳轉頁面傳遞給該頁面的參數
queryParams : 所跳轉頁面在url中傳遞的參數，建議不要使用該種方式傳遞，而是采用pushData來傳遞
注意 : onViewPush在render之前被調用 -
onInAnimationBeg()
頁面進入過場動畫開始時回調 -
onInAnimationEnd()
頁面進入過場動畫結束時回調 -
onDeviceBack()
針對Android手機返回鍵點擊事件回調，如果要處理該事件，不再傳遞該事件，請返回true
NaviPageView
NaviPageView代表一個具有導航欄的主頁面；NaviPageView從Page繼承
-
onLeft()
導航欄左按鈕點擊回調 -
onRight()
導航欄右按鈕點擊回調 -
setLeftImage(img)
設置左按鈕的圖片 -
setRightImage(img)
設置右按鈕的圖片 -
setLeftText(text)
設置左按鈕的文本 -
setRightText(text)
設置右按鈕的文本
注意 : 導航按鈕不支持同時設置圖片和文字 -
setLeftVisible(v)
設置左按鈕是否顯示 -
setRightVisible(v)
設置右按鈕是否顯示 -
setTitle(text)
設置導航欄Title -
setTitleVisible(v)
設置導航欄是否顯示
開發和其他
-
使用自己熟悉的一個編輯器，比如: Sublime，Notepad++，vim ...
-
使用Chrome做模擬器和調試器。
-
由于PC和手機WebKit的差異，需要在手機端進行測試。
-
在Android手機上，為了避開不同手機在WebKit上的兼容性，BIN使用了Crosswalk內核，優點是：Crosswalk性能更好，不存在兼容性問題；缺點是：編譯的APK會大10幾MB；Crosswalk有lite版本，但是lite版本不穩定。