工程训练：生意专家_task01

目录

• 0. 项目目录
• 1. 构建Android应用程序
• 2. 制作App的图标和启动屏幕（闪屏页面）
• 3. 向导页（欢迎页）的实现
• 4. 产品测试要求

0. 项目目录

1. 欢迎页的实现.
2. 程序第一次运行实现
3. 注册的实现
4. 登陆的实现
5. 首页的实现
6. 店铺设置的实现
7. 商品分类浏览的实现
8. 编辑商品分类的实现
9. 新增商品的实现
10. 商品管理的实现

1. 构建Android应用程序

1.1 创建工程

ionic start yxp-app sidemenu --type=angular

1.2 在浏览器里运行

在命令提示符中（cmd）进入项目的根目录，执行下面的命令

ionic serve

命令执行成功后，会自动打开默认的浏览器（建议使用谷歌浏览器），默认网址：http://localhost:8100/
按F12打开开发者工具，模拟手机设备。

1.3 添加Android平台

在工程目录下shirt+右键 ;powershell
1.3.1 构建Android应用程序

ionic cordova platform add android

报错：

转了个容器，就可以运行了。

1.3.2 编译

ionic cordova build android

1.3.2 运行

ionic cordova emulate android

报错：

解决：因为没找到硬件设备，那么打开android studio 就ok了

2. 制作App的图标和启动屏幕（闪屏页面）

在项目的目录找到resources文件夹。在文件夹中都放入icon.png（应用图标，最小1024x1024px，不带圆角），splash.png（启动屏幕，最小2732x2732px）(可以是png、psd、ai) 在cmd中进入项目所在文件夹执行：

ionic cordova resources 

执行该命令后，会自动在resources文件夹下创建已添加的平台名称的文件夹，如：android，其中会自动将图片进行缩放、裁剪，生成不同分辨率的图片，并在config.xml中添加相应内容。 也可分开执行：

ionic cordova resources --icon
ionic cordova resources --splash

3. 向导页（欢迎页）的实现

3.1 向导页（欢迎页）的详细需求

用户场景：用户在界面上左右滑动，轮流显示三张图片，通过这三张图片简单介绍软件。
输入/初步条件：程序第一次运行时或程序版本升级后第一次运行时，进入向导页。
说明：欢迎页（引导页）是用户第一次安装APP或更新APP后第一次启动，展示的数张图片页面。主要作用是操作指引、功能介绍、使用场景、迭代信息等。

3.2 创建向导页（欢迎页）组件

方法一：
在src\app目录下创建pages文件夹，在命令符号（cmd）下，进入项目的根目录执行下面的命令：

ionic generate page pages/welcome

该命令会在src\app\welcome目录中自动生成以下几个文件：

方法二：

出错：我发现浏览器模拟器崩溃了，重建报错。可能是我建了两个默认的页welcome和welcome1.我把1已经删了 所以找不到了。记得删后页面要保存。才会成功

3.3 向导页（欢迎页）设置成默认

① 修改src\app\app-welcome.module.ts路由文件。
配置页面的路径。改一致。快速创建页面

3.4 为界面添加轮播

现在对页面加上旋转木马
① 在\src\assets目录中创建img文件夹，把splsh_one.png、splsh_two.png和splsh_three.png三张图片拷贝到img的目录中。在VS Code的资源管理器中找到需要存放文件的目录，直接把需要拷贝的文件拖动进去。

② 修改HTML模板文件，为元素添加子元素。
\src\app\pages\welcome\welcome.page.html

<!-- 其他省略 -->
<ion-content>
  <ion-slides pager="true">
    <ion-slide>
      <img src="/assets/img/splsh_one.png" alt="">
    </ion-slide>
    <ion-slide>
      <img src="./assets/img/splsh_two.png" alt="">
    </ion-slide>
    <ion-slide>
      <img src="assets/img/splsh_three.png" alt="">
    </ion-slide>
  </ion-slides>
</ion-content>

不要标题 删掉 智能感知 输入islide 自动出来
三种形式 alt是若图片显示不出来 alt里面代替。

把边去掉:ino。。

