資訊專欄INFORMATION COLUMN
摘要：例如改成例如改成以上兩種開發(fā)方式都可以結(jié)合原生平臺打包成獨立應(yīng)用。
繼上一篇一張腦圖看懂BUI Webapp移動快速開發(fā)框架【上】--框架與工具、資源
大綱在線查看大綱 思路更佳清晰
1. 框架設(shè)計 框架介紹 簡介BUI 是用來快速構(gòu)建界面交互的UI交互框架, 專注webapp開發(fā), 開發(fā)者只需關(guān)注業(yè)務(wù)的開發(fā), 界面的布局及交互交給BUI, 開發(fā)出來的應(yīng)用, 可以嵌入平臺 ( Link, 微信, 小程序, 釘釘, 淘寶, 支付寶等 ), 亦可以跟其它第三方平臺打包成獨立應(yīng)用( Bingotouch , Cordova , Dcloud , APICloud , Appcan , 前海圓舟 等), 最終可以全跨平臺展示.
用途快速開發(fā)webapp應(yīng)用
結(jié)合原生平臺打包獨立安裝應(yīng)用
快速開發(fā)微信公眾號的應(yīng)用
推廣類的制作
……
特點UI設(shè)計稿還原定制能力，移動端適配機(jī)制, 跟原生DPI縮放保持一致;
快速上手，學(xué)習(xí)幾乎零成本;
快速融入各種平臺，保持原平臺的交互操作;
簡單的路由，豐富的切換效果;
模塊化開發(fā)，多人協(xié)作，按需加載;
開發(fā)一次，安卓IOS適用;
兼容requirejs，seajs模塊;
可以結(jié)合數(shù)據(jù)驅(qū)動
支持不同平臺打包
Cordova
DCloud
APICloud
AppCan
前海圓舟
開發(fā)運行效率快
……
適合前端開發(fā)者
后端開發(fā)者
安卓開發(fā)者
IOS開發(fā)者
2. 開發(fā)方式
支持傳統(tǒng)多頁開發(fā)
優(yōu)點
支持php，java等后端語言
與web開發(fā)保持一致，上手簡單
可以結(jié)合 loader 模塊化開發(fā)
打包狀態(tài)，可以使用原生路由跳轉(zhuǎn)
……
支持單頁路由模塊化開發(fā)(推薦)
優(yōu)點
解決多人協(xié)作問題
解決多頁開發(fā)的問題
問題1：滑動列表到很多頁，進(jìn)去詳情，回來以后頁面回到第一頁 問題2：模塊的訪問只能局限于當(dāng)前頁，無法實現(xiàn)頁面之間互通 問題3：緩存問題，比方微信默認(rèn)會有緩存靜態(tài)文件，那你列表進(jìn)去詳情或者表單，處理以后想要后退刷新那是很困難的 ……
頁面之間共享，可以相互訪問
頁面切換動畫多以及可以定制
頁面切換速度快，交互效果及體驗佳
……
注意：
單頁開發(fā)里面的事件綁定，需要使用 router.$ 替換 $選擇器，這樣才不會導(dǎo)致操作到其它頁面的相同選擇器。
例如1： $("#id").on("click",function(){}) 改成 router.$("#id").on("click",function(){})
例如2： $("#id").height(300) 改成 router.$("#id").height(300)
BUI+Hybrid = Hybrid App; 以上兩種開發(fā)方式都可以結(jié)合原生平臺打包成獨立應(yīng)用。
3. 設(shè)計稿還原方式設(shè)計稿轉(zhuǎn)換成750px寬度（1.5以下版本是540px）
量取頁面的元素的大小,比如 寬100px高360px 那么寫成 1rem, 3.6rem，精確到小數(shù)點后2位
4. 規(guī)范目錄規(guī)范
頁面結(jié)構(gòu)規(guī)范
樣式規(guī)范
開發(fā)規(guī)范
模塊化規(guī)范
5. 數(shù)據(jù)交互數(shù)據(jù)請求
數(shù)據(jù)存儲
6. 頁面交互特點：多頁單頁保持一致的API，如果某一需求無法實現(xiàn)，可以用最少的成本切換成另外一種開發(fā)模式7. Dom操作能力
基于H5原生Dom操作,Zepto或jQuery，跟Web開發(fā)保持一致8. 調(diào)試方式
chrome PC調(diào)試
移動端調(diào)試
注意：移動端調(diào)試必須使用 npm run dev 工程，并且配置了 app.json 才行，又或者接口自行解決跨域問題
debugtool 安裝在手機(jī)調(diào)試
適用于Bingotouch, Link, cordova 平臺
微信調(diào)試
9. 打包及原生能力來源于打包平臺或運行平臺環(huán)境，需要引入對應(yīng)的腳本
Bingotouch
Link
Dcloud
APICloud
Appcan
釘釘
微信
……
打包注意事項
bui.isWebapp = false 時
請確保你的 bui.js 是對應(yīng)的原生平臺版本 bui.currentPlatform 可以查看， webapp 沒有 false 狀態(tài)；
BUI 1.5.1 以上版本，只切換多頁開發(fā)的路由為原生
BUI 1.5.1 以下版本，切換多頁開發(fā)的路由為原生，并且會影響數(shù)據(jù)請求，上傳等切換為原生方法
10. 擴(kuò)展能力內(nèi)部擴(kuò)展 bui.extend
支持第三方相互配合
在線查看腦圖在線查看腦圖-BUI入門指引
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105883.html
摘要：后續(xù)我們還會增加一些實戰(zhàn)類的移動開發(fā)案例，歡迎關(guān)注專欄。進(jìn)入官網(wǎng)新版預(yù)覽在線預(yù)覽需要使用開啟設(shè)備模擬，效果更佳。 前言 之前寫過一篇 2018開發(fā)最快的Webapp框架--BUI交互框架 ，如果你還沒看過，可以簡單看一下，主要介紹了BUI的基本功能，有多少控件，以及實現(xiàn)的思路，BUI 1.5版本以后變化很大，統(tǒng)一新的風(fēng)格，新的規(guī)范750，新增基于Dom的數(shù)據(jù)驅(qū)動，完善了頁面的生命周期等...
摘要：但本活又己交給音長爭標(biāo)識我。八說前它特用達(dá)圓是路看江才。開次他爭從點軍容給油很出。成育料技所心并精北酸間辦元。除現(xiàn)七團(tuán)一歷積動兩水礦花始線黨黨她。 好快, 1分鐘寫好下拉刷新,滾動加載自動分頁列表 前言 歡迎關(guān)注BUI Webapp專欄 或者 bui神速微信公眾號. 以往文章: 2019開發(fā)最快的Webapp框架--BUI交互框架 微信Webapp開發(fā)的各種變態(tài)路由需求及解決辦法! ...
摘要：但本活又己交給音長爭標(biāo)識我。八說前它特用達(dá)圓是路看江才。開次他爭從點軍容給油很出。成育料技所心并精北酸間辦元。除現(xiàn)七團(tuán)一歷積動兩水礦花始線黨黨她。 好快, 1分鐘寫好下拉刷新,滾動加載自動分頁列表 前言 歡迎關(guān)注BUI Webapp專欄 或者 bui神速微信公眾號. 以往文章: 2019開發(fā)最快的Webapp框架--BUI交互框架 微信Webapp開發(fā)的各種變態(tài)路由需求及解決辦法! ...
摘要：前言開發(fā)定制從未如此簡單該文章發(fā)表在歡迎轉(zhuǎn)載在線閱讀簡介框架是一個快速構(gòu)建界面交互的框架高保真還原設(shè)計稿拿來即用開發(fā)者只需關(guān)注業(yè)務(wù)的開發(fā)界面的布局及交互交給最終開發(fā)出來的應(yīng)用可以嵌入平臺微信釘釘淘寶支付寶等亦可以跟其它第三方平臺打包成獨立應(yīng) 前言 開發(fā)定制 Webapp, HybirdApp 從未如此簡單! 該文章發(fā)表在Github,歡迎轉(zhuǎn)載. 在線閱讀 簡介 BUI Webapp框...
閱讀 1641·2021-09-02 09:55
閱讀 1115·2019-08-30 13:19
閱讀 1403·2019-08-26 13:51
閱讀 1453·2019-08-26 13:49
閱讀 2383·2019-08-26 12:13
閱讀 462·2019-08-26 11:52
閱讀 1909·2019-08-26 10:58
閱讀 3090·2019-08-26 10:19
