ionic3项目实战教程一（创建项目、目录分析、生成apk、根组件app分析

转载自：https://blog.csdn.net/lyt_angularjs/article/details/81141906

• 使用ionic3+angular4+typescript4+cordova8+es6写app项目其实是一件相当困难的事情。不仅需要强大的英文文档阅读能力，更需要耐心和毅力！因为这条技术路线不像vue是循序渐进的，而是直接上手就干大BOSS，干掉了你就入门了，被干掉了就会被人嘲讽！后台或者项目经理就会在心里说，你是不是不行啊？连个demo都做不出来太菜了吧？这么几个简单的功能都不会写，要你这样的水货有何用？
• 在我们开始这个项目之前，你需要先了解下es6 阮一峰和typescript官网教程。并且仔细阅读ionic3 components和ionic3 api,不要觉得难，也不用觉得多。因为你以后的路会越走越轻松。
• 最后送大家一句话：技术有难易，学习无止境！

一、安装环境

• npm install -g ionic@latest
• npm install -g angular-cli@latest
• npm install -g cordova@latest

二、新建项目

`ionic start --help //可以看到有哪些模板`

    tabs ............... ionic-angular A starting project with a simple tabbed interface
    blank .............. ionic-angular A blank starter project
    sidemenu ........... ionic-angular A starting project with a side menu with navigation in the content area
    super .............. ionic-angular A starting project complete with pre-built pages, providers and best practices for Ionic deve
lopment.
    conference ......... ionic-angular A project that demonstrates a realworld application
    tutorial ........... ionic-angular A tutorial based project that goes along with the Ionic documentation
    aws ................ ionic-angular AWS Mobile Hub Starter
 
 

ionic start myApp tabs//新建带有tabs模板名为myApp的项目

    //询问是否同步到ionic 项目，可以选择N，但是ionic cordova resources自动生成图标和启动页将无法使用。
    //选择Y需要先注册ionic官网账号并随便新建个项目，在这里关联到哪个项目即可。
    ? Connect this app to the Ionic Dashboard? (Y/n)//输入Y

    ? Which app would you like to link
    > Create a new app//回车选择这个，下面几个是我之前随便创建并且已经关联的项目
      jxsrsr (ce787b9f)
      app6 (ee75a394)
      gggg (6c94dfd5)
      llll (421a76f9)
      Nevermind

    ? Please enter a name for your new app: myApp//随便起个名字

 
 

cd myApp
ionic serve 启动项目如图示

三、文件目录分析

• node_modules 项目依赖存储目录
• platforms 生成的android和ios项目以及安装包目录，可以用Android Studio 调试运行
• plugins 通过cordova plugin add|rm name 增加的cordova插件，实现原生功能扩展
• resources 项目图标icon.png 和启动界面splash.png 自动生成适配尺寸存放目录
• src 我们写代码的地方，页面编码都在这里
• src/app 项目启动时最先进到这里
• src/assets 存放静态资源文件
• src/components 新建的组件目录
• src/pages 重点，所有页面的存放目录
• src/services 服务存放目录
• src/theme 全局css样式文件，在里面写的样式全局有效
• www ionic build 自动编译生成的文件
• package.json 依赖包定义文件

四、生成apk

1. 最好有vpn代理，因为要安装很多环境，没有代理会很卡，甚至奔溃！
2. 需要安装 android sdk 并下载 android 运行环境，最好直接下载Android Studio这款软件，它会自动帮你把需要的环境安装好。为啥要安装这些鬼东西？因为从这一刻起，你不再是一个前端，而是一个app开发者！！！
3. cordova platform add android，如果你发现控制台如下并且没有报错说明你走过了非常艰难的一步。如果报错了，执行cordova platform rm android然后重新cordova platform add android再来一次。

Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml
Discovered plugin "cordova-plugin-device" in config.xml. Adding it to the project
Installing "cordova-plugin-device" for android
Adding cordova-plugin-device to package.json
Saved plugin info for "cordova-plugin-device" to config.xml
Discovered plugin "cordova-plugin-splashscreen" in config.xml. Adding it to the project
Installing "cordova-plugin-splashscreen" for android
Adding cordova-plugin-splashscreen to package.json
Saved plugin info for "cordova-plugin-splashscreen" to config.xml
Discovered plugin "cordova-plugin-ionic-webview" in config.xml. Adding it to the project
Installing "cordova-plugin-ionic-webview" for android
Adding cordova-plugin-ionic-webview to package.json
Saved plugin info for "cordova-plugin-ionic-webview" to config.xml
--save flag or autosave detected
Saving android@~7.0.0 into config.xml file ...

G:\ionicTest\myTabs>
 
 

4.cordova build android
如图示说明成功了，把app-debug.apk安装到手机上即可。
如果app-debug.apk只有几百K大小并且安装后打不开，说明你没有ionic build。你需要cordova platform rm android ,ionic build ,然后重新执行第三步。

BUILD SUCCESSFUL in 26s
47 actionable tasks: 47 executed
Built the following apk(s):
        G:\ionicTest\myTabs\platforms\android\app\build\outputs\apk\debug\app-debug.apk

G:\ionicTest\myTabs>

 
 

五、app.module.ts分析

//根模块，告诉ionic如何组装应用
//引入ng ionic系统模块
import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

//引入跟组件
import { MyApp } from './app.component';
//引入自定义页面
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

//ionic 打包成app以后配置启动画面 以及导航条的服务
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  //声明要用到的页面
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  //引入的模块 依赖的模块
  imports: [
    BrowserModule,
    ComponentsModule,
    IonicModule.forRoot(MyApp)
  ],
  //启动的模块
  bootstrap: [IonicApp],
  //配置不会在模块中使用的页面
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  //配置服务
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}//暴露这个类
 
 

ps:有什么写的不对的地方欢迎指正，写了好久呢，小哥哥小姐姐点个赞吧=_=!

				<script>
					(function(){
						function setArticleH(btnReadmore,posi){
							var winH = $(window).height();
							var articleBox = $("div.article_content");
							var artH = articleBox.height();
							if(artH > winH*posi){
								articleBox.css({
									'height':winH*posi+'px',
									'overflow':'hidden'
								})
								btnReadmore.click(function(){
									if(typeof window.localStorage === "object" && typeof window.csdn.anonymousUserLimit === "object"){
										if(!window.csdn.anonymousUserLimit.judgment()){
											window.csdn.anonymousUserLimit.Jumplogin();
											return false;
										}else if(!currentUserName){
											window.csdn.anonymousUserLimit.updata();
										}
									}
									
									articleBox.removeAttr("style");
									$(this).parent().remove();
								})
							}else{
								btnReadmore.parent().remove();
							}
						}
						var btnReadmore = $("#btn-readmore");
						if(btnReadmore.length>0){
							if(currentUserName){
								setArticleH(btnReadmore,3);
							}else{
								setArticleH(btnReadmore,1.2);
							}
						}
					})()
				</script>
				</article>