域名如何购买_百度权重1_做推广的公司一般都叫什么_建立自己的网站平台

八、项目启动-结构搭建

第一项目初始化

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