Cordova使用（vue）

時間 2019-11-16

標籤 cordova 使用 vue 欄目 Cordova 简体版

原文原文鏈接

概覽

Cordovahtml

Cordova 可以將你的 HTML/JS 代碼打包在一個原生的容器中運行，而且能夠調用系統的各種軟硬件接口（JavaScript API）。咱們將這種架構稱之爲 hybrid app , 得益於這種架構，咱們能將前端代碼跨平臺運行，而且獲得接近原生應用的系統特性。最終發佈到各大應用市場，包括蘋果的 App Store。前端
Cordova 插件vue

Cordova 經過插件的生態系統爲開發者提供了普遍的軟硬件接口支持，諸如文件讀寫、推送通知、解壓縮、通信錄等等。這種方式保證了在開發過程當中按需引入相應的功能插件，同時也加快了插件的更新維護，減小代碼冗餘。Cordova 插件使用 CLI 的方式通過 NPM 管理依賴並安裝，十分方便。java
Cross-walk Projectnode

Cross-walk 是英特爾開發的一款爲HTML應用提供運行時環境的開源項目，它基於最新的 Chromium 核心開發，能夠提供最新的 Web 特性和一致的兼容性。隨着 Cordova Android 4.0.0+ 引入了對嵌入式 webview 的支持，如今你能夠方便地在你的 Cordova 應用上使用 Crosswalk 的 webview。經過使用 Crosswalk 的 webview 插件，開發者能夠享用遠程調試的功能，前沿的 HTML5 特性，例如WebGL, WebAudio 和 WebRTC，以及在包括 Android 4.0 Ice Cream Sandwich(ICS) 在內的 Android 設備上性能的顯著提高。android
Vue.jswebpack

Vue.js 是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，Vue 徹底有能力驅動採用單文件組件和Vue 生態系統支持的庫開發的複雜單頁應用。基於 Vue 框架，開發單頁面的 hybrid app 將會變的很是高效。ios
CodePushgit

CodePush 是微軟提供的一項雲服務，它爲開發者提供了直接向用戶推送熱更新 (Hot-Code-Update) 的軟件支持和 CDN 分發網絡。CodePush 爲 Cordova 開發者提供了插件，咱們能夠快速地植入應用中。它提供的特性包括：版本管理、灰度更新、緊急回滾、增量更新 (Diff) 等等。它的 CDN 是世界上最大的 CDN 服務商 Akamai 提供的，穩定性和速度可想而知。github

將來可能收費

初始化開發環境

