uni-app是一個(gè)使用 Vue.js 開(kāi)發(fā)跨平臺(tái)應(yīng)用的前端框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可編譯到iOS、Android、H5、小程序等多個(gè)平臺(tái).
- uni-app在跨端數(shù)量、擴(kuò)展能力、性能體驗(yàn)、周邊生態(tài)、學(xué)習(xí)成本、開(kāi)發(fā)成本等6大關(guān)鍵指標(biāo)上擁有極強(qiáng)的競(jìng)爭(zhēng)優(yōu)勢(shì)。
- uni-app在跨平臺(tái)的過(guò)程中，不犧牲平臺(tái)特色，可優(yōu)雅的調(diào)用平臺(tái)專(zhuān)有能力，真正做到海納百川、各取所長(zhǎng)。
uni-app初步使用
-
在HBuilderX中創(chuàng)建一個(gè)新的項(xiàng)目
創(chuàng)建.png -
在pages目錄中添加頁(yè)面
頁(yè)面.png 在pages中添加一個(gè)界面，都需要在pages.json中添加，如下圖
{
"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁(yè)，參考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "主頁(yè)"
}
},
{
"path": "pages/ucenter/ucenter",
"style": {
"navigationBarTitleText": "我的"
}
},
{
"path": "pages/ucenter/setting",
"style": {
"navigationBarTitleText": "設(shè)置"
}
}
],
"tabBar":{
"color":"#000000",
"selectedColor":"#2F85FC",
"backgroundColor":"#FFFFFF",
"borderStyle":"black",
"list":[
{
"pagePath":"pages/index/index",
"iconPath":"static/home.png",
"selectedIconPath":"static/home-active.png",
"text":"主頁(yè)"
},
{
"pagePath":"pages/ucenter/ucenter",
"iconPath":"static/center.png",
"selectedIconPath":"static/center-active.png",
"text":"我的"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
-
效果圖，如下
page1.png
page2.png
page3.png
