Ionic2生成网页工作原理
Ionic2生成网页工作原理
由于项目需要，没有使用android原生开发，而是使用了现在流行的hybird开发技术。经过选择最终选择了ionic1，学习了一段时间，发现了官网的文档函数在ionic1，没有实现相应的效果。 才发现原来得使用ionic2，新版的框架。因此，现在项目使用ionic2开发。由于是第一次使用网页的编程技术。所以事情都得重新学习使用。经过阅读示例代码和文档，学习入门，然后项目需求也确定下来了，就开始写代码。
基本的网页技术看：/
基本上来说ionic以及react这些平台都是使用了单页面网页，即切换url地址，但是仍然是在index.html页面。，那么怎么怎么实现页面切换呢，通过学习可知，ionic在index页面里定义了一个标签，然后框架使用js代码来改变这个标签里面的内容实现了页面切换以及页面内的元素的动态更新。以下是一个index.html文件示例，仅body部分
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
这里举例的是ionic2.其中代码控制的标签为：<ion-app></ion-app>
而下面的main.js就是逻辑代码经过编译以后生成的js文件。当index.html页面被加载运行的时候，js代码就会动态的加载模板里面的内容，加载到标签<ion-app></ion-app>里，就呈现出来我们所需要的页面。页面切换也是用过代码来修改这个标签里面的内容（这个原理是我看了代码，又自己写了代码才慢慢理解的，因此做个记录）。
而页面的css也是被编译打包成一个css文件。在index文件的head部分包括进来：示例如下：
<link href="build/main.css" rel="stylesheet">
我们自己为每个页面编写的css以及ionic库的css都被压缩到这个文件里面。统一加载。
安全：
这里我们注意到，我们自定义的css和自定义的js代码（由ts代码编译生成）都和ionic库的css以及js代码混合在一个文件里面。达到了源码混淆的功能。打包后的js代码非常大，即便找到自定义的部分，代码也不好阅读。很晦涩。