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

時間 2019-12-30

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

原文原文鏈接

前言

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

進入官網css

BUI 新版預覽

在線預覽html

須要使用Chrome開啓設備模擬，效果更佳。前端

在線腦圖查看

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

大綱

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

1.框架設計

框架介紹

簡介

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

用途

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

……segmentfault

特色

UI設計稿還原定製能力，移動端適配機制, 跟原生DPI縮放保持一致;
快速上手，學習幾乎零成本;
快速融入各類平臺，保持原平臺的交互操做;
簡單的路由，豐富的切換效果;
模塊化開發，多人協做，按需加載;
開發一次，安卓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. ……
控件
- 控件基本用法：
- 控件分類：
- 擴展
方法
- 經常使用方法
- 混合方法