Nodejs 版本更新 使用 node -v && npm -v 檢查版本，若是低於 v6.0.0 和 v3.0.0，請使用 n 工具更新：sudo npm install n -g && n stable
NPM 包的源管理 實際使用中 npm 的源服務器位於美國，速度較慢，因此咱們用阿里巴巴的 npm 源鏡像替代默認源：sudo npm install nrm -g && nrm use taobao，此操做將會將源地址設定爲：registry.npm.taobao.org/ ，服務器位於阿里雲，速度飛快。
安裝 Xcode （OS X 選裝） 前往 Mac App Store 下載最新版 Xcode，並安裝 Command Line Tools，便於在 iOS 模擬器中調試。
安裝 Android Studio（必裝） 前往 Android Studio 官網下載 Android Studio 並安裝 SDK 24+，根據引導提示便可安裝完成。缺乏這一步將不能成功 build 和 run 項目。
新建 Cordova 項目 簡單地按照官方文檔新建項目：文檔連接
一點小麻煩 當你執行到 cordova platform add android 這一步時，可能會遇到卡在 > Configuring > 0/2 projects 長達幾個小時之久。在此須要對 cordova platform add android 這個命令的原理作一個解釋，它作了如下幾件事：
- 建立 Android 項目框架和文件結構
- 首次執行下載 gradle (專門用來管理 Android 項目 maven 包的工具）
- 配置 build.gradle 構建腳本
- 下載項目須要的 maven 包
- 清理冗餘的 Cordova Lib
- 構建項目
惋惜的是，gradle 彷佛在下載 https 協議的時候有一些 bug，致使 maven 包不能成功下載。這時候須要一些奇技淫巧：
- 找到你的 gradle 目錄，通常在 ~/.gradle/wrapper/dists/gradle-2.14.1-all/53l0mv9mggp9q5m2ip574m21oh/gradle-2.14.1/ 下。
- 修改 src/core/org/gradle/api/artifacts/ArtifactRepositoryContainer.java 文件，把 MAVEN_CENTRAL_URL 變量修改成 repo1.maven.org/maven2
- 修改 src/core/org/gradle/api/internal/artifacts/dsl/DefaultRepositoryHandler.java 文件，把 BINTRAY_JCENTER_URL 變量修改成 jcenter.bintray.com/
- 從新構建 Android 項目，cordova platform remove android && cordova platform add android，大功告成。
運行示例項目 下面咱們嘗試在模擬器和安卓真機中調試：
- iOS：cordova run ios 等待編譯完成後會自動打開 iOS 模擬器
- Android：cordova run android 或 cordova build android 後在 yourApp/platforms/android/build/outputs/apk 目錄中找到打包好的 apk 進行真機安裝並調試。
- iOS 的真機調試須要開發者賬號並註冊開發設備，在此不詳述。

使用 Cordova 插件引入 Cross-walk webview

在上一步中咱們成功地讓示例 html 文件跑在了 Cordova 環境中。但在實際開發中，會遇到 Android 系統版本落後，原生 webview 性能差兼容性差的問題，因此咱們要用 Cross-walk 替換原生的 Android webview 來運行咱們的項目。 Cross-walk 開發社區已經爲咱們準備好了 Cordova 插件，只須要運行： cordova plugin add cordova-plugin-crosswalk-webview@latest —save 在這裏須要說明的是，必須加上 @latest 後綴，安裝 2.2.0+ 版本，不然會遇到 #XWALK-7422 的問題。成功安裝後再次 cordova build android ，你會發現輸出了兩個 apk 文件，一個對應 arm 平臺，一個對應 x86 平臺，體積相較原來的文件增長了 20Mb 左右，多出來的體積即是 crosswalk-webview 的 runtime。你也能夠在項目的 config.xml 中設置：

<plugin name="cordova-plugin-crosswalk-webview" spec="~2.2.0">
    <variable name="XWALK_VERSION" value="22+" />
    <variable name="XWALK_LITEVERSION" value="xwalk_core_library_canary:17+" />
    <variable name="XWALK_COMMANDLINE" value="--disable-pull-to-refresh-effect" />
    <variable name="XWALK_MODE" value="embedded" />
    <variable name="XWALK_MULTIPLEAPK" value="true" />
</plugin>

複製代碼

把 XWALK_MULTIPLEAPK 的 value 設置爲 false，便可打包出一個整合兩個平臺的 apk 包，固然，體積會暴增至 40Mb+。

使用 Chrome 調試 Cross-walk webview 中的項目

因爲 Cross-walk 基於 Chromium，天生便具備了 Chrome 遠程調試的功能。電腦鏈接 Android 手機並開啓 USB 調試模式，打開你的 Cordova 項目後，在 Chrome 瀏覽器地址欄中輸入 chrome://inspect ，選擇你的設備，便可打開遠程控制檯，真機調試變得十分方便。Vue Devtool 一樣能夠在此使用。

iOS 的小優化將 UIWebView 替換爲 WKWebView

WKWebView 是蘋果在 iOS 8 中引入的新組件，目的是給出一個新的高性能的 Web View 解決方案，擺脫過去 UIWebView 的老舊笨重特別是內存佔用量巨大的問題（打開一個示例項目，WKWebView 佔用23M，而 UIWebView 佔用85M）。在這裏咱們將使用 WKWebView 替換 Cordova 默認的 UIWebView： cordova plugin add cordova-plugin-wkwebview-engine@latest --save 並在 config.xml 的 <platform name="ios"> 中添加：

<feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>

複製代碼

使用 Cordova 插件的 JavaScript API 調用系統原生接口

可在插件搜索頁搜索須要的插件，以Camera插件連接插件爲例，在命令行進入項目所在文件夾，輸入cordova plugin add cordova-plugin-camera --save 而後在頁面的js部分先要添加：

document.addEventListener("deviceready", func, false);

複製代碼

全部的插件都須要在func函數以後執行。 Camera的方法都定義在navigator對象上，Navigator對象包含有關瀏覽器的信息，全部瀏覽器都支持，在文件任何js部分調用navigator.xxx方法便可。但並非全部插件的方法都定義到navigator對象上，根據具體的插件文檔而定。例如極光推送的插件插件連接的方法都定義的window對象上。以後的插件各類方法的使用能夠參照對應插件的文檔使用。

Cordova-plugin-whitelist 和 CSP 安全策略

出於安全考慮，Cordova 4.0 以上環境中，須要安裝cordova-plugin-whitelist插件並對 config.xml 中的 <access origin="your-policy" /> 標籤和 index.html 中的 META 標籤作必定設置，防止出現共享 Webview 模式下的跨站攻擊等安全問題。運行：

cordova plugin add cordova-plugin-whitelist --save

複製代碼

並編輯 config.xml：

<!--如下是開發環境配置，不對來源作任何限制，生產打包時須要設置-->
    <access origin="*" />
    <allow-intent href="*" />
    <allow-navigation href="*" />

複製代碼

在 index.html 中添加：

<!--一樣，生產打包時須要嚴格設置-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: cdvfile: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; font-src * data:; img-src *; script-src *;">

複製代碼

CSP（Content-Security-Policy）的詳細設置：

指令：
指令值：

Vue.js 的分片打包模式

在大型應用中，咱們可能須要將應用拆分爲多個小模塊，按需從服務器下載。Vue.js 容許將組件定義爲一個工廠函數，動態地解析組件的定義。工廠函數接收一個 resolve 回調，在收到從服務器下載的組件定義時調用。在定義router的時候，能夠給component屬性一個工廠函數，require.ensure是commonjs異步加載方法，中括號中能夠爲空，這裏寫上至關於先加載，但沒執行，下面的require纔是執行。 require.ensure語法告訴 webpack，自動將編譯後的代碼分割成不一樣的塊。在命令行打包npm run build以後，在dist/static/js文件夾下會多出一個js文件和map文件。

routes:[{
    path:'/example',component:resolve => require.ensure(['../components/example.vue'], () => {
        resolve(require('../views/example.vue'))
    })
}】

複製代碼

若是你在require.ensure的函數中引用了兩個以上的模塊，好比某個路由下的全部組件都打包在同個異步中，須要提供require.ensure第三個參數做爲的名稱,這時webpack會把它們打包在一塊兒，好比：

require.ensure([], function(require){
    var list = require('./list');
    list.show();
    var edit = require('./edit');
    edit.display();
}, 'all');

複製代碼

list.js和edit.js將會被打包成一個文件，並命名爲all.js。若是不但願打包在一塊兒，只能寫兩個require.ensure分別引用這兩個文件。注意若是但願生成的文件是咱們給的Chunk，須要改一下webpack的配置，將build/webpack.prod.conf.js的第19行修改以下：

chunkFilename: utils.assetsPath('js/[name].js')

複製代碼

添加 CodePush 熱更新功能

爲了實現本次 App 架構中的單個組件發佈和熱更新功能，引進了微軟開發的 CodePush 工具。

運行：

cordova plugin add cordova-plugin-code-push@latest --save

複製代碼

安裝 code-push 命令行並註冊賬號（僅開發試用，正式部署會有專門的賬號）：

sudo npm install -g code-push-cli
code-push register //你能夠經過 Github 或者 微軟賬號登陸
code-push login //登陸後會在本地生成 session 文件用來驗證你的發佈權限

複製代碼

建立 app：

code-push app add <appName>

複製代碼

這一步會生成 key，將 staging 中的 key 複製到下一步使用。

在 app 的 config.xml 中配置你的部署 key：

<platform name="android">
    <preference name="CodePushDeploymentKey" value="YOUR-ANDROID-DEPLOYMENT-KEY" />
</platform>
<platform name="ios">
    <preference name="CodePushDeploymentKey" value="YOUR-IOS-DEPLOYMENT-KEY" />
</platform>

複製代碼

在你的 index.html 中容許安全策略，添加 codepush.azurewebsites.net 的域名：

<meta http-equiv="Content-Security-Policy" content="default-src https://codepush.azurewebsites.net ... /> 複製代碼

添加代碼更新邏輯：

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    onDeviceReady: function() {
        const downloadProgress = (progress) => { console.log(`Downloaded ${progress.receivedBytes} of ${progress.totalBytes}`); }
        codePush.sync( null, {updateDialog: true, installMode:InstallMode.IMMEDIATE, mandatoryInstallMode: InstallMode.IMMEDIATE}, downloadProgress );
    }
};
app.initialize();

複製代碼

這時從新打包 app，並運行。

驗證發佈代碼功能

修改你的任意代碼後，運行：

code-push release-cordova <appName> <platform>

code-push release-cordova MyApp-ios ios
code-push release-cordova MyApp-Android android

複製代碼

關閉 app 從新打開並測試更新是否成功

自定義插件

在實際項目中可能須要本身開發一些特殊的插件。這須要涉及到一些原生開發的知識。這裏以開發iOS的插件爲例。

首先，在任意目錄下建立一個插件目錄，如在desktop新建一個文件夾rayeye-TestPlugin，而後在com.anasit.callnative目錄下新建src、www兩個目錄，src中存放的是對應平臺的插件代碼，www存放的是插件的js代碼，再新建一個plugin.xml文件，寫入的是插件的相關配置信息，本例只開發了iOS平臺，因此在src下再新建ios目錄。

在www文件夾下建立testPlugin.js：

var argscheck = require('cordova/argscheck'),
exec = require('cordova/exec');
var testPlugin = function(successCallback, errorCallback, options) {
argscheck.checkArgs('fFO', 'navigator.testPlugin', arguments);
options = options || {};
var getValue = argscheck.getValue;
var a = getValue(options.a, 'aaa');
var b = getValue(options.b, 'bbb');
var args = [a, b];
exec(successCallback, errorCallback,"testPlugin","test",args);
};
module.exports = testPlugin;

複製代碼

iOS native部分，在src/ios文件夾下新建 IosPlugin.h 和 IosPlugin.m文件：

//  IosPlugin.h
#import <Cordova/CDV.h>
@interface IosPlugin : CDVPlugin
- (void)test:(CDVInvokedUrlCommand*)command;
@end

複製代碼

//  IosPlugin.m
#import "IosPlugin.h"
#import <Cordova/CDV.h>
@implementation IosPlugin
- (void)test:(CDVInvokedUrlCommand *)command{
NSString *s1 = [NSString stringWithFormat:@"%@", [command.arguments objectAtIndex:0]];
NSString *s2 = [NSString stringWithFormat:@"%@", [command.arguments objectAtIndex:1]];
UIAlertView *alertview = [[UIAlertView alloc] initWithTitle:s1 message:s2 delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"肯定", nil];
[alertview show];
}
@end

複製代碼

編輯plugin.xml：

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
    id="rayeye-TestPlugin"
    version="0.0.1">
    <name>rayeye-TestPlugin</name>
    <description>Call Native Plugin</description>
    <license>Apache 2.0</license>
    <keywords>call native</keywords>
    <js-module name="testPlugin" src="www/testPlugin.js">
        <clobbers target="window.testPlugin"/>
    </js-module>
    <platform name="ios">
        <config-file target="config.xml" parent="/*">
            <feature name="testPlugin">
                <param name="ios-package" value="IosPlugin" />
            </feature>
        </config-file>

        <header-file src="src/ios/IosPlugin.h" />
        <source-file src="src/ios/IosPlugin.m" />
    </platform>
</plugin>

複製代碼

在項目根目錄下打開命令行，輸入cordova plugin add rayeye-TestPlugin(注：根據本身設置的路徑寫)，按下回車後，插件就會自動安裝到項目根目錄下的plugins目錄中。
最後在頁面文件中調用window.testPlugin(successcallback, errorcallback, {a: "111",b: "222"});便可彈出一個原生的彈框。

Android 生產打包

從Android Studio的"File"->"Open"打開你的cordova項目下的/platforms/android。
選擇"Build"->"Generate Signed APK"，點擊"next"。
此處選擇一個已有的簽名，或者新建一個。點擊"next"。
此處選擇release生產版本，點擊finish完成。

iOS 生產打包

前提是在蘋果開發者網developer.apple.com/account/站生成了須要的appid,證書和profile文件，不累述。
在Display Name 修改應用名稱。
用Xcode打開工程，注意是.xcworkspace(白顏色)的工程，不是.xcodeproj(藍顏色)的工程。
在Resources/Images.xcassets裏修改啓動圖片和應用圖標，AppIcon是對應平臺的圖標，LaunchImage是啓動圖片。
選擇「Product」->"Edit Scheme..."，在「Build Configuration」中選擇「Release」,單擊"Close"。
選擇菜單欄中的"Product"->"Archive"，選擇剛剛的工程，選擇「Export...」，選擇第一個(Save for iOS App Store Deployment)，點擊Export。而後會生成一個文件夾，裏面是ipa包。
打開 Application Loader，選擇「交付您的應用程序」，選取以前生成的ipa包，而後下一步。
去itunesconnect.apple.com/WebObjects/…完成app相關信息的填寫

極光推送的使用

插件地址github.com/jpush/jpush…
安裝:cordova plugin add jpush-phonegap-plugin --variable API_KEY=your_jpush_appkey

document.addEventListener("deviceready", onDeviceReady, false); document.addEventListener("jpush.openNotification", onOpenNotification, false);//點擊通知啓動或喚醒應用程序時會出發該事件 document.addEventListener("jpush.receiveNotification", onReceiveNotification, false);//應用程序處於前臺時收到推送會觸發該事件 document.addEventListener("jpush.backgroundNotification", onBackgroundNotification, false);//後臺收到推送,不知道何用，處在後臺還能幹嗎嗎 document.addEventListener("jpush.receiveMessage", onReceiveMessage, false);//收到自定義消息