您的位置:首页 > 游戏 > 手游 > 域名如何购买_百度权重1_做推广的公司一般都叫什么_建立自己的网站平台

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

2024/12/8 4:01:19 来源:https://blog.csdn.net/qq_41988669/article/details/143691074  浏览:    关键词:域名如何购买_百度权重1_做推广的公司一般都叫什么_建立自己的网站平台
域名如何购买_百度权重1_做推广的公司一般都叫什么_建立自己的网站平台

文章目录

    • 八、项目启动-结构搭建
      • 第一项目初始化
      • 第二关联去服务空间
      • 一、初始化数据库
      • 二、静态文件配置
        • 1、static 文件导入
        • 2、css 预编译处理器定义
        • 3、page.json 文件-tabBar 创建
        • 4、页面定义
        • 5、index(首页)界面制作

八、项目启动-结构搭建

第一项目初始化

在这里插入图片描述

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com