uni-app 是使用 Vue.js 開發跨平臺應用的前端框架，開發者編寫一套代碼，可編譯到iOS、Android、H5、小程序等多個平臺。相比原生小程序開發，APP兩端原生開發，學習開發成本更低，平臺自帶的組件豐富，運行體驗效果非常好，廣受開發者歡迎。
開始之前，開發者需先下載安裝如下工具：HBuilderX官方IDE下載地址：https://www.dcloud.io/hbuilderx.html
1、創建第一個 uni-app項目
在點擊工具欄里的文件->新建->項目：
選擇左邊uni-app項目，輸入項目名稱，如：test，選址文件路徑，使用默認模板，點擊創建，即可成功創建一個uni-app項目。
2、項目目錄介紹
新建uni-app項目成功后，項目目錄生成如下圖文件：
3、調試預覽
新建uni-app項目成功后，即可通過點擊HBuilderX工具右邊預覽按鈕在工具內預覽，可以通過預覽工具欄調試查看布局結構、樣式、console等
4、原生tabbar的創建和配置
打開pages.json文件，修改標題、增加頁面路由、增加tabBar, tabBar增加四個“首頁”，“分類”，“購物車”，“我的”。分別對應在pages目錄中創建四個頁面。代碼如下：
{ "pages": [ //pages數組中第一項表示應用啟動頁，參考：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、導入靜態資源包（圖片）
上面代碼塊應用到靜態資源圖片，需要把圖片放到static目錄中
6、測試項目建好，效果如下
案例源碼包下載 https://forum.shopwind.net/thread/422
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。