一張腦圖看懂BUI Webapp移動快速開發框架【下】--快速入門指引

時間 2019-12-30

標籤一張看懂 bui webapp 移動快速開發框架入門指引欄目無線简体版

原文原文鏈接

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

大綱

在線查看大綱思路更佳清晰前端

1. 框架設計

框架介紹

簡介

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

用途

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

……web

特色

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

Cordova
DCloud
APICloud
AppCan
前海圓舟chrome

開發運行效率快

……npm

適合

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

2. 開發方式

支持傳統多頁開發json
- 優勢小程序
  1. 支持php，java等後端語言
  2. 與web開發保持一致，上手簡單
  3. 能夠結合 loader 模塊化開發
  4. 打包狀態，可使用原生路由跳轉
  5. ……
支持單頁路由模塊化開發(推薦)segmentfault
- 優勢後端
  1. 解決多人協做問題
  2. 解決多頁開發的問題
```
問題1：滑動列表到不少頁，進去詳情，回來之後頁面回到第一頁
問題2：模塊的訪問只能侷限於當前頁，沒法實現頁面之間互通
問題3：緩存問題，比方微信默認會有緩存靜態文件，那你列表進去詳情或者表單，處理之後想要後退刷新那是很困難的
……
```
  3. 頁面之間共享，能夠相互訪問
  4. 頁面切換動畫多以及能夠定製
  5. 頁面切換速度快，交互效果及體驗佳
  6. ……
- 注意：
  1. 單頁開發裏面的事件綁定，須要使用 router.$ 替換 $選擇器，這樣纔不會致使操做到其它頁面的相同選擇器。
    例如1： $("#id").on("click",function(){}) 改爲 router.$("#id").on("click",function(){})
    例如2： $("#id").height(300) 改爲 router.$("#id").height(300)
BUI+Hybrid = Hybrid App; 以上兩種開發方式均可以結合原平生臺打包成獨立應用。