美文网首页
angular6+cordova 混合开发

angular6+cordova 混合开发

作者: zy_Judy | 来源:发表于2018-11-21 14:12 被阅读0次

    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

    相关文章

      网友评论

          本文标题:angular6+cordova 混合开发

          本文链接:https://www.haomeiwen.com/subject/vuwqqqtx.html