ion-content：内容组件提供了易于使用的内容区域。
ion-slides：幻灯片（轮播、旋转木马）组件是个多节容器。每个部分都可以在其间滑动或拖动。它包含任意数量的Slide组件。
ion-slide：滑动组件是Slides的子组件。任何幻灯片内容都应该写在此组件中，并且应该与幻灯片一起使用。
在之前的页面或者代码中出现过“/”、“./”，我们了解这些路径的区别。

有开发过多页面应用（MPA，Multi-page Application）的同学可能感到很奇怪，welcome.page.html和assets根本不在同一级目录下，在浏览器上运行时正常会报404错误。想要访问assets目录下的文件，常规的写法“…/…/…/”。然而单页面应用（SPA，Single-page Application）只显示一个index.html页面，相应的页面仅仅替换index.html的某个区域。因此在单页面应用程序中，以index.html所在的目录作为路径的起始。
打脸了，在新版的工程中可以使用…/…/…/assets/img/splsh_one.png这种写法。

3.5 自动刷新保存设置

修改文件后，每次都要保存。否则切换到浏览器时无法看到程序的变化。可以通过设置VS Code来实现自动保存。 打开Visual Studio Code，在左上角依次点开 文件→首选项→设置，如下图:


在出现的下拉菜单中选择onFocusChange,当失去焦点时触发保存。

切换到浏览器，不需要按F5刷新，等待console提示编译完毕，浏览器上就能够显示新的界面。
注意：在实际的前端开发中，组件中用到的图片应放在各自组件的images目录中。编译时可以使用webpack把图片拷贝到www\assets\img目录中。

3.6 添加“跳过”按钮bottun

在标题栏的右边添加“跳过”按钮。当滑动到第一张或者第二张图片时，显示“跳过”按钮，当滑动到最后一张图片时隐藏“跳过”按钮。
先简单实现，通过ionic里提供的
① 在模板文件中添加按钮组件
./src/app/pages/welcome/welcome.page.html

<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="end"> // 输入ibuttons记得是有s // slot位置 end 右侧
      <ion-button (click)="onClick()"> // onclick()应该也没用可以删
        跳过
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

ion-header：标题组件是包含工具栏组件的父级组件。注意：ion-header必须是页面的三个根元素之一（ion-content，ion-footer）。
ion-toolbar：工具栏组件
ion-buttons：按钮组组件，用于存放1个或者多个按钮。
ion-button：按钮组件
借助标题等组件，可以使用Ionic提供的默认样式，帮助我们快速定义好按钮的外观及位置。但是正常的欢迎页面是不出现标题栏的，可以通过设置css中的background和bordy-color两个属性为透明，“隐藏”标题栏。

② 设置属性，使得”跳过“按键可以同时显现或者隐藏
想法：通过变量属性 来控制

在welcome.page.ts 中的类里加上public成员 showSkip.这个变量是个bool类
// 没写public 默认共有
// 标准写法 showSkip: boolean = ture;
// boolean为类型

//angular语法：在属性两端加【】叫属性绑定
hidden是个原有标准的属性词
//页面中，属性后面全部用双引号
//showSkip为真 所以hidden就是取非 所以取得！showSkip
通过改变hidden值或者showSkip值均可使三页上面的跳过隐身/显示

③ 实现第三页没有“跳过”：页面变化-利用slides的事件控制showSkip的值。
为组件类添加onSlideWillChange方法。
首先，拿到slides末页的对象
在模板页面中slides 申请一个变量#slides (对应slides的对象）

