欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

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

环境配置

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

项目架构

运行Ionic start myApp tabs命令行

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

  1. tabs : 底部3个tab模板
  2. sidemenu:侧边栏菜单模板
  3. blank:空模板
  4. super:带有十几个页面(比如登陆,谷歌地图,列表)的一个项目模板
  5. tutorial:项目目录比较完整的引导模板
  6. –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-intentandroid的权限(iOS权限应在Xcode里面配置)
  • ShowSplashScreen是否显示过渡图
  • howSplashScreenSpinner显示过渡图时候是否显示Loading
  • AutoHideSplashScreen是否自动隐藏过渡图(一般写false,在app.component.ts里面调用this.nativeService.splashScreenHide()方法进行隐藏;
  • SplashScreenDelay过渡图显示时间(一般当AutoHideSplashScreenTrue的时候进行配置)
  • FadeSplashScreen 是否使用过渡动画来隐藏过渡图
  • Orientation 如果只考虑竖屏效果,配置值为portrait

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

运行 ionic serve 可以在浏览器查看效果。

代码实践

为了方便的在各个地方使用公共的方法,在我们的项目里封装了一些服务和组件。

  • 公共服务

我们使用最频繁的方法在native.service.ts文件里,都是涉及原生组件的使用,包括拍照,相册,显示和隐藏loading,显示原生toast,判断版本号,判断手机系统等等。

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

  • 公共组件

项目里用到的包括拍照组件,富文本组件,扫描二维码组件,底部tab栏组件,设备相关的图表组件,设备实时监控组件。

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

  • 公共管道

项目里用到的判断名称长度,文本溢出,时间格式转化等管道。

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

修改应用的icon和过渡图

如果需要设置我们自己的icon和过渡图,需要将1024*1024px格式的名称为icon.png(icon)和2732*2732px格式的名为splash.png(splash screen)的图片放置在如下位置:

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

运行如下命令:

Ionic cordova resources即可

 

相关标签: Ionic+Angular ionic