uni-app 是使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到 iOS、Android、H5、小程序等多个平台。相比原生小程序开发，APP 两端原生开发，学习开发成本更低，平台自带的组件丰富，运行体验效果非常好，广受开发者欢迎。
开始之前，开发者需先下载安装如下工具：HBuilderX：官方 IDE 下载地址
1、创建第一个 uni-app 项目
在点击工具栏里的文件 -> 新建 -> 项目：
选择左边 uni-app 项目，输入项目名称，如：test，选址文件路径，使用默认模板，点击创建，即可成功创建一个 uni-app 项目。
2、项目目录介绍
新建 uni-app 项目成功后，项目目录生成如下图文件：
3、调试预览
新建 uni-app 项目成功后，即可通过点击 HBuilderX 工具右边预览按钮在工具内预览，可以通过预览工具栏调试查看布局结构、样式、console 等
4、原生 tabbar 的创建和配置
打开 pages.json 文件，修改标题、增加页面路由、增加 tabBar, tabBar 增加四个 “首页”，“分类”，“购物车”，“我的”。分别对应在 pages 目录中创建四个页面。代码如下：
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "ShopWind多商户商城"
}
}, {
"path": "pages/user/index",
"style": {
"navigationBarTitleText": "我的"
}
}, {
"path": "pages/cart/index",
"style": {
"navigationBarTitleText": "购物车"
}
}, {
"path": "pages/category/index",
"style": {
"navigationBarTitleText": "商品分类"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#333333",
"selectedColor": "#fc2b34",
"borderStyle": "white",
"backgroundColor": "#FFFFFF",
"position": "bottom",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/images/home.png",
"selectedIconPath": "static/images/home-hover.png",
"text": "首页"
},
{
"pagePath": "pages/category/index",
"iconPath": "static/images/gcategory.png",
"selectedIconPath": "static/images/gcategory-hover.png",
"text": "分类"
},
{
"pagePath": "pages/cart/index",
"iconPath": "static/images/cart.png",
"selectedIconPath": "static/images/cart-hover.png",
"text": "购物车"
},
{
"pagePath": "pages/user/index",
"iconPath": "static/images/my.png",
"selectedIconPath": "static/images/my-hover.png",
"text": "我的"
}
]
}
}
复制代码5、导入静态资源包（图片）
上面代码块应用到静态资源图片，需要把图片放到 static 目录中