uni-app是一個(gè)使用Vue.js開發(fā)跨平臺(tái)個(gè)人文庫應(yīng)用的前端框架，開發(fā)者編寫一套代碼，可編譯到的iOS，安卓，H5，小程序等多個(gè)平臺(tái)。
1.首先開發(fā)者需先下載安裝 HBuilderX
1）在HBuilderX 點(diǎn)擊工具欄里的文件 - >新建 - >項(xiàng)目：
image.png
2）選擇uni-app，輸入工程名，如：test，點(diǎn)擊創(chuàng)建，即可成功創(chuàng)建uni-app
image.png
2.項(xiàng)目目錄
image.png
3. 創(chuàng)建頁面
image.png
4.頁面及tabbar配置
{
"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁，參考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path": "pages/homework/homework",
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path": "pages/personal/personal",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#C3B8B4",
"selectedColor": "#F76605",
"borderStyle": "white",
"backgroundColor": "#fff",
"list": [
{
"pagePath": "pages/index/index",
"text": "學(xué)員",
"iconPath": "static/indexNormal.png",
"selectedIconPath": "static/indexActive.png"
},
{
"pagePath": "pages/homework/homework",
"text": "作業(yè)",
"iconPath": "static/homeworkNormal.png",
"selectedIconPath": "static/homeworkActive.png"
},
{
"pagePath": "pages/personal/personal",
"text": "我的",
"iconPath": "static/personalNormal.png",
"selectedIconPath": "static/personalActive.png"
}
]
}
}
5.運(yùn)行
image.png
6.運(yùn)行效果圖
image.png
