6.使用Gite管理项目
(1).本地管理
1.在项目目录中创建 .gitgnore 葫芦娃文件,并配置如下:
/node_modules /unpackage/dist
注意: 由于我们忽略了 unpackage目录中仅有的dist目录,因此默认情况下,unpackage目录不会被git追踪。
此时,为了让Git能够正常最总unpackage目录,按照管理额,我们可以在unpackage目录下创建一个教
.gitkeep
的文件进行占位置
2.打开终端,切换到项目根目录中,运行如下的命令,初始化本地Git仓库
shift+鼠标右键
git init
3.将所有的文件都加入到暂存区
git add .
4.本地提交更新
git commit -m "第一次初始化项目"
(2).远程管理
1.新建一个仓库
将本地的仓库和远程的仓库链接一下 git remote add origin git@gitee.com:lwt121788/uniapp-shop2.git 将本地仓库推送上远程仓库 git push -u origin "master"
(二)、配置页面
1.配置页面 - tabBar
(1).创建tabBar分支
运行如下的命令,基于master分支在本地创建tabBar分支,用来开发和tabBar相关的功能。
1.创建新分支 tabbar
在git中,可利用checkout命令转换分支,该命令的作用就是切换分支或恢复工作树文件,语法为“git checkout 分支名”;当参数设置为“-b”时,可以在新分支创建的同时切换分支,语法为“
git checkout -b 分支名
”。
在这里插入代码片
git checkout -b tabbar
2.查看分支
git branch
(2).创建tabBar页面
在 page
目录中,创建首页(home)、分类(sort)、购物车(cart)、我的(my)这四个tabBar页面。在HBuilderX中,可以通过如下的两个步骤,快速新建页面:
- 在
Page
目录上鼠标右键,选择新建页面 - 在弹出的窗口中,填写页面的
名称
、勾选scss模板之后,点击创建按钮。
创建完毕代码之后:
(3).配置tabBar效果
1.将姊俩目录下的 static 文件夹 拷贝一份,替换掉原来根目录中的 static 文件夹
就是拷贝静态资源-图片的
2.修改项目根目录中的 pages.json 配置文件,新增 tabBar的配置节点如下:
{ "tabBar": { // 1.设置选中文本的颜色 "selectedColor": "#C00000", // 2.设置tabBar的页面 "list": [{ "pagePath": "pages/home/home", "text": "首页", "iconPath": "static/tab_icons/home.png", "selectedIconPath": "static/tab_icons/home-active.png" }, { "pagePath": "pages/cate/cate", "text": "分类", "iconPath": "static/tab_icons/cate.png", "selectedIconPath": "static/tab_icons/cate-active.png" }, { "pagePath": "pages/cart/cart", "text": "购物车", "iconPath": "static/tab_icons/cart.png", "selectedIconPath": "static/tab_icons/cart-active.png" }, { "pagePath": "pages/my/my", "text": "我的", "iconPath": "static/tab_icons/my.png", "selectedIconPath": "static/tab_icons/my-active.png" } ] }, "pages": [{ "path": "pages/home/home", "style": { "navigationBarTitleText": "", "enablePullDownRefresh": false } }, { "path": "pages/cate/cate", "style": { "navigationBarTitleText": "", "enablePullDownRefresh": false } }, { "path": "pages/cart/cart", "style": { "navigationBarTitleText": "", "enablePullDownRefresh": false } }, { "path": "pages/my/my", "style": { "navigationBarTitleText": "", "enablePullDownRefresh": false } }], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", "app-plus": { "background": "#efeff4" } } }
3.我们运行的时候会发现 不会跳转到有tabBar的页面。原因是我们需要删除默认的index页面即可
3.Hbuilder启动一次之后就处于热重载效果,每次更新数据之后。我们只需要在微信小程序里面重新更新即可刷新数据
(4).修改导航条的样式效果
1.打开 page.json 这个全局的配置文件
2.修改 globstyle 节点如下
"globalStyle": { "navigationBarTextStyle": "white", // 文本 "navigationBarTitleText": "掌上周口", // 导航栏背景 "navigationBarBackgroundColor": "#C00000", "backgroundColor": "#FFFFFF", "app-plus": { "background": "#efeff4" } }
(5).分支的提交与合并
1.将本地的tabbar分支进行本地的commiit提交:(当前在分支)
git checkout 分支名 git add . git commit -m "完成了tabBar开发"
2.将本地的tabBar分支推送到远程仓库进行保存(当前在分支)
git push -u origin tabbar
3.将本地的tabbar分支合并到本地的master分支;(切换到主分支)
选择主分支 git checkout master 获取tabbar分支的内容 git merge tabbar 提交主分支 git push
4.删除本地的tabbar分支(删除某一个分支的时候,我们的位置不能站在这个分支上)
git branch -d tabbar
结果: