1. 程式人生 > >vue+cordova建立Hybird混合應用(一)----從安裝到輸出第一個應用

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  

一般生成的應用都需要簽名。簽名其實是數字簽名,用於證明這是誰開發的產品。安卓中這個簽名檔案是以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打包後的頁面放到這裡,然後執行上面的打包命令,最終就會輸出一個混合應用了,怎麼樣,是不是很簡單。