项目启动-结构搭建

一、初始化数据库

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": "我的"
      }
    ]
  }