目录
- 0. 项目目录
- 1. 构建Android应用程序
- 1.1 创建工程
- 1.2 在浏览器里运行
- 1.3 添加Android平台
- 2. 制作App的图标和启动屏幕(闪屏页面)
- 3. 向导页(欢迎页)的实现
- 3.1 向导页(欢迎页)的详细需求
- 3.2 创建向导页(欢迎页)组件
- 3.3 向导页(欢迎页)设置成默认
- 3.4 为界面添加轮播
- 3.5 自动刷新保存设置
- 3.6 添加“跳过”按钮bottun
- 3.7 设置工具栏透明
- 3.8 添加登录和注册按钮
- 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时,浏览器默认显示的是欢迎页。 ②滑动到第三页时,“跳过”按钮消失。 ③在浏览器上选择不同的虚拟手机(分别率不一样),“登录”和“注册”按钮显示底部。