uni-app 是使用 Vue.js 開發(fā)跨平臺應(yīng)用的前端框架，開發(fā)者編寫一套代碼，可編譯到iOS、Android、H5、小程序等多個平臺。相比原生小程序開發(fā)，APP兩端原生開發(fā)，學(xué)習(xí)開發(fā)成本更低，平臺自帶的組件豐富，運行體驗效果非常好，廣受開發(fā)者歡迎。
開始之前，開發(fā)者需先下載安裝如下工具：HBuilderX官方IDE下載地址：https://www.dcloud.io/hbuilderx.html
1、創(chuàng)建第一個 uni-app項目
在點擊工具欄里的文件->新建->項目：
選擇左邊uni-app項目，輸入項目名稱，如：test，選址文件路徑，使用默認(rèn)模板，點擊創(chuàng)建，即可成功創(chuàng)建一個uni-app項目。
2、項目目錄介紹
新建uni-app項目成功后，項目目錄生成如下圖文件：
3、調(diào)試預(yù)覽
新建uni-app項目成功后，即可通過點擊HBuilderX工具右邊預(yù)覽按鈕在工具內(nèi)預(yù)覽，可以通過預(yù)覽工具欄調(diào)試查看布局結(jié)構(gòu)、樣式、console等
4、原生tabbar的創(chuàng)建和配置
打開pages.json文件，修改標(biāo)題、增加頁面路由、增加tabBar, tabBar增加四個“首頁”，“分類”，“購物車”，“我的”。分別對應(yīng)在pages目錄中創(chuàng)建四個頁面。代碼如下：
{ "pages": [ //pages數(shù)組中第一項表示應(yīng)用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "ShopWind多商戶商城" } }, { "path": "pages/user/index", "style": { "navigationBarTitleText": "我的" } }, { "path": "pages/cart/index", "style": { "navigationBarTitleText": "購物車" } }, { "path": "pages/category/index", "style": { "navigationBarTitleText": "商品分類" } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" }, "tabBar": { "color": "#333333", "selectedColor": "#fc2b34", "borderStyle": "white", "backgroundColor": "#FFFFFF", "position": "bottom", "list": [{ "pagePath": "pages/index/index", "iconPath": "static/images/home.png", "selectedIconPath": "static/images/home-hover.png", "text": "首頁" }, { "pagePath": "pages/category/index", "iconPath": "static/images/gcategory.png", "selectedIconPath": "static/images/gcategory-hover.png", "text": "分類" }, { "pagePath": "pages/cart/index", "iconPath": "static/images/cart.png", "selectedIconPath": "static/images/cart-hover.png", "text": "購物車" }, { "pagePath": "pages/user/index", "iconPath": "static/images/my.png", "selectedIconPath": "static/images/my-hover.png", "text": "我的" } ] }}
5、導(dǎo)入靜態(tài)資源包（圖片）
上面代碼塊應(yīng)用到靜態(tài)資源圖片，需要把圖片放到static目錄中
6、測試項目建好，效果如下
案例源碼包下載 https://forum.shopwind.net/thread/422
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報，一經(jīng)查實，本站將立刻刪除。