TypeScript+Angular2+Ionic2

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完全学习文档

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访问时会存在跨域不可访问的问题。这是浏览器的机制决定的。安装到手机不会有这种问题。为了便于我们调试,建议用谷歌浏览器,然后安装跨域插件

 
 
 


作者:蓝山牧童
链接:https://www.jianshu.com/p/a8c14409a113
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
posted @ 2022-03-02 15:10  3939!  阅读(55)  评论(0编辑  收藏  举报