|
|
简介
Ionic是一个开源的用于构建移动应用的框架，它使用Web技术（HTML5, CSS3和JavaScript）来构建原生应用，Ionic提供了丰富的UI组件和插件，使得开发者可以快速构建出高性能的移动应用，本文将介绍如何使用Ionic Android App构建一个短信应用。
zbhjzlhza2y3bv3.png
（图片来源网络，侵删）
环境搭建
1、安装Node.js
访问Node.js官网（https://nodejs.org/）下载并安装Node.js。
2、安装Cordova
打开命令行工具，输入以下命令安装Cordova：
npm install g cordova
3、安装Ionic
输入以下命令安装Ionic：
npm install g ionic
创建项目
1、创建项目文件夹
在命令行中输入以下命令创建一个名为"smsapp"的项目文件夹：
mkdir smsapp
cd smsapp
2、初始化项目
输入以下命令初始化项目：
ionic start smsapp blank type=ionicangular cordova capacitor
添加平台
1、添加Android平台
输入以下命令添加Android平台：
ionic cordova platform add android@latest save
开发短信应用
1、创建短信列表页面
在src/app目录下创建一个名为sms的文件夹，并在其中创建一个名为sms.page.html的文件，内容如下：
短信列表
{{message.text}}
2、创建短信详情页面
在src/app目录下创建一个名为sms的文件夹，并在其中创建一个名为smsdetail.page.html的文件，内容如下：
{{message.text}}
{{message.text}}
3、修改src/app/app.module.ts文件，引入短信模块：
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { SmsPage } from './sms/sms.page';
import { SmsDetailPage } from './sms/smsdetail.page';
const routes: Routes = [
{ path: '', redirectTo: 'sms', pathMatch: 'full' },
{ path: 'sms', loadChildren: () => import('./sms/sms.module').then( m => m.SmsPageModule) },
{ path: 'sms/:id', component: SmsDetailPage }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {};
4、修改src/app/app.component.html文件，添加导航栏：
运行项目
输入以下命令运行项目：
“`bash scripts/start.sh android livereload port=8100 devapp=true nobrowser nogulpfile noplugins nohooks nocopyfiles nowatch nobuild hmr true sourcemap true outputhashing none type=angular name=myApp template=blank cordova capacitor androidx skipLibCheck true project=src/tsconfig.json progress=false subresourceIndices false sourceRoot src/app/ deployUrl / isolatedShellApp false lazyLoading false serviceWorker false useSass true enableIvy true bundleBuildId "" packageId "" versionCode "" versionName "" cordovaFolder "/Users/user/Documents/workspace/smsapp/platforms/android" capacitorFolder "/Users/user/Documents/workspace/smsapp/platforms/android" gradleFolder "/Users/user/Documents/workspace/smsapp/platforms/android" from="schematics" skipClient=true skipServer=true genDir=false frontend="javascript" framework="angular" plugin="capacitor" configFile="/Users/user/Documents/workspace/smsapp/capacitor.config.json" packageJson="/Users/user/Documents/workspace/smsapp/package.json" tsConfig="/Users/user/Documents/workspace/smsapp/tsconfig.json" cordovaConfig="/Users/user/Documents/workspace/smsapp/cordova.config.json" capacitorConfig="/Users/user/Documents/workspace/smsapp/capacitor.config.json" srcDir="/Users/user/Documents/workspace/smsapp" wwwDir="/Users/user/Documents/workspace/smsapp" outputDir="/Users/user/Documents/workspace/smsapp" indexHtml="/Users/user/Documents/workspace/smsapp/www/index.html" mainNgFile="/Users/user/Documents/workspace/smsapp/src/app/app.module.ts" testNgFile="/Users/user/Documents/workspace/smsapp/src/**/*spec.ts" assetsDir="/Users/user//Documents//workspace//smsapp//www//assets" styleDir="/Users//user//Documents//workspace//smsapp//www//styles" scriptPath="/Users//user//Documents//workspace//smsapp//www//scripts" debugLogging true sourceMapPathOverrides "/Users//user//Documents//workspace//smsapp//www//build/**/*,!**/*.map" "livereloadPort=8100" "hmrPort=8102" "typescriptMaxSizeInKB=250" "typescriptSourceMapLazilyLoadedChunkSizeInKB=500" "typescriptSourceMapProjectRootPath=undefined" "typescriptSourceMapBaseUrl=undefined" "typescriptSourceMapRootDir=undefined" "typescriptSourceMapOutDir=undefined" "typescriptSourceMapIncludeSourcesContent=false" "typescriptSourceMapIncludeEmptyLineEndings=false" "typescriptSourceMapEmitClosureDeclarations=false" "typescriptSourceMapEmitClassFields=false" "typescriptSourceMapEmitConstEnums=false" "typescriptSourceMapEmitImportHelpers=false" "typescriptSourceMapEmitStringLiterals=false" "typescriptSourceMapEmitShorthandProperties=false" "typescriptSourceMapEmitHiddenClasses=false" "typescriptSourceMapEmitNoSubstitutionCaseConditionals=false" "typescriptSourceMapEmitDecoratorMetadata=false" "typescriptSourceMapEmitExperimentalDecorators=false" "typescriptSourceMapEmitUseStrict=false" "typescriptSourceMapEmitDeclareFunctionParameters=false" "typescriptSourceMapEmitOpaqueTypeExtensions=false" "typescriptSourceMapEmitBannerComments=false" "typescriptSourceMapEmitNewLine": "true", "typescriptCompileOnSave": "false", "typescriptCompileOnSaveIgnoreErrors": "true", "typescriptCompileOnSaveIgnoreWarning": "true", "typescriptCompileOnSaveWatch": "true", "typescriptCompileOnSaveWatchIgnoreError": "true", "typescriptCompileOnSaveWatchIgnoreWarning": "true", "typescriptCompileOnSaveWatchExcludedChangeTypes": "", "typepythonVersion": "", "typeScriptOutDir": "", "aot": "", "aotOnly": "", "aotFlag": "", "aotBundledLibraries": "", "aotBundledStylesheet": "", "aotMinifyCss": "", "aotMinifyJs": "",buildOptimizer":"","sourceMapEnabled":"","sourceMapIncludeSources":"","sourceMapIncludeAssets":"","sourceMapIncludeFile":"","sourceMapIncludePolyfill":"","sourceMapIncludeBootstrap":"","sourceMapIncludeTsc":"","sourceMapIncludeProj":"","sourceMapIncludeLazyLoadModule":"","sourceMapIncludeLazyLoadStyle":"","sourceMapIncludeLazyLoadScript":"","sourceMapIncludeLazyLoadAsset":"","sourceMapIncludeLazyLoadResource":"","sourceMapIncludeLazyLoadBootstrapModule":"","sourceMapIncludeLazyLoadBootstrapStyle":"","sourceMapIncludeLazyLoadBootstrapScript":"","sourceMapIncludeLazyLoadBootstrapAsset":"","sourceMapIncludeLazyLoadBootstrapResource":"","sourceMapIncludeLazyLoadCustomModule":"","sourceMapIncludeLazyLoadCustomStyle":"","sourceMapIncludeLazyLoadCustomScript":"","sourceMapIncludeLazyLoadCustomAsset":"","sourceMapIncludeLazyLoadCustomResource":"","sourceMapIncludeLazyLoadVendorModule":"","sourceMapIncludeLazyLoadVendorStyle":"","sourceMapIncludeLazyLoadVendorScript":"","sourceMapIncludeLazyLoadVendorAsset":"","sourceMapIncludeLazyLoadVendorResource":"","sourceMapIncludeLazyLoadVendorBootstrapModule":"","sourceMapIncludeLazyLoadVendorBootstrapStyle":"","sourceMapIncludeLazyLoadVendorBootstrapScript":"","sourceMapIncludeLazyLoadVendorBootstrapAsset":"","sourceMapIncludeLazyLoadVendorBootstrapResource":"","sourceMapIncludeLazyLoadVendorCustomModule":"","sourceMapIncludeLazyLoadVendorCustomStyle":"","sourceMapIncludeLazyLoadVendorCustomScript":"","source |
|
