微信小程序购物商城项目记录tabBar制作

　　头条创作挑战赛二、tabBar
　　2。1创建tabBar分支
　　运行如下命令，基于master分支在本地创建tabBar子分支，用来开发和tabBar相关的功能：gitcheckoutbtabbar2。2创建tabBar页面
　　在pages目录中，创建首页（home）、分类（cate）、购物车（cart）、我的（my）这4个tabBar页面。在HBuilderX中，可以通过如下的两个步骤，快速新建页面：在pages目录上鼠标右键，选择新建页面在弹出的窗口中，填写页面的名称、勾选scss模板之后，点击创建按钮。截图如下：
　　2。3配置tabBar效果准备tabbar的图标，放入static目录下修改项目根目录中pages。json配置文件，新增tabBar的配置节点如下：｛
　　tabBar：｛
　　selectedColor：C00000，
　　list：〔
　　｛
　　pagePath：pageshomehome，
　　text：首页，
　　iconPath：statictabiconshome。png，
　　selectedIconPath：statictabiconshomeactive。png
　　｝，
　　｛
　　pagePath：pagescatecate，
　　text：分类，
　　iconPath：statictabiconscate。png，
　　selectedIconPath：statictabiconscateactive。png
　　｝，
　　｛
　　pagePath：pagescartcart，
　　text：购物车，
　　iconPath：statictabiconscart。png，
　　selectedIconPath：statictabiconscartactive。png
　　｝，
　　｛
　　pagePath：pagesmymy，
　　text：我的，
　　iconPath：statictabiconsmy。png，
　　selectedIconPath：statictabiconsmyactive。png
　　｝
　　〕
　　｝
　　｝
　　测试效果如下：
　　2。4删除默认的index首页把pages目录下的index首页文件夹删除掉把page。json中记录的index首页路径删除掉为了防止小程序运行失败，在微信开发者工具中，手动删除pages目录下的index首页文件夹2。5修改导航条的样式效果打开pages。json全局配置文件修改globalStyle节点如下：｛
　　globalStyle：｛
　　navigationBarTextStyle：white，
　　navigationBarTitleText：优选商城，
　　navigationBarBackgroundColor：C00000，
　　backgroundColor：FFFFFF
　　｝
　　｝
　　测试效果如下：
　　2。6分支的提交与合并将本地的tabbar分支进行本地的commit提交：gitadd。
　　gitcommitm完成了tabBar的开发将本地的tabbar分支推送到远程仓库进行保存：gitpushuorigintabbar
　　将本地的tabbar分支合并到本地的master分支：gitcheckoutmaster
　　gitmergetabbar
　　删除本地的tabbar分支：gitbranchdtabbar