uni-app教程一目录
简介：
uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
官网：
创建第一个 uni-app项目
- 开发者需先下载安装 HBuilderX
下载地址: https://www.dcloud.io/hbuilderx.html - 在HBuilderX 点击工具栏里的文件 - >新建 - >项目：
- 选择uni-app，输入工程名，如：test，点击创建，即可成功创建uni-app
项目目录
创建页面
导入静态资源包（图片）
页面tabbar配置
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/news/news",
"style": {
"navigationBarTitleText": "动态"
}
},
{
"path": "pages/msg/msg",
"style": {
"navigationBarTitleText": "消息"
}
}
,{
"path" : "pages/my/my",
"style" : {
"navigationBarTitleText": "我的"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar":{
"color":"#333333",
"selectedColor":"#FC5C82",
"backgroundColor":"#FFFFFF",
"borderStyle":"black",
"list":[{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"static/tabbar/index.png",
"selectedIconPath":"static/tabbar/indexed.png"
},{
"pagePath":"pages/news/news",
"text":"动态",
"iconPath":"static/tabbar/news.png",
"selectedIconPath":"static/tabbar/newsed.png"
},{
"pagePath":"pages/msg/msg",
"text":"消息",
"iconPath":"static/tabbar/paper.png",
"selectedIconPath":"static/tabbar/papered.png"
},{
"pagePath":"pages/my/my",
"text":"我的",
"iconPath":"static/tabbar/home.png",
"selectedIconPath":"static/tabbar/homeed.png"
}]
}
}
运行
运行效果图
