本文主要是介绍开源项目beautiful（1）项目搭建，tabBar使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
学习了前面6节uni-app的基础内容，接下来正式开发一个完整的项目：beautiful
一个提供精美图片展示，图片和视频下载的微信小程序
稍后会将项目的git链接放上来
1.新建项目
创建项目：
cd D:\work\demo\vueDemo
vue create -p dcloudio/uni-preset-vue beautiful
进入项目目录，安装sass依赖
cd beautiful
npm i sass-loader node-sass
连接微信小程序
npm run dev:mp-weixin
然后打开微信开发工具导入项目即可
2.tabBar
{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/home1/index","style": {"navigationBarTitleText": "首页"}},{"path": "pages/home2/index","style": {"navigationBarTitleText": "横屏"}},{"path": "pages/home3/index","style": {"navigationBarTitleText": "视频"}},{"path": "pages/home4/index","style": {"navigationBarTitleText": "搜索"}},{"path": "pages/home5/index","style": {"navigationBarTitleText": "我的"}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"},"tabBar":{"color":"#8a8a8a","selectedColor":"#d4237a","backgroundcolor":"#fff","position":"bottom","borderStyle":"black","list":[{"pagePath":"pages/home1/index","text":"首页","iconPath":"./static/icon/tab_1_n.png","selectedIconPath":"./static/icon/tab_1_s.png"},{"pagePath":"pages/home2/index","text":"横屏","iconPath":"./static/icon/tab_2_n.png","selectedIconPath":"./static/icon/tab_2_s.png"},{"pagePath":"pages/home3/index","text":"视频","iconPath":"./static/icon/tab_3_n.png","selectedIconPath":"./static/icon/tab_3_s.png"},{"pagePath":"pages/home4/index","text":"搜索","iconPath":"./static/icon/tab_4_n.png","selectedIconPath":"./static/icon/tab_4_s.png"},{"pagePath":"pages/home5/index","text":"我的","iconPath":"./static/icon/tab_2_n.png","selectedIconPath":"./static/icon/tab_2_s.png"}]}
}
这篇关于开源项目beautiful（1）项目搭建，tabBar使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
