uni-app项目启动-结构搭建④

八、项目启动-结构搭建

第一项目初始化

HBuilder 自动安装插件：https://ext.dcloud.net.cn/plugin?id=4882
上面这个插件依懒第三方插件：https://tortoisegit.org/download/

代码托管：https://gitcode.net/qq_41988669/project_leve1

第二关联去服务空间

1.新建-->回到项目中关联

2.db_init.json初始化数据库
 db_init.json定义了一个json格式，里面包含了表名、表数据、表索引等表的相关数据。

一、初始化数据库

1. 定义（选择）云服务空间

2. 初始化数据库

   1. 使用 db_init.json 文件

      参考文档：https://uniapp.dcloud.io/uniCloud/hellodb?id=db-init

   2. 初始化 db_init.json 文件使用课程里面提供的文件即可

      source 文件夹 => db._init.json 文件

      uniCloud 目录找到 database 目录 添加 db_init.json 文件

      

二、静态文件配置

1、static 文件导入

导入项目中需要的图片文件

文件在当天课程资料 source 文件夹下进行查找

source 文件目录：

• app_logo =>应用打包目录
• project_img => 工程所需图片文件

2、css 预编译处理器定义

1. uni.scss 文件定义公共变量及混编方法

2. 每个页面下直接进行样式方法及变量使用

   /* 多行注释 */
   @mixin flex(
     $level_style: space-between,
     $vertical_style: row,
     $isWrapper: nowrap
   ) {
     display: flex;
     align-items: center;
     justify-content: $level_style;
     flex-wrap: $isWrapper;
     flex-direction: $vertical_style;
   }
   
   // $base-color:#ff6600;
   /* 全局系统样式定义 */
   $base-color: #f25037;
   

3、page.json 文件-tabBar 创建

文档参考地址：https://uniapp.dcloud.net.cn/collocation/pages

在 pages 目录中，创建首页(home)、我的(self)、关注(follow)这 3 个 tabBar 页面。在 HBuilderX 中，可以通过如下的两个步骤，快速新建页面：

1. 在 pages 目录上鼠标右键，选择新建页面

2. 在弹出的窗口中，填写页面的名称、勾选 scss 模板之后，点击创建按钮。截图如下：

   

3. 配置 tabBar 效果，修改项目根目录中的 pages.json 配置文件，新增 tabBar 的配置节点如下：

   "tabBar": {
       "color": "#666",
       "selectedColor": "#f25037",
       "backgroundColor": "#fff",
       "list": [   // 显示页面信息
         {
           "pagePath": "pages/tabBar/index/index",   // 页面路径
           "iconPath": "static/home.png",   // 默认图片
           "selectedIconPath": "static/home-active.png",  // 选中图片
           "text": "首页"   // 文字描述信息
         },
         {
           "pagePath": "pages/tabBar/follow/follow",
           "iconPath": "static/follow.png",
           "selectedIconPath": "static/follow-active.png",
           "text": "关注"
         },
         {
           "pagePath": "pages/tabBar/self/self",
           "iconPath": "static/my.png",
           "selectedIconPath": "static/my-active.png",
           "text": "我的"
         }
       ]
     }
   

4. 删除默认 index 界面

   1. 在 HBuilderX 中，把 pages 目录下的 index首页文件夹 删除掉
   2. 同时，把 page.json 中记录的 index 首页 路径删除掉

5. 修改 globalStyle 样式

    "globalStyle": {
       "navigationBarTextStyle": "white",
       "navigationBarTitleText": "渡一教育",
       "navigationBarBackgroundColor": "#f25037",
       "backgroundColor": "#F8F8F8"
     },
   

4、页面定义

创建 tabBar 需要的页面文件

index 页面

follow 页面

self 页面

5、index（首页）界面制作

• 导航栏-navBar 组件实现

  同名组件名不需要使用 import 进行导入

  easyCom components/组件名/组件名.vue   // 特点：局部引入
  

  微信及 APP 进行状态栏高度进行占位处理

  方法参考地址：https://uniapp.dcloud.io/api/system/info?id=getsysteminfosync

  // 获取手机系统信息
  const info = uni.getSystemInfoSync();
  // 设置状态栏高度
  this.statusBarHeight = info.statusBarHeight;
  

  胶囊信息获取

  文档参考地址：https://uniapp.dcloud.io/api/ui/menuButton?id=getmenubuttonboundingclientrect

  需要进行条件编译实现

  胶囊
  

  // (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
  this.navBarHeight =
    menuButtonInfo.bottom -
    info.statusBarHeight +
    (menuButtonInfo.top - info.statusBarHeight);
  

  page.json 进行前景色设置

  "navigationBarTextStyle": "white"
  

• tabBar 组件实现

  配置 tabBar 效果，修改项目根目录中的 pages.json 配置文件，新增 tabBar 的配置节点如下：

 "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "渡一教育",
    "navigationBarBackgroundColor": "#f25037",
    "backgroundColor": "#F8F8F8"
  },
"tabBar": {
    "color": "#666",
    "selectedColor": "#f25037",
    "backgroundColor": "#fff",
    "list": [   // 显示页面信息
      {
        "pagePath": "pages/index/index",   // 页面路径
        "iconPath": "static/home.png",   // 默认图片
        "selectedIconPath": "static/home-active.png",  // 选中图片
        "text": "首页"   // 文字描述信息
      },
      {
        "pagePath": "pages/follow/follow",
        "iconPath": "static/follow.png",
        "selectedIconPath": "static/follow-active.png",
        "text": "关注"
      },
      {
        "pagePath": "pages/self/self",
        "iconPath": "static/my.png",
        "selectedIconPath": "static/my-active.png",
        "text": "我的"
      }
    ]
  }