uni-app教程一（项目创建、tabbar配置、运行）

简介：

uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

官网：

https://uniapp.dcloud.io/

创建第一个 uni-app项目

1. 开发者需先下载安装 HBuilderX
   下载地址: https://www.dcloud.io/hbuilderx.html
2. 在HBuilderX 点击工具栏里的文件 - >新建 - >项目：
   
3. 选择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"
  	}]
  }
}

运行

运行效果图