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

悠悠 2022-06-06 03:22 209阅读 0赞

为什么写这篇文章呢？因为这是一种构建简单跨平台移动应用的便捷方式。个人认为这比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'
        }
    }

文件地址：

![文件位置][SouthEast]

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

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

cordova  build

7、使用自带签名打包  
这里有一些知识补充（如果不想深入了解，可以跳过）：  
关于签名的方式，可以参考[vue+cordova创建Hybird混合应用（二）—-生成秘钥][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打包后的页面放到这里，然后执行上面的打包命令，最终就会输出一个混合应用了，怎么样，是不是很简单。

[SouthEast]: /images/20220606/13b19de8eb884b0f8f2d83c3a8675253.png
[vue_cordova_Hybird_-]: https://blog.csdn.net/y491887095/article/details/80036738