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

最近在使用 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 开发经验的小伙伴一下子就可以看出来这是典型的 Androidios 项目的目录结构。

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 ,里面有一些常见问题及解答。根据前期的需求,着重看一下可能用到的组件和插件。
  • 研究打包方式,我们最后是生成 AndroidiOS 两个平台上的安装包,这个是 Cordova的 内容。
  • 规定管理约束,内容大体如下:
    • 提交代码管理:每次提交都要写清楚具体做了什么
    • 命名规范管理:按照Angular的规范来
    • 版本迭代管理:约定下版本号的命名规则
    • Bug fix 管理:修复Bug要写清楚修复Bug内容,添加JIRA号
  • 研究空白项目中每个文件的作用

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

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

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

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章