第一个ionic4开发任务!
很激动这篇博客是记录笔者开发ionic4之后接到的第一个任务。简单说下项目需求,在下图的红框中新建一个图标,名为班课,并能实现单击这个图标后,跳转到下一个页面。
找图片
1.我们首先看下上图中其他图标都是什么格式的,嗯svg,所以我们也应该去找svg格式的图标
2.我们在阿里巴巴矢量图标库上找找看
https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
搜索一下班课,看到一堆图标,选好后单击它会出现箭头所示的三个选项,选下载
3.当然是svg格式的了,下载就OK了
4. 设置图标的样式。
设置统一的样式很重要!我们可以看下同一页面中的其他图标的代码。宽和高都是45这点得记住。
然后我们用文本编辑器打开刚下载的svg文件,更改下宽高。然后在项目的文件夹下新建一个班课.svg文件把这段代码复制过去。
5.实现简单的路由跳转。
接下来照葫芦画瓢,找到这些图标共同存在的ts文件。写上路由跳转路径,笔者就是模仿收藏夹图标写的班课的代码。
补充:当然了要实现路由功能您需要在ts文件中添加引用和声明构造函数
import { Router, ActivatedRoute, Params } from '@angular/router';
constructor(
public router: Router,
public activeRoute: ActivatedRoute
) { }
6.跳到哪里?跳到上图的绿字classlesson中,找到后端的html代码,继续照葫芦画瓢。在span这里可以自定义按钮的名字
7.图标做完了,需要跳到另一个页面。对,我们该新建这个页面了。
找到合适的位置新建一个页 ,在终端里面输入ionic g page 名字
8.接着就会新建一个文件夹,如图打开它的html文件,在title这里更改下名字为课程
9.可以看下效果。班课图标出来了
点击进去,嗯哼~