https://blog.csdn.net/qq_36700462/article/details/80667898

 

先创建项目

cd 到创建的相应目录
运行命令:ionic start 项目名称 tabs
? Would you like to integrate your new app with Cordova to target native iOS and Android? (y/N)
你想整合你的新应用程序与Cordova,以目标iOS和Android?(y/n)
这里选择Y
当然还有以下一种情况

问题所在:

网上说IONIC版本太高所致,具体原因我也不太清楚,

解决方案:

回退Ionic 3.9.2就可以了,命令:npm install -g ionic@3.9.2

 

如果npm i很久且失败了 cd到项目里面执行
npm install 或者 cnpm install
或者如下图也是一样
如果不出意外ionic serve即可运行,
项目打包:

安装android sdk 并配置好环境变量 下载gralle

这两个都是必要的,在配置环境的时候就已经配置好了都,这里还是着重提醒一下

1、添加平台
添加ios平台:ionic cordova platform add ios
添加android平台:ionic cordova platform add android
2、项目打包
需要下载android sdk platform 25
android 打包:ioinc cordova build android

可能出现错误:'ioinc' 不是内部或外部命令,也不是可运行的程序或批处理文件。

解决方案:cordova build android

项目搭建完成   END



项目结构          ING

1.多环境配置

最终效果为:

ionic cordova build android –cross-env IONIC_ENV=prod–release android

ionic cordova build android –cross-env IONIC_ENV=dev –debug

 

实现步骤:

1.项目src目录增加environments目录,并增加两个两个文件:environment.dev.ts、environment.prod.ts

但是我一般还会增加一个interface,这样可扩展性更加强大,命名environment.model.ts,但是还需要一个配置文件,webpack.config.js

接下写内容
environment.model.ts

1
2
3
4
5
6
7
8
9
10
11
12
export interface Environment {

/** 环境变量 */
readonly profile: string;

/** 注释 */
readonly API_URL: string;

/**版本号*/

readonly VERSION: string;
}

environment.dev.ts

1
2
3
4
5
6
7
8
9
10
11
import { Environment } from './environment.model';

export const ENV: Environment = {

profile : 'DEV',

API_URL: 'https://www.baidu.com/',

VERSION: '0.0.1',

}

environment.prod.ts

1
2
3
4
5
6
7
8
9
10
11
import { Environment } from './environment.model';

export const ENV: Environment = {

profile : 'PROD',

API_URL: 'https://www.bing.com/',

VERSION: '0.0.1',

}

重要的webpack.config.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
var fs = require('fs');
var path = require('path');
var colors = require('colors');
var CopyWebpackPlugin = require('webpack-plugin-copy');

/**
* 获取对应环境变量的环境配置文件.
* @returns {string}
*/

function _EnvFilepath(env) {
var fileName = 'environment.' + env + '.ts';
var filePath = './src/environments/' + fileName;
console.log(colors.green(">>>>>> Load Environment File : [%s]"), filePath);
if (fs.existsSync(filePath)) {
return filePath;
}
console.error(colors.red(" Load Environment has Exception : cannot find the environment file '%s'"), filePath);
}

/**
* 获取自定义环境变量
* @returns {string}
*/

function _env() {
var ouyeelEnv = process.env.IONIC_ENV;
var env = !!ouyeelEnv ? ouyeelEnv.trim() : 'dev';
console.log(colors.green(">>>>>> Load Environment : [%s]"), env);
return env;
}

/**
* 文件拷贝
* @returns {{apply}}
*/

function copyFile(){
var copyConfig = [
{
from: path.resolve("./src/main.html"),
to: path.resolve("./www/main.html"),
force: true
}
];
copyConfig.forEach(function(config){
console.log(colors.green(">>>>>> WebPack Copy File : [%s]"), config.from);
});
return new CopyWebpackPlugin(copyConfig);
}

//
//
// 自定义设置环境变量,及打包文件拷贝
//
//
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');
useDefaultConfig[process.env.IONIC_ENV].resolve.alias = {
"@environment": path.resolve(_EnvFilepath(_env()))
};
useDefaultConfig[process.env.IONIC_ENV].plugins.push(copyFile());
module.exports = function () {
return useDefaultConfig;
};

 

这几个文件添加完了之后还有一部很重要的操作,

修改tsconfig.json。在compilerOptions段末尾增加如下内容:

1
2
3
4
"baseUrl": ".",
"paths": {
"@environment": ["src/environments/environment.prod.ts"]
}

修改package.json。在末尾处增加如下内容:

1
2
3
"config": {
"ionic_webpack": "./src/environments/webpack.config.js"
}

需要使用环境变量处,使用如下代码引入即可。

1
import {ENV} from "@app/env";

 

切记,配置多环境之后,启动项目,运行项目,打包项目都需使用多环境,否者会出现报错

