一張腦圖看懂BUI Webapp移動快速開發框架【上】--框架與工具、資源

時間 2019-11-29

標籤一張看懂 bui webapp 移動快速開發框架工具資源欄目無線简体版

原文原文鏈接

前言

以前寫過一篇 2018開發最快的Webapp框架--BUI交互框架，若是你還沒看過，能夠簡單看一下，主要介紹了BUI的基本功能，有多少控件，以及實現的思路，BUI 1.5版本之後變化很大，統一新的風格，新的規範750，新增基於Dom的數據驅動，完善了頁面的生命週期等等，當你真正理解了BUI的模塊，路由，數據驅動，工具之間的關係，沒有什麼需求是你實現不了的。後續咱們還會增長一些實戰類的移動開發案例，歡迎關注BUI Webapp專欄。css

BUI 新版預覽

在線預覽html

在線腦圖查看

圖片沒法看完，請查看在線腦圖前端

大綱

大綱在線預覽思路更清晰，文字版有刪減vue

1.框架設計

框架介紹

簡介

BUI 是用來快速構建界面交互的UI交互框架, 專一webapp開發, 開發者只需關注業務的開發, 界面的佈局及交互交給BUI, 開發出來的應用, 能夠嵌入平臺 ( Link, 微信, 小程序, 釘釘, 淘寶, 支付寶等 ), 亦能夠跟其它第三方平臺打包成獨立應用( Bingotouch , Cordova , Dcloud , APICloud , Appcan , 前海圓舟等), 最終能夠全跨平臺展現.web

用途

快速開發webapp應用
結合原平生臺打包獨立安裝應用
快速開發微信公衆號的應用
推廣類的製做 ……

特色

UI設計稿還原定製能力，移動端適配機制, 跟原生DPI縮放保持一致;小程序
快速上手，學習幾乎零成本;segmentfault
快速融入各類平臺，保持原平臺的交互操做;後端
簡單的路由，豐富的切換效果;api
模塊化開發，多人協做，按需加載;緩存
開發一次，安卓IOS適用;
兼容requirejs，seajs模塊;
能夠結合數據驅動

支持不一樣平臺打包

```
 Cordova
 DCloud
 APICloud
 AppCan
 前海圓舟
 ```
複製代碼

開發運行效率快 ……

適合

前端開發者後端開發者安卓開發者 IOS開發者

bui.js腳本庫

全局屬性切換原生：bui.isWebapp; 查看當前版本： bui.version 查看當前版本更新時間：bui.versionCode 查看當前bui.js 的平臺：bui.currentPlatform 更改控件的全局配置：bui.config.xxx = {}; xxx爲控件名
核心
- 模塊化：bui.loader 特色：
  1. 兼容 requirejs,seajs 模塊
  2. 每一個模塊都是一個閉包，默認不容許外部訪問
  3. 能夠拋出指定方法，用來操做當前模塊，給外部調用衰ꟐߐĀ臨
  4. 默認是整個回調執行，執行 router.refresh(); 時，要注意事件的處理，容易形成重複綁定；儘可能不使用這個方式；
  5. 支持自定義模塊名，正常不須要，路徑是最好的模塊名；
  6. 支持建立頁面模塊的生命週期；
  7. 支持模塊緩存
  8. ……
- 單頁路由：bui.router 特色
  1. 支持交互動畫
  2. 支持預加載
  3. 支持模板緩存
  4. 支持路由劫持
  5. 支持路由後退多層及後退指定模塊
  6. 支持局部加載及傳參
  7. 支持頁面生命週期
  8. 支持頁面傳參，保持多頁單頁一致接口
  9. 支持以模塊跳轉
  10. 支持移動端物理後退按鍵
  11. ……
- 數據驅動：bui.store 特色
  1. 基於Dom的數據驅動，經常使用於表單
  2. 參考vue的接口設計，上手無難度
  3. 支持公共數據貫穿整個應用全部頁面
  4. 支持私有數據，別的頁面沒法操控
  5. 結合模塊能夠實現數據互通，無需像vue同樣的組件樹，頁面跟模塊直接都是並行的
  6. ……
控件
- 控件基本用法：
- 控件分類：
- 擴展
方法
- 經常使用方法
- 混合方法