uni-app是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台.
- uni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势。
- uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。
uni-app初步使用
-
在HBuilderX中创建一个新的项目
创建.png -
在pages目录中添加页面
页面.png 在pages中添加一个界面，都需要在pages.json中添加，如下图
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "主页"
}
},
{
"path": "pages/ucenter/ucenter",
"style": {
"navigationBarTitleText": "我的"
}
},
{
"path": "pages/ucenter/setting",
"style": {
"navigationBarTitleText": "设置"
}
}
],
"tabBar":{
"color":"#000000",
"selectedColor":"#2F85FC",
"backgroundColor":"#FFFFFF",
"borderStyle":"black",
"list":[
{
"pagePath":"pages/index/index",
"iconPath":"static/home.png",
"selectedIconPath":"static/home-active.png",
"text":"主页"
},
{
"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
