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

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

大綱

在線查看大綱

1. 框架設計

框架介紹

簡介

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

用途

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

……

特點

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

Cordova
DCloud
APICloud
AppCan
前海圓舟

1. 開發運行效率快

……

適合

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

2. 開發方式

1. 支持傳統多頁開發

   • 優點

     1. 支持php，java等後端語言
     2. 與web開發保持一致，上手簡單
     3. 可以結合 loader 模塊化開發
     4. 打包狀態，可以使用原生路由跳轉
     5. ……

2. 支持單頁路由模塊化開發(推薦)

   • 優點

     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)

3. BUI+Hybrid = Hybrid App; 以上兩種開發方式都可以結合原生平臺打包成獨立應用。

3. 設計稿還原方式

1. 設計稿轉換成750px寬度（1.5以下版本是540px）
2. 量取頁面的元素的大小,比如 寬100px高360px 那麼寫成 1rem, 3.6rem，精確到小數點後2位

4. 規範

• 目錄規範
• 頁面結構規範
• 樣式規範
• 開發規範
• 模塊化規範

5. 數據交互

• 數據請求
• 數據存儲

6. 頁面交互

特點：多頁單頁保持一致的API，如果某一需求無法實現，可以用最少的成本切換成另外一種開發模式

7. Dom操作能力

基於H5原生Dom操作,Zepto或jQuery，跟Web開發保持一致

8. 調試方式

• chrome PC調試

• 移動端調試

  注意：移動端調試必須使用 npm run dev 工程，並且配置了 app.json 才行，又或者接口自行解決跨域問題

• debugtool 安裝在手機調試

  適用於Bingotouch, Link, cordova 平臺

• 微信調試

9. 打包及原生能力

來源於打包平臺或運行平臺環境，需要引入對應的腳本

• Bingotouch
• Link
• Dcloud
• APICloud
• Appcan
• 釘釘
• 微信

……

打包注意事項

1. bui.isWebapp = false 時
2. 請確保你的 bui.js 是對應的原生平臺版本 bui.currentPlatform 可以查看， webapp 沒有 false 狀態；
3. BUI 1.5.1 以上版本，只切換多頁開發的路由爲原生
4. BUI 1.5.1 以下版本，切換多頁開發的路由爲原生，並且會影響數據請求，上傳等切換爲原生方法

10. 擴展能力

1. 內部擴展 bui.extend
2. 支持第三方相互配合

在線查看腦圖

在線查看腦圖-BUI入門指引