uni-app入门教程一
uni-app是一个使用Vue.js开发跨平台个人文库应用的前端框架,开发者编写一套代码
,可编译到的iOS,安卓,H5,小程序等多个平台。
uni-app 是继 mui 框架之后的一个跨多端的开发框架,目前支持 iOS Android 和
wx(微信小程序), 也就是说开发一套代码可以实现相应端的开发,
是基于Vue的一个很不错的开发框架,对于熟悉Vue和微信小程序的开发小伙伴来说学习成本几乎为零。
官网地址:
1.首先开发者需先下载安装 HBuilderX
2)选择uni-app,输入工程名,如:test,点击创建,即可成功创建uni-app
2.项目目录
3. 创建页面
4.页面及tabbar配置
{
"pages": [ //pages数组中第一项表示应用启动页,参考: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": "学员",
"iconPath": "static/indexNormal.png",
"selectedIconPath": "static/indexActive.png"
},
{
"pagePath": "pages/homework/homework",
"text": "作业",
"iconPath": "static/homeworkNormal.png",
"selectedIconPath": "static/homeworkActive.png"
},
{
"pagePath": "pages/personal/personal",
"text": "我的",
"iconPath": "static/personalNormal.png",
"selectedIconPath": "static/personalActive.png"
}
]
}
}