ionic V3.10 新建空白项目中文件的简单介绍

GitHub地址：github.com/JerryMissTo… ，欢迎关注

最近在使用 ionic 作一个项目，也对其作了些研究，但愿记录下来对初学者有帮助。这篇文章主要是描述新建一个空白 ionic 项目后，其目录下各文件的做用。简单介绍本身再作项目的时候一些心得体会，并提供相关连接供须要的读者进一步去探究。

platform：

ionic: V3.10.3
cordova: V7.0.1

前言

我的认为 ionic 能够简单的解释成 Angualr+Cordova 基础上的UI框架，提供各类精美易用的UI组件，使用Angular 开发，借助Cordova 打包成能够运行在不一样平台上的App，固然也能够只使用www文件夹下的webApp。

最后打包出来的Android App其实就是一个WebView，加载本地的www文件夹中的网页。网页中能够调用 Native 功能就是经过 Cordova 这个桥梁。更详细的原理参见：ionic 实战系列，只看前半部分就好。

正式内容

准备工做，新建项目并添加平台支持，依次执行下面的命令：

ionic start demo tabs //新建一个tabs模板工程
ionic cordova platform add android //添加android平台
ionic cordova platform add ios  //添加ios平台复制代码

最后的目录以下：

1. node_modules 不用多说，依赖包存放的地方
2. platforms 里面放的是打包后不一样平台的工程目录，以下：

有 Android 或者ios 开发经验的小伙伴一会儿就能够看出来这是典型的 Android 和 ios 项目的目录结构。

3.plugins 里面是Cordova 插件，经过使用不一样的插件能够调用不一样的Native功能，好比拍照，录音等。见下图：

具体的插件能够到ionic的官网上去找，地址是：ionicframework.com/docs/native… ，几乎涵盖了全部的Native功能，甚至还有Alipay呢。

4.resources 里面放置的是图标和Splash的图片，可让UE的同事按照不一样的平台要求给你切好，最后到config.xml中去设置。

5.src 就是咱们写代码的地方啦，着重说一下 manifest.json 这个 PWA 添加至主屏幕的配置文件，具体参见：developer.mozilla.org/zh-CN/docs/… 。Android 手机的用户用浏览器打开百度主页，而后点击添加书签，可能会出现添加到桌面的选项，视机型而定，就能够看到这个效果了。 service-worker.js文件是用来作持久离线存储的，也是PWA涉及的技术的一种。具体参见：lavas.baidu.com/doc/offline… 。Progressive Web App（PWA）是谷歌力推的提高WebApp体验的新方法，感兴趣的能够去研究下。

6.www文件夹里面的就是咱们打包出来网页的内容，最终的APP就是个浏览器加载www文件里面的index.html网页。假如你的App不涉及任何原生功能的话，打包出来的www下内容能够直接当作webApp使用，用户经过本身手机的浏览器访问。

7.config.xml 实际上是Cordova的配置文件，里面是对打包出来的APP的配置，好比说包名，版本号，横屏设置等，建议打包成APP以前必定要仔细阅读里面的内容， 设置适合本身产品的参数。具体参见：cordova.apache.org/docs/en/lat… 。

8.package.json里面是管理你本地安装的npm包用的。

9.package-lock.json 是执行npm install时自动生成的，记录当前状态下安装的各个npm package的实际状态和版本号，当在一个新机器上安装此项目时，只要有这个文件，能够保证安装的和以前的同样。

10.README.md这个文件不少人可能会忽视，我的建议里面写上项目如何测试，如何打包，如何发布等信息，后来的维护者看到此文档就能够很快上手工做啦。一个完善的文档是一个成功项目的基础

11.tsconfig.json 这个是typescript项目编译的配置文件，ionic是基于Angular的，Angular是使用是typescript语言的。具体能够参见：www.tslang.cn/docs/handbo…

12.tslint.json是typescript代码识别和匹配的配置文件，相似jslint。

心得总结

肯定项目使用ionic后，在需求肯定的前期阶段，咱们就开始看官方文档。对着官方文档，学习准备的步骤以下：

• 安装好开发环境，学会使用ionic cli，并使用其创建空白项目，并跑一遍。
• 大致看一下UI Components, API Reference,Native Plugins中的内容，建议必定要看下Troubleshooting，里面有一些常见问题及解答。根据前期的需求，着重看一下可能用到的组件和插件。
• 研究打包方式，咱们最后是生成Android和iOS两个平台上的安装包，这个是Cordova的内容。
• 规定管理约束，内容大致以下：
  • 提交代码管理：每次提交都要写清楚具体作了什么
  • 命名规范管理：按照Angular的规范来
  • 版本迭代管理：约定下版本号的命名规则
  • Bug fix 管理：修复Bug要写清楚修复Bug内容，添加JIRA号
• 研究空白项目中每一个文件的做用

需求出来后就能够讨论项目的结构，如何分配业务模块，预估时间等。

在开发的过程当中，遇到问题能够Google或者上Stack Overflow，或者上官方论坛，你遇到的问题都会有解答的。

在此感谢项目初期和我一块儿调研的Lee，惋惜的是他在此项目开发不久被安排至其余的项目了。也要感谢项目时间紧张过程当中临时救火的奥迪哥。