vue + cordova

本文轉載自查看原文 2016-09-27 21:17 3877 cordova/ vue/ vue.js

1.添加cordova項目

$ cordova create myApp1 org.apache.cordova.myApp myApp2

其中：

myApp1：cordova目錄名
org.apache.cordova.myApp：包名
myApp2：項目名（在config.xml的<name>中查看）

2.在vue中添加cordova的配置

myApp1/www/index.html----->vue/index.html

<html>

<head>

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

<meta name="format-detection" content="telephone=no">

<meta name="msapplication-tap-highlight" content="no">

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

<link rel="stylesheet" type="text/css" href="css/index.css">

<title>Hello World</title>

</head>

<body>

<div class="app">

<h1>Apache Cordova</h1>

<div id="deviceready" class="blink">

<p class="event listening">Connecting to Device</p>

<p class="event received">Device is Ready</p>

</div>

</div>

<script type="text/javascript" src="cordova.js"></script>

<script type="text/javascript" src="js/index.js"></script>

</body>

</html>

<meta>拷貝到vue/index.html中
<script>關於cordova.js的引用拷貝到vue/index.html中

myApp1/www/js/index.js----->vue/vuex/main.js

var app = {

// Application Constructor

initialize: function() {

this.bindEvents();

},

// Bind Event Listeners

//

// Bind any events that are required on startup. Common events are:

// 'load', 'deviceready', 'offline', and 'online'.

bindEvents: function() {

document.addEventListener('deviceready', this.onDeviceReady, false);

},

// deviceready Event Handler

//

// The scope of 'this' is the event. In order to call the 'receivedEvent'

// function, we must explicitly call 'app.receivedEvent(...);'

onDeviceReady: function() {

app.receivedEvent('deviceready');

},

// Update DOM on a Received Event

receivedEvent: function(id) {

var parentElement = document.getElementById(id);

var listeningElement = parentElement.querySelector('.listening');

var receivedElement = parentElement.querySelector('.received');

listeningElement.setAttribute('style', 'display:none;');

receivedElement.setAttribute('style', 'display:block;');

console.log('Received Event: ' + id);

}

};

app.initialize();

1）內容拷貝到vue/src/vuex/main.js中

2）onDeviceReady時啟動app

onDeviceReady: function () {

//app.receivedEvent('deviceready');

appRouter.start(App, 'app')

window.navigator.splashscreen.hide()

}

3.創建android項目

cordova platform add android

4.添加cordova插件

cordova plugin add xxxx

5. 構建 vue項目

npm run build

6.文件轉移

將dist文件夾下的文件，拷貝到cordova/platforms/androd/assets/www目錄下

7.構建cordova項目

cordova目錄下：

cordova build android //構建apk

cordova run android //構建apk，並安裝到連接的設備上

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue使用cordova的大坑！！ vue項目整合cordova vue2+cordova創建app 使用Cordova打包Vue項目 Cordova打包vue項目(Android) 通過cordova將vue項目打包為webapp cordova混合App開發：Cordova+Vue實現Android APP開發 (vue項目配置,打包到cordova) (三) Cordova+vue 混合app開發（一）創建Cordova項目 cordova+vue Cordova的環境搭建（android），真機測試 cordova混合App開發：Cordova+Vue實現Android APP開發 (安裝cordova框架生成app) (二)