一周搞定TypeScript+Angular2+Ionic2

2020-04-17 原文

摘要

预先说明一点，笔者是后端程序猿，前端只是略懂，仅仅略懂。这篇文章比较长，很多老铁估计一看到滚动条就放弃了，这里我要说的是程序是比较简单的东西，只要你有一定的耐心，肯定会有非凡的收获。只需要你有5成的html+css3+js基础即可开始我们的一周之旅。废话少说，能贴代码绝不瞎比比。

需求确定

记录每天的各种消费，以控制每月的消费（其实是因为穷，所以要节流）。目前比较简单，只是对业务的实现，没有集成安全认证、断网检测等技术功能，接下来我会尽快实现，毕竟一口吃不了一个大胖子，还有晚上要陪女票，时间紧凑啊。

后端API：SpringBoot+SpringData JPA+ sqlite数据库
后端的选择都是为了配合我们的APP，都是快速开发的产物，sqlite数据库就一个文件，简单的不要不要的。

前端APP：TypeScript+Angular2+Ionic2
这一块是我们目前的重点，因为我也特么的不会，从零开始学。我这里会尽可能的把我快速学习的方式和思维模式展现出来

看看最终的效果图，给大家一点往下看的动力：

效果图

代码托管在GitHub上面，强烈建议clone下来，我的代码写的很清晰。然后给个Star哦，你的鼓励是我前进的动力^_^

服务器：DayBook

Ionic2 APP：DayBookApp

1.TypeScript学习

TypeScript是微软推出的编程语言，始于javascript，归于javascript。说白了你用TypeScript写的程序最终还是要编译成javascript。毕竟是要在浏览器运行的，目前市面上浏览器都基于ES5是不支持TypeScript运行的。按照惯例，先学个五成。

//动物父类
class Animal {
    name:string;
    constructor(theName: string) { this.name = theName; }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}
//蛇继承动物
class Snake extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}
//小马也继承动物
class Horse extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 45) {
        console.log("galloping...");
        super.move(distanceInMeters);
    }
}

let sam = new Snake("Sammy the Python");
let tom: Animal = new Horse("Tommy the Palomino");

sam.move();
tom.move(34);

这就是TypeScript语言五成的知识，有面向对象经验的程序员看一眼乐开花了吧。我是花了大概一天时间在下面这个地方过了一遍，也会遇到很多不明白的地方。我觉的你不是天才的话肯定会也会遇到一些困惑。没事，先记住它的语法，继续一口气往下学。学不下去了再去google 百度。

TypeScript完全学习文档

2.Angular2学习

以前学过AngularJS，学习曲线确实陡峭。第二代官方去掉JS叫Angular2。不光名字简单了，上手也容易多了。前提是掌握TypeScript，否则就跟我一开始直接看Angular一样，她认识你，你不认识她。英语好的直接看官方文档开始学，英语不好的按着下面的翻译文档过一遍，这个文档做的特别好。首先让你掌握下基础的语法、要点，然后从新建项目引导你到最后做一个Demo。一整套下来也就一两天的时间，Angular的基本知识也就掌握了。如果你没有Angular基础，先不要直接从Demo部分开始看哦，免得被打击。

Angular完全学习文档

3.Ionic2学习

Ionic基于最新的Angular2，用TypeScript语言进行app开发，并用Cordova打包成App，只需一次编写，就可以分别部署到IOS，Android，WP等系统。
Ionic2也提供了很多的漂亮的组件供开发者快速开发。这一块不要太简单，就是封装了良好样式的HTML元素。比如下面的组件就是Ionic2提供的按钮组件，展示了一个红色的按钮，color="danger"？danger不就是BootStrap的颜色样式吗？

　　　　　<button ion-button color="danger">Danger</button>

Paste_Image.png

同样详细的文档将帮助你开始你的Ionic2之旅

Ionic2完全学习文档

有了前面TypeScript和Angular2打的基础，现在开始Ionic2如有神助的感觉，倍儿爽。

有了一定的学习基础以后，聪明的你肯定跃跃欲试了吧。不要急，你的渴望程度还不够。从GitHub把项目clone下来，本地运行起来，看看效果，再撩拨下你。

服务器：DayBook

Ionic2 APP：DayBookApp

项目clone下来后我们一一部署。

1.部署服务端

系统默认启动端口是9971，修改端口可以在src/main/resources/application.properties文件中修改
server.port=端口

系统打包

在项目根目录下直接运行下面的命令
mvn clean package assembly:single -Pprod -Dmaven.test.skip=true
打包成功后在根目录下target/DayBook即为打包的结果。
. ├── conf ├── DayBook-0.0.1-SNAPSHOT.jar ├── lib ├── DB.db （sqlite数据库文件，需要从项目根目录自行拷贝）

系统启动

上一步打包后，从命令行进入target/DayBook根目录；执行java -jar DayBook-0.0.1-SNAPSHOT.jar即可看到启动过程。
如果需要集成JRE，在window环境下，拷贝jre到target/DayBook根目录，新建start.bat文件，内容为
start jre/bin/javaw -jar DayBook-0.0.1-SNAPSHOT.jar
双击start.bat即可启动

2.运行Ionic2 App

修改App中服务起访问地址,src/providers/http-service.ts文件修改API服务器访问地址
hostUrl:string = "http://192.168.1.1:9971";

修改成功后，运行命令
ionic serve
浏览器打开http://localhost:8100即可打开浏览器看到效果。
http://localhost:8100/ionic-lab可以看到android、IOS、WP的效果

上面这种方式对于native api是不友好的。比如弹出本地Dialog，是无法正常弹出的，控制台提示...but Cordova is not available. Make sure to include cordova.js or run in a device/simulator。

解决方法：
$ ionic platform add browser
$ ionic run browser

构建Android App

ionic platform add android ionic build android
运行以上两条命令，提示成功后，在DayBookApp/platforms/android/build/outputs/apk目录下会生成android apk应用。然后可以安装到手机~

签名APP生成release版本

APP签名的意义其实就是给app一个身份证。这样你的app发布到市场，就拥有了唯一的ID。
如何获得签名请点击查看如何生成android app签名文件，下面是给APP签名的步骤，
在ionic2项目platform/android目录下新建文件release-signing.properties，内容为

storeFile=your keystore path

keyAlias=your key aliasstore

Password=your store passwordkey

Password=your key password

然后构建app命令换成ionic build android --release --prod，最后生成的release app安装前需要卸载手机中原来的debug版本。这样一个可发布到市场的基本APP就生成了，在商业应用中还需要对app进行加固等处理，我打算专门写一篇这方面的博客。

--prod参数的作用：解决ionic2生成app后启动的白屏问题。具体原理请查看解决ionic2 生成app启动白屏的问题

问题汇总

浏览器启动app访问时会存在跨域不可访问的问题。这是浏览器的机制决定的。安装到手机不会有这种问题。为了便于我们调试，建议用谷歌浏览器，然后安装跨域插件