vue+cordova创建Hybird混合应用（一）----从安装到输出第一个应用

为什么写这篇文章呢？因为这是一种构建简单跨平台移动应用的便捷方式。个人认为这比React Native简单的多，很容易上手。解决小型应用绰绰有余。

1、安装java

2、安装node.js

4、安装android studio

安装android studio用360软件管家会非常快。

记得安装各种sdk。如果打开android studio的时候很慢，很可能是gradle加载不出来，可以更改gradle的地址。

提前下载好gradle-3.3-all.zip，放在本地服务器。

#Fri Oct 20 09:42:17 CST 2017
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-3.3-all.zip

将这个包换成本地的包
distributionUrl=http\://localhost/gradle-3.3-all.zip

3、安装cordova

npm install -g cordova

cordova create MyApp

cd MyApp cordova platform add android

5、修改gradel中maven仓库的地址
因为原有的maven地址是国外的，访问速度非常慢，所以建议替换成阿里云的maven仓库，访问速度会快很多。

buildscript {
    repositories {
        maven{url "http://maven.aliyun.com/nexus/content/group/public/"}
        mavenLocal()
        maven {url "http://maven.aliyun.com/nexus/content/groups/public/"}
        jcenter()
    }

    // Switch the Android Gradle plugin version requirement depending on the
    // installed version of Gradle. This dependency is documented at
    // http://tools.android.com/tech-docs/new-build-system/version-compatibility
    // and https://issues.apache.org/jira/browse/CB-8143
    dependencies {
        classpath 'com.android.tools.build:gradle:2.2.3'
    }
}

文件地址：

文件位置

6、cordova初始化安装所有依赖库

在生成应用的文件夹中，有一个package.json的文件。里面记录了各种cordova的插件，如果要安装这些插件，可以通过

cordova  build

7、使用自带签名打包
这里有一些知识补充（如果不想深入了解，可以跳过）：
关于签名的方式，可以参考vue+cordova创建Hybird混合应用（二）—-生成秘钥

一般生成的应用都需要签名。签名其实是数字签名，用于证明这是谁开发的产品。安卓中这个签名文件是以keystore结尾的文件。那么，我们没有生成签名文件，也可以打包啊，这是为什么呢？其实这是由于android studio自带了keystore，如果你没有自己的签名文件，那么打包时，系统就会采用默认的key。
此外，我们一般会有两个key，debugkey，releasekey，用于保证不会把测试包发到用户手机上。因为用不同的key打包相同的文件，系统会认为你这是两个应用。

在根路径下创建一个build.json的文件，然后在里面写入如下的内容。然后系统会根据打包命令的不同，选择不同的key。

{
  "android": {
    "debug": {
      "keystore": "./key/xxx1.0.debug.keystore",
      "storePassword": "xxx",
      "alias": "xxx1.0.debug",
      "password" : "xxx",
      "keystoreType": ""
    },
    "release": {
      "keystore": "./key/xxx1.0.keystore",
      "storePassword": "xxx",
      "alias": "xxx1.0",
      "password" : "xxx",
      "keystoreType": ""
    }
  }
}

8、打包

有了上面的内容后，打包就会根据不同的参数去调用不同的keystore打包。

debug版本：

cordova build android  --debug

release版本：

cordova build android  --release

此外，这时的cordova会自动安装各种所需的插件。

9、构建自己的应用
cordova目录下面有www目录，我们可以将webpack打包后的页面放到这里，然后执行上面的打包命令，最终就会输出一个混合应用了，怎么样，是不是很简单。

vue+cordova创建Hybird混合应用（一）----从安装到输出第一个应用

猜你喜欢