cordova 一个将web应用程序封装成app的框架(1)，前端网页开发前景

我们来分析一下文档借结构

hook文件夹是我们的钩子文件夹，这俩主要用来放钩子的

platforms文件夹放的都是一些平台信息，你添加一个平台的话，都会在这个文件夹中生成相应的文件。

plugins文件主要存放插件的。

www文件下主要

这里我暂时不说，等我说config.xml文件的时候来说。

config.xml文件

我来细说一下config.xml文件。这个文件是全局配置文件。

这里的name ,description,author显然可以知道他意思的.分别是项目的名字，描述，以及作者。

这个标签标示的是打开cordova应用程序最先呈现的页面就是index.html页面

标签标示的是已经安装的插件。

等详细信息可以参考官网

好，重点来了，我来说说如何将将远端web应用程序引入到cordova中，，具体操有一下几点

第一步：

将上面这句话添加到config.xml文件中放在name标签上面。

这里href中的地址就是你的远端首页面的地址。

第二步

var app = {

// Application Constructor

initialize: function() {

this.bindEvents();

},

bindEvents: function() {

document.addEventListener(‘deviceready’, this.onDeviceReady, false);

},

onDeviceReady: function() {

app.receivedEvent(‘deviceready’);

// Here, we redirect to the web site.

var targetUrl = “https://cordovahostedweb-starter.azurewebsites.net/”;

var bkpLink = document.getElementById(“bkpLink”);

bkpLink.setAttribute(“href”, targetUrl);

bkpLink.text = targetUrl;

window.location.replace(targetUrl);

},

// Note: This code is taken from the Cordova CLI template.

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);

}