1
2
3
4
ionic cordova build android --cross-env IONIC_ENV=dev --debug  //打包安卓
ionic serve --cross-env IONIC_ENV=dev   //网页运行
ionic cordova run android --cross-env IONIC_ENV=dev   //安卓调试
ionic cordova build ios --cross-env IONIC_ENV=dev   //打包ios

多环境配置告一个段落,

但是启动项目的内容太长了怎么办?

ionic cordova build android –cross-env IONIC_ENV=dev –debug

2.项目结构

启动项目太长,那就配置脚本,脚本配置在根目录package.json文件下,scripts节点下

1
2
3
4
5
6
7
8
9
10
"devices": "adb devices",//手机连接检测
"start-build": "npm install && ionic build",//项目已经插件的重装
"dev-serve": "ionic serve --cross-env IONIC_ENV=dev",
"dev-run-android": "ionic cordova run android --cross-env IONIC_ENV=dev",
"dev-run-ios": "ionic cordova build ios --cross-env IONIC_ENV=dev",
"dev-package-android": "ionic cordova build android --cross-env IONIC_ENV=dev --debug",
"prod-serve": "ionic serve --cross-env IONIC_ENV=prod",
"prod-run-android": "ionic cordova run android --cross-env IONIC_ENV=prod",
"prod-run-ios": "ionic cordova build ios --cross-env IONIC_ENV=prod",
"prod-package-android": "ionic cordova build android --cross-env IONIC_ENV=prod--debug"
脚本运行方式
npm run 脚本名
列:npm run start-build

目前只有两个环境,就只需要配置这些了,如果还找不到位置,继续往下看,

项目结构          END


项目分解          ING

接下来一个一个文件来解析,有何用处,一下内容是一个简化版,并非完整版,为了节省位置,已经吧最插件脚本等等一些无用内容删除,

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
"name": "csxm", //项目名称,尽量用英文名,如清楚格式可以更改
"version": "0.0.1", //版本号,这个版本号一定要和同目录下config.xml文件 widget节点属性version的内容一致,如清楚格式可以更改
"author": "Li Deng", //作者,如清楚格式可以更改
"homepage": "http://bbs.vrtow.com/", //主页,如清楚格式可以更改
"private": true, //是否私有,如清楚格式可以更改
"description": "This is my test of ionic.",//描述,如清楚格式可以更改
"scripts": { //脚本文件。此处重点标记,这个位置就是存放脚本,如清楚格式可以更改
},
"dependencies": {//相关依赖,插件,此节点请勿手动更改
},
"devDependencies": {//DEV有关依赖,此节点不建议手动更改
},
"cordova": { //cordova的公共依赖和平台依赖,此节点请勿手动更改
"plugins": {//cordova公共依赖,插件配置等,此节点请勿手动更改
"jpush-phonegap-plugin": { //例如极光推送配置APP_KEY无需使用时可以为空,此节点不建议手动更改
"APP_KEY": "e998**************42c9"
}
},
"platforms": [//平台依赖,此节点请勿手动更改
"ios",
"android"
]
},
"config": {//配置,如不会更改,请勿更改
"ionic_webpack": "./src/environments/webpack.config.js" //ionic的多环境包装必须配
}
}

 

config.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!--?xml version='1.0' encoding='utf-8'?-->
<div>
<div><?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>MyApp</name>
<description>An awesome Ionic/Cordova app.</description>
<author email="ld@vrtow.com" href="http://bbs.vrtow.com/">Li Deng</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<preference name="ScrollEnabled" value="false" />
<platform name="android">
<allow-intent href="market:*" />
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<icon height="57" src="resources/ios/icon/icon.png" width="57" />
<splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
</platform>
<plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
<engine name="android" spec="7.0.0" />
</widget></div>
</div>

这几点是可以改动的,其他的不建议更改
可以修改的内容为,
widget =>version属性(版本号)
=>id属性(包名)
name节点(项目名称)
description节点(描述)
author =>email属性(邮箱)
=>href属性(官网)
author节点(作者)
content =>src属性(项目入口,如非专业人士请勿更改)

1
2
3
4
5
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>MyApp</name>
<description>An awesome Ionic/Cordova app.</description>
<author email="ld@vrtow.com" href="http://bbs.vrtow.com/">Li Deng</author>
<content src="index.html" />

 

接下来介绍一下文件列表

分为必要文件和非必要文件,如下图

上图用红色箭头指向的均为必要文件,,其他文件均为自动生成,

platforms===>平台目录

plugins===>依赖目录(插件)

www===>编译后目录

 

resources===>平台配置

src===>内容

只需要自动src即可,一下是src目录详细讲解

app==>  整个APP核心启动(APP的启动核心,打开APP的初始化加载可以写到这个目录下的app.component.ts文件内)

整个APP的页面,依赖调用,都需要写在app.module.ts,要让他知道。

assets==>APP的静态文件存放地址

pages==>顾名思义,页面存放

index.html==>启动页

完结    END

 

 

,

发表评论