第二步：让组件类让#slides的存在
找到welcome.page.ts通过@ViewChild找到视图的子元素。static为新版的。这句话就是从视图中找到旋转木马的变量slides
冒号跟上类型IonSlides(后台组建的名称）。实现模板变量关联一起。

第三步：加一个事件，最后一页发生变化
官网可以找ionSlideWillChange事件，设置一个方法名onSlideWillChange(),然后两者相关联，叫做事件绑定，用（）：

切到后台：

# page.ts中一个函数
export class WelcomePage implements OnInit {
  showSkip = true;
  @ViewChild('slides', {static: true}) slides: IonSlides;
  constructor() { }

  ngOnInit() {
  }
  onSlideWillChange(){
    this.slides.isEnd().then((end) => {
      this.showSkip = !end;
    });
  }
}

# page.html
<ion-header class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="end" [hidden] = "!showSkip"> 
      <ion-button >
        跳过
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>


<ion-content>
  <ion-slides  pager="true" #slides (ionSlideWillChange)= "onSlideWillChange()" >
    <ion-slide>
      <img src="/assets/img/splsh_one.png" alt="">
    </ion-slide>
    <ion-slide>
      <img src="./assets/img/splsh_two.png" alt="">
    </ion-slide>
    <ion-slide >
      <img src="../../../assets/img/splsh_three.png" alt="">
    </ion-slide>
  </ion-slides>
</ion-content>

3.7 设置工具栏透明

① 方法一：
/src/app/pages/welcome/welcome.scss

app-welcome {
  ion-toolbar {
    --background: transparent;
    --border-color: transparent;
  }
}

在SCSS中app-welcome是一种元素选择器，同样ion-toolbar也是元素选择器。ion-toolbar嵌套在app-welcome中表示子元素选择器。意思是在页面中作为app-welcome子元素的ion-toolbar元素才能应用–background: transparent和–border-color: transparent这两种样式。最终生成的css如下：

app-wlecome ion-toolbar {
  background: transparent;
  border-color: transparent;
}

在组件类中修改装饰器，添加encapsulation元数据，提供模板和 CSS 样式使用的样式封装策略。
/src/app/pages/welcome/welcome.ts

import {Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core';
@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.page.html',
  styleUrls: ['./welcome.page.scss'],
  encapsulation: ViewEncapsulation.None
})
export class WelcomePage implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

② 方法二（我用的）
在实际的开发中发现每次都要添加encapsulation，有点麻烦。在scss文件中可以不使用app-wlecome。

ion-toolbar {
  --background: transparent;
  --border-color: transparent;
}

在iOS模式下测试通过，在md模式下发现工具栏的底部依旧存在一条边，通过阅读官方文档发现，需要为ion-header元素添加class(类选择器)属性，ion-no-border。

–为ionic独特写法，css没有。总之就是对scss一些属性设置。

3.8 添加登录和注册按钮

在第三个幻灯片中添加登录和注册两个按钮，并且把这两个按钮固定在界面的底部。（因为手机分辨率不同）方法很多 下面用样式方法解决
.fixed-bottom 中的==. ==为class（类）选择器

① 添加.fixed-bottom样式。
welcome.page.scss

  .fixed-bottom{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }

absolute：绝对定位。参照父容器的上下左右

② 在welcome.html文件中添加登录和注册按钮
修改ion-slides元素中的第三个ion-slide元素。
/src/app/pages/welcome/welcome.html

<!--其他省略-->
<img src="assets/img/splsh_three.png">
<ion-grid>
  <ion-row>
    <ion-col>
      <ion-button color="primary" fill="outline" expand="block">登录</ion-button>
    </ion-col>
    <ion-col>
      <ion-button color="primary" expand="block">注册</ion-button>
    </ion-col>
  </ion-row>
</ion-grid>

③ 布局
整个网页怎么布局；局部区域怎么布局
三格布局 grid 一行分成12列（默认） 每个单元格占多少，超出的会挤到下一行；每个手机不太一样 有的是24 有的是20.经测试 咱们是12.当不填的时候就是均分


expand = ”block“:把父容器占满
fill = “clear” 边去掉
shape = “round” 就是操场样子

如何移到底部？
通过调用class类的fix-botton

成像：

4. 产品测试要求

• 提交src目录的压缩包，命名规范请参考之前的任务。

• 根据产品测试要求运行程序，制作动图（gif）并提交。文件命名规范：班级序号+后三位学号_姓名_两位任务序号.gif，例如：1027_张三_02.gif

   ①执行ionic serve时，浏览器默认显示的是欢迎页。
   ②滑动到第三页时，“跳过”按钮消失。
   ③在浏览器上选择不同的虚拟手机（分别率不一样），“登录”和“注册”按钮显示底部。
  

本文地址：https://blog.csdn.net/wistonty11/article/details/109205597