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打包後的頁面放到這裡,然後執行上面的打包命令,最終就會輸出一個混合應用了,怎麼樣,是不是很簡單。