為什么使用BUI
1.bui webapp 可以嵌入小程序 釘釘 ios 安卓app
2.暫時(shí)沒有上傳語(yǔ)音 視頻的組件
官方解釋為 :
BUI 是用來(lái)快速構(gòu)建界面交互的UI框架, 專注webapp開發(fā), 開發(fā)者只需關(guān)注業(yè)務(wù)的開發(fā), 界面的布局及交互交給BUI, 開發(fā)出來(lái)的應(yīng)用, 可以嵌入平臺(tái) ( 微信, 小程序, 釘釘, 淘寶, 支付寶等 ), 亦可以跟其它第三方平臺(tái)打包成獨(dú)立應(yīng)用( Bingotouch , Cordova , Dcloud , APICloud , Appcan , 前海圓舟 等), 最終可以全跨平臺(tái)展示.
使用步驟
- 使用npm安裝buijs (腳手架可以快速搭建項(xiàng)目司训,替換模板擒权,新增模板頁(yè)面)
npm install -g buijs - 創(chuàng)建項(xiàng)目
buijs create demo -p dcloud
cd demo
npm install
npm run dev - 新增模板
buijs create -t main-tab
bui create -t page-login
命令 | 含義 |
---|---|
buijs -v |
查看當(dāng)前工具的版本 |
buijs -h |
命令幫助信息 |
buijs create |
在當(dāng)前目錄創(chuàng)建bui webapp默認(rèn)工程 |
buijs create [projectName] [version] [-t templateName] [-p platformName] |
創(chuàng)建工程,支持指定版本,指定模板吹由,指定平臺(tái)党涕,相同目錄下會(huì)覆蓋 |
buijs update |
在當(dāng)前項(xiàng)目更新bui為最新webapp版本计技,只修改bui.css妻导,bui.js不覆蓋項(xiàng)目其它內(nèi)容 |
buijs update [projectName] [version] [-p platformName] [-d] |
更新bui為某個(gè)版本,某個(gè)平臺(tái)欧引,-d更新為最新的工程模式(dev) |
buijs list |
顯示可用的版本 |
buijs list-template |
顯示可用的模板列表BUI模板圖片預(yù)覽 |
buijs list-platform |
顯示可用的平臺(tái)列表 |
buijs clear |
清除下載的模板緩存 |
4.編譯
npm run dev
- 發(fā)布apk 使用dcloud
打開hbuilder ,新建移動(dòng)app項(xiàng)目频伤,項(xiàng)目名bui-demo。
把dist目錄下的所有文件夾拷貝到該項(xiàng)目中芝此。
在項(xiàng)目名(bui-demo)右鍵選擇發(fā)行->發(fā)行為原生安裝包
Qs
默認(rèn)搭建的框架里面是使用了bui.js和zepo.js剂买,,但是貌似zpeto.js可以替換成Jquery.js癌蓖,替換后 如何使用?
如何嵌入小程序中婚肆?
使用rem開發(fā)移動(dòng)端 租副,可以自適應(yīng)
bui 1.5.X基于750x設(shè)計(jì)稿量取大小,1rem = 100px;即 如果是750px的效果圖 如果圖片高度是200px則是2rem较性;