美文网首页
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 混合开发

    1,业务场景 现在我使用angular6开发了一个工程。现在业务需求,希望程序能够以app的形式发布到市场上。为了...

  • 混合开发

    来源于:IOS-Hybrid(混合开发) 那些设计思想及逻辑部署

  • 混合开发

    http://ask.dcloud.net.cn/docs/组件:http://dev.dcloud.net.cn...

  • 混合开发

    混合开发 框架对比 https://www.jianshu.com/p/8e99b4aed464 混合开发-最全常...

  • 混合开发

    概述 随着移动开发的发展,互联网公司也是层出不穷,有些公司迫于竞争,想要更迅速的更省成本的进行开发,就不再满足 A...

  • Flutter与已有iOS工程混合开发

    Flutter与已有iOS工程混合开发 混合开发参考:Add-Flutter-to-existing-apps本文...

  • 一篇彻底搞懂----混合移动App干货

    一 - 混合移动App干货—详细解读 引言 本文会详细的讲解什么是混合App开发、混合App开发概念、原理、区别、...

  • 新鲜热乎的2017年Hyper App开发姿势

    APICloud混合APP开发入门指引 技术选型 APICloud 混合App开发技术之一 Bootstrap 4...

  • Flutter 与 Native 混合开发

    前言 本文主要介绍 Flutter 与 Android 的混合开发,关于 Flutter 与 iOS 的混合开发后...

  • 移动开发技术选型

    1、小程序验证原型商业模式 2、Hybrid app 混合开发 3、react native 混合开发

网友评论

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

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