工程训练：生意专家：01 欢迎页的实现

最新推荐文章于 2020-12-18 21:20:42 发布

羊老羊

最新推荐文章于 2020-12-18 21:20:42 发布

阅读量377

点赞数 1

分类专栏：生意专家 | 学习笔记文章标签： android angular 移动开发

本文链接：https://blog.csdn.net/wistonty11/article/details/109205597

版权

生意专家 | 学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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-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 添加“跳过”按钮botton

在标题栏的右边添加“跳过”按钮。当滑动到第一张或者第二张图片时，显示“跳过”按钮，当滑动到最后一张图片时隐藏“跳过”按钮。
先简单实现，通过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-bottom
在这里插入图片描述
②在scss页面配置页面的样式

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

在这里插入图片描述

成像：
在这里插入图片描述
③将按钮设置成页面底部

  ion-slides{
      height: 100%;
  }

在这里插入图片描述

4. 产品测试要求

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

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

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

羊老羊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
工程训练：生意专家：01 欢迎页的实现

1. 构建Android应用程序1.1 创建工程ionic start yxp-app sidemenu --type=angular1.2 在浏览器里运行在命令提示符中（cmd）进入项目的根目录，执行下面的命令ionic serve命令执行成功后，会自动打开默认的浏览器（建议使用谷歌浏览器），默认网址：http://localhost:8100/按F12打开开发者工具，模拟手机设备。1.3 添加Android平台ionic cordova platform add android
复制链接

扫一扫