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

wuyumin 發布于2019-08-26 10:16 / 411人閱讀

摘要：后續我們還會增加一些實戰類的移動開發案例，歡迎關注專欄。進入官網新版預覽在線預覽需要使用開啟設備模擬，效果更佳。

前言

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

進入官網

BUI 新版預覽

在線預覽

需要使用Chrome開啟設備模擬，效果更佳。

在線腦圖查看

圖片無法看完，請查看在線腦圖

大綱

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

1.框架設計 框架介紹

簡介

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

用途

快速開發webapp應用

結合原生平臺打包獨立安裝應用

快速開發微信公眾號的應用

推廣類的制作

……

特點

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
特點：

兼容 requirejs,seajs 模塊

每個模塊都是一個閉包，默認不允許外部訪問

可以拋出指定方法，用來操作當前模塊，給外部調用衰??ā臨

默認是整個回調執行，執行 router.refresh(); 時，要注意事件的處理，容易造成重復綁定；盡量不使用這個方式；

支持自定義模塊名，正常不需要，路徑是最好的模塊名；

支持創建頁面模塊的生命周期；

支持模塊緩存

……

單頁路由：bui.router
特點

支持交互動畫

支持預加載

支持模板緩存

支持路由劫持

支持路由后退多層及后退指定模塊

支持局部加載及傳參

支持頁面生命周期

支持頁面傳參，保持多頁單頁一致接口

支持以模塊跳轉

支持移動端物理后退按鍵

……

數據驅動：bui.store
特點

基于Dom的數據驅動，常用于表單

參考vue的接口設計，上手無難度

支持公共數據貫穿整個應用所有頁面

支持私有數據，別的頁面無法操控

結合模塊可以實現數據互通，無需像vue一樣的組件樹，頁面跟模塊直接都是并行的

……

控件

控件基本用法：

控件分類：

擴展

方法

常用方法

混合方法

bui.css樣式庫

全局樣式

排版樣式

布局樣式

定位樣式

常見樣式

2.框架演示

在線演示

控件演示

常用UI演示

3.提高效率工具

BUIFast 編輯器插件

buijs cli工程構建工具

Demo源碼查看器

4.免費模板案例資源

免費案例

免費模板

免費插件

下載中心

5.文檔

API 文檔查閱
每個控件只保留了最基本的用法書寫，更多需求需要查看對應的參數

入門文檔
從環境搭建開始一步步學習，入門很簡單

組件文檔
每個控件的示例源碼及說明

BUI 專欄
項目案例經驗與技巧類的文章，歡迎投稿

6.入門視頻

基于較早期的版本錄制的視頻，控件的用法，布局等，適用于多頁開發

7.幫助中心

搜索問題關鍵字，在官方文檔有常見問題的處理

搜索已解決的問題有沒有一樣的

整理自己的問題結合代碼配圖反饋

加入Q群與開發者一起交流，只能加1個
1群：691560280【滿】
2群：4170980

下一篇

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

GPU云服務器云服務器一張圖看懂區塊鏈 java快速開發框架 android快速開發框架移動前端開發框架

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/105887.html

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

摘要：例如改成例如改成以上兩種開發方式都可以結合原生平臺打包成獨立應用。繼上一篇一張腦圖看懂BUI Webapp移動快速開發框架【上】--框架與工具、資源大綱在線查看大綱思路更佳清晰 1. 框架設計框架介紹簡介 BUI 是用來快速構建界面交互的UI交互框架, 專注webapp開發, 開發者只需關注業務的開發, 界面的布局及交互交給BUI, 開發出來的應用, 可以嵌入平臺 ( Li...

hzx 2019-08-26 10:16 評論0 收藏0
好快, 1分鐘開發好一個下拉刷新,滾動加載列表

摘要：但本活又己交給音長爭標識我。八說前它特用達圓是路看江才。開次他爭從點軍容給油很出。成育料技所心并精北酸間辦元。除現七團一歷積動兩水礦花始線黨黨她。好快, 1分鐘寫好下拉刷新,滾動加載自動分頁列表前言歡迎關注BUI Webapp專欄或者 bui神速微信公眾號. 以往文章: 2019開發最快的Webapp框架--BUI交互框架微信Webapp開發的各種變態路由需求及解決辦法! ...

wemall 2019-08-30 15:56 評論0 收藏0
好快, 1分鐘開發好一個下拉刷新,滾動加載列表

摘要：但本活又己交給音長爭標識我。八說前它特用達圓是路看江才。開次他爭從點軍容給油很出。成育料技所心并精北酸間辦元。除現七團一歷積動兩水礦花始線黨黨她。好快, 1分鐘寫好下拉刷新,滾動加載自動分頁列表前言歡迎關注BUI Webapp專欄或者 bui神速微信公眾號. 以往文章: 2019開發最快的Webapp框架--BUI交互框架微信Webapp開發的各種變態路由需求及解決辦法! ...

468122151 2019-08-30 15:44 評論0 收藏0
微信Webapp開發的各種變態路由需求及解決辦法!

摘要：前言最近在使用開發的一個小商城項目在微信上遇到一些坑及變態需求層層深入整理一下給后來人參考一定有你還不知道的調試緩存問題描述微信打開的頁面默認是會緩存的這是為了加載更快本來是好事但對于用來調試的我們就比較痛苦了每每更改一些刷新以后怎么樣都去前言最近在使用BUI Webapp開發的一個小商城項目在微信上遇到一些坑及變態需求, 層層深入, 整理一下給后來人參考. 一定有你還不知道的! ...

laoLiueizo 2019-08-22 18:31 評論0 收藏0
webapp結合Dcloud平臺打包圖文教程

摘要：前言最近一直有的開發者在問如何打包這本身是屬于第三方平臺的事既然有開發者在問那我們針對這個問題也想對的打包做個總結本文適用于任何的打包如果你是使用開發的那會更加簡單最后會有不同平臺的打包效果對比可以下載安裝測試的特點想了解更多可以去官網看關前言最近一直有BUI Webapp的開發者在問, webapp如何打包? 這本身是屬于第三方平臺的事, 既然有開發者在問, 那我們針對這個問題,...

Sunxb 2019-08-23 10:44 評論0 收藏0