ionic3最详细最完整架构（大量图文）——一文教会你使用Ionic

程序员文章站 2022-04-25 20:21:53

...

环境配置

这个在之前的博文有详细讲解。Android和iOS开发环境配置

项目架构

运行Ionic start myApp tabs命令行

这里start代表新建一个Ionic应用，MyIonicProject 是项目名称，tutorial是tutorial模板，还有其他几种模板：

tabs : 底部3个tab模板
sidemenu：侧边栏菜单模板
blank：空模板
super：带有十几个页面（比如登陆，谷歌地图，列表）的一个项目模板
tutorial：项目目录比较完整的引导模板
–v2：Ionic2项目，如果你想使用Angular1，–v1即可。本文默认都是Ionic2及以后的版本。

如果使用Angular1版本，在后面加上—type ionic1

这个过程需要等待，因为会安装package.json里的所有引用的包。start成功之后打开项目，可以看到这样的结构：

plugins目录是安装的cordova插件，cordova插件是使用原生组件的方式，默认的会装几个必须使用的，以后我们使用命令行（比如 ionic cordova plugin add cordova-plugin-camera）安装的插件会自动放到这个目录里。
resources是存放我们的项目经过cordova编译之后的android和ios的一切资源的，比如源代码，app的icon，资源图片等等，这里会生成原生的android或者ios项目，比如以后生成的apk文件也是放在这里android目录下面。
src是我们的项目代码目录，我们将在这里编写我们的APP。如果你对这里的代码结构感到陌生，你需要先花点时间了解Angular
www是我们的项目作为angular项目编译之后生成的文件。

ionic3最详细最完整架构（大量图文）——一文教会你使用Ionic

我们在app.component.ts里面做一些初始化代码的工作。

platform.ready().then(() => {
      /*load map script of GaoDe in the first*/
      this.helper.loadMapsScript();

      this.translate.get(['Shared.OkText','Shared.CancelText','Shared.UpdateApp']).subscribe(res => {
        this.translateLanguage = res;
      });

      this.helper.initJpush();//初始化极光推送

      this.storage.get('UserInfo').then((userInfo:UserInfo ) =>{
        if(userInfo){
          this.globalData.token = userInfo.access_token;
          this.globalData.userId=userInfo.userId;
          this.rootPage='HomePage';
          this.globalData.haveEnterHomePage=true; //have load root page is homepage
        }else {
          /*Not Login*/
          this.rootPage='LoginPage';
        }
      });
      this.nativeService.statusBarStyleDefault();
      this.nativeService.splashScreenHide();
      this.nativeService.disableKeyboardScroll(); //禁止iOS下Keyboard出来之后屏幕滚动
      this.registerBackButtonAction();//注册返回按键事件
      this.assertNetwork();//检测网络
      this.getVersion();
    });
  }

我们通常在config.xml文件里进行原生应用的配置，比如权限，版本，名称等等其他的配置。

这个文件一开始没有，是我们运行build命令之后自动生成的。比较重要的一些概念：

Name是显示在手机系统的APP名称
Id是应用的package id
Allow-intent是android的权限（iOS权限应在Xcode里面配置）
ShowSplashScreen是否显示过渡图
howSplashScreenSpinner显示过渡图时候是否显示Loading
AutoHideSplashScreen是否自动隐藏过渡图（一般写false，在app.component.ts里面调用this.nativeService.splashScreenHide()方法进行隐藏;）
SplashScreenDelay过渡图显示时间（一般当AutoHideSplashScreen为True的时候进行配置）
FadeSplashScreen 是否使用过渡动画来隐藏过渡图
Orientation 如果只考虑竖屏效果，配置值为portrait