119.【Uniapp】(二)

简介: 119.【Uniapp】

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中,可以通过如下的两个步骤,快速新建页面:

  1. Page目录上鼠标右键,选择新建页面
  2. 在弹出的窗口中,填写页面的名称、勾选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

结果:

相关文章
|
JavaScript 小程序 API
119.【Uniapp】(三)
119.【Uniapp】
110 0
|
小程序
|
开发框架 小程序 JavaScript
|
小程序 计算机视觉
UNIAPP微信小程序使用Echarts
UNIAPP微信小程序使用Echarts
1738 0
|
5月前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的云匹面粉直供微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的云匹面粉直供微信小程序的详细设计和实现
20 0

相关实验场景

更多