uni开发app步骤,uni-app ui框架
Uni-app是一个使用Vue.js开发跨平台应用的前端框架，开发者编写一组代码，可以编译到iOS、Android、H5、小程序等平台。相比原生小程序开发，app两端都是原生开发，学习开发成本更低，平台组件丰富，运行体验效果非常好，广受开发者欢迎。
开始之前，开发者需要下载安装以下工具：HBuilderX:官方IDE下载地址。
1.创建第一个uni-app项目。
单击工具栏中的文件-新建-项目：
选择左侧的uni-app项目，输入项目名称，如：test，location文件路径，使用默认模板，点击创建，成功创建一个uni-app项目。
UNI-APP开发(仿饿)开发课程：进入学习
2.项目目录介绍
新的uni-app项目成功后，项目目录会生成如下图文件：
3.调试预览
新建的uni-app项目成功后，可以通过点击HBuilderX工具右侧的预览按钮，在工具中进行预览。可以调试和查看布局结构、样式、控制台等。通过预览工具栏。
4、原生tabbar的创建和配置
打开pages.json文件，修改标题，添加页面路由，添加tabBar，tabBar添加了四个“首页”，“类别”，“购物车”，“我的”。在pages目录中创建四个页面。代码如下：
{
pages :[//pages数组中的第一项表示应用程序的启动页面，引用：https://uniapp.dcloud.io/collocation/pages.
{
路径:页面/索引/索引，
样式:{
导航栏标题文本: Shopwind多商户商城
}
}, {
路径:页面/用户/索引，
样式:{
NavigationBarTitleText: My
}
}, {
路径:页面/购物车/索引，
样式:{
NavigationBarTitleText :购物车
}
}, {
路径:页面/类别/索引，
样式:{
NavigationBarTitleText :商品分类
}
}
],
globalStyle: {
navigationBarTextStyle :黑色，
navigationBarTitleText :单一应用，
navigationBarBackgroundColor : # f8f8f 8 ，
backgroundColor: #F8F8F8
},
tabBar: {
颜色: #333333 ，
selectedColor: #fc2b34 ，
边框样式:白色，
backgroundColor: #FFFFFF ，
位置:底部，
列表:[{
页面路径:页面/索引/索引，
iconPath : static/images/home . png ，
selectedIconPath : static/images/home-hover . png ，
文本:主页
},
{
pagePath :页面/类别/索引，
iconPath : static/images/gcategory . png ，
selectedIconPath : static/images/gcategory-hover . png ，
文本:分类
},
{
页面路径:页面/购物车/索引，
iconPath : static/images/cart . png ，
selectedIconPath : static/images/cart-hover . png ，
文本:购物车
},
{
页面路径:页面/用户/索引，
iconPath : static/images/my . png ，
selectedIconPath : static/images/my-hover . png ，
文本:我的
}
]
}
}
5、导入静态资源包（图片）
以上代码块应用于静态资源图片，图片需要放在静态目录中。
6、测试项目建好，效果如下
资源包下载
以上是对uni-app的介绍：项目创建和原生tabbar配置的细节。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。