一周搞定TypeScript+Angular2+Ionic2
-
摘要
预先说明一点，笔者是后端程序猿，前端只是略懂，仅仅略懂。这篇文章比较长，很多老铁估计一看到滚动条就放弃了，这里我要说的是程序是比较简单的东西，只要你有一定的耐心，肯定会有非凡的收获。只需要你有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访问时会存在跨域不可访问的问题。这是浏览器的机制决定的。安装到手机不会有这种问题。为了便于我们调试，建议用谷歌浏览器，然后安装跨域插件
