1,业务场景
现在我使用angular6开发了一个工程。现在业务需求,希望程序能够以app的形式发布到市场上。为了方便就,直接将现有的程序使用cordova进行封装。
2,具体操作
2.1,配置cordova的开发环境
操作系统:window 10
androidstudio:android-studio-ide-173.4819257-windows.exe
2.2,创建一个cordova工程
安装cordova:npm install -g cordova
创建工程:cordova create hello com.example.helloHelloWorld
(其中hello是工程文件夹的名字,com.example.hello是android需要的id,HelloWorld是应用的名字。)
进入这个工程,添加需要平台:
cd hello
cordova platform add android cordova
platform ls
检测环境是不是配置对了:cordova requirements
3,angular6项目相关配置
3.1,新加环境配置文件夹environment.hybrid.ts
export const environment = {
production: true,
hybrid: true,
baseUrl: 'http://sparkdev.qimooc.net'
};
3.2,在angular.json文件中如下配置:
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
"hybrid": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hybrid.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
3.3,拦截器中添加配置
3.4,启动:ng serve learner-mobile --configuration=hybrid
3.5,编译:ng build learner-mobile --base-href /www/ --prod --configuration=hybrid
4,合并
把angualr6编译好的文件放到cordova项目目录www目录下。
在index.html文件里面添加
<script type="text/javascript" src="cordova.js"></script>
将index.html里面的base修改成:
<base href=".">
打开android模拟器,运行命令
ng build
cordova run android
5,打包
cordova build android
网友评论