初識(shí)uni-app

官方文檔:https://uniapp.dcloud.io/README

什么是uni-app

使用 Vue.js 開(kāi)發(fā) 跨平臺(tái) 應(yīng)用的前端框架
編寫一套代碼,可編譯到多個(gè)平臺(tái)【iOS,安卓,小程序(微信,支付寶,百度),H5】

快速上手

方式一:通過(guò) HBuilderX 創(chuàng)建項(xiàng)目(https://uniapp.dcloud.io/quickstart?id=%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE
方式二:通過(guò) vue-cli 命令行創(chuàng)建項(xiàng)目(https://uniapp.dcloud.io/quickstart?id=%E9%80%9A%E8%BF%87vue-cli%E5%91%BD%E4%BB%A4%E8%A1%8C
注:cli腳手架僅支持編譯為H5網(wǎng)站、支付寶小程序、百度小程序,若需要運(yùn)行到微信小程序或APP,則將根目錄下的src文件夾拖至HBuilderX中,點(diǎn)擊 '運(yùn)行' 菜單執(zhí)行

開(kāi)發(fā)規(guī)范

頁(yè)面文件 遵循Vue單文件組件規(guī)范(https://vue-loader.vuejs.org/zh/spec.html#%E7%AE%80%E4%BB%8B
組件標(biāo)簽 靠近微信小程序規(guī)范(不能使用標(biāo)準(zhǔn)的HTML標(biāo)簽,也不能用js對(duì)dom進(jìn)行操作)(https://uniapp.dcloud.io/component/README
接口能力 靠近微信小程序規(guī)范,需要將wx前綴改為uni(https://uniapp.dcloud.io/api/README
數(shù)據(jù)綁定、事件處理 靠近Vue.js規(guī)范,同時(shí)補(bǔ)充了App及頁(yè)面聲明周期
建議使用 flex 布局,兼容多端
樣式:upx尺寸單位,設(shè)計(jì)師采用iphone6(375px)作為設(shè)計(jì)稿,uni-app規(guī)定屏幕基準(zhǔn)寬度750upx
???注:動(dòng)態(tài)綁定style不支持直接使用upx,使用uni.upx2px(Number)進(jìn)行轉(zhuǎn)換
???https://uniapp.dcloud.io/frame?id=%E9%A1%B5%E9%9D%A2%E6%A0%B7%E5%BC%8F%E4%B8%8E%E5%B8%83%E5%B1%80

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容