Phonegap学习入门篇

安装Node.js

安装Git

设置代理
公司内网使用时可能需要设置代理
·设置CMD代理

set http_proxy=http://127.0.0.1:8080

set https_proxy=http://127.0.0.1:8080
·设置npm代理

npm config set registry http://registry.npmjs.org

npm config set proxy="http://127.0.0.1:8080"

npm config set https-proxy="http://127.0.0.1:8080"
·设置git代理

git config --global url."https://".insteadOf git://

git config --global http.proxy http://127.0.0.1:8080

·安装phonegap

npm install -g phonegap

·配置Android开发平台

安装最新JDK
http://www.oracle.com

下载Android SDK
http://developer.android.com/sdk/index.html

下载Apache Ant
http://ant.apache.org/bindownload.cgi

配置环境变量

ANDROID_HOME

C:\Program Files\adt-bundle-windows-x86_64-20140321\sdk

ANT_HOME

C:\Program Files\apacheant

JAVA_HOME

C:\Program Files\Java\jdk1.8.0_05

添加Path

%JAVA_HOME%\bin;%ANT_HOME%\bin;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;

创建Android模拟器
在Android SDK的安装目录中，有SDK Manager.exe程序，在命令行中启动该程序。
在Tools->Manage AVDs中，创建一个新的Android模拟器。

第一个phonegap App

$ phonegap create my-app

$ cd my-app

$ phonegap run android

深入开发
上面的App显示的画面，其实就是我们创建的项目中的www目录下的index.html
开发一个跨平台的应用程序，只是需要我们在www目录下，做好web app就可以了。
这里的选择就更多了，可以使用BootStrap, JqueryMobile……
另外，需要再系统学习一下PhoneGap中的如何调用系统API.

方法1：通过CLI安装

模糊搜索插件

$ phonegap plugin search bar code

com.phonegap.plugins.barcodescanner - Scans Barcodes

安装插件

$ phonegap plugin add org.apache.cordova.device

$ phonegap plugin add org.apache.cordova.network-information

$ phonegap plugin add org.apache.cordova.battery-status

$ phonegap plugin add org.apache.cordova.device-motion

$ phonegap plugin add org.apache.cordova.device-orientation

$ phonegap plugin add org.apache.cordova.geolocation

$ phonegap plugin add org.apache.cordova.camera

$ phonegap plugin add org.apache.cordova.media-capture

$ phonegap plugin add org.apache.cordova.media

$ phonegap plugin add org.apache.cordova.file

$ phonegap plugin add org.apache.cordova.file-transfer

$ phonegap plugin add org.apache.cordova.dialogs

$ phonegap plugin add org.apache.cordova.vibration

$ phonegap plugin add org.apache.cordova.contacts

$ phonegap plugin add org.apache.cordova.globalization

$ phonegap plugin add org.apache.cordova.splashscreen

$ phonegap plugin add org.apache.cordova.inappbrowser

$ phonegap plugin add org.apache.cordova.console

查看已安装插件

$ phonegap plugin ls    # or ‘plugin list‘

[ ‘org.apache.cordova.console‘ ]

删除插件

$ phonegap plugin rm org.apache.cordova.console

$ phonegap plugin remove org.apache.cordova.console    # same

同时安装/删除多个插件

$ cordova plugin add org.apache.cordova.console org.apache.cordova.device

$ cordova plugin rm org.apache.cordova.console org.apache.cordova.device

安装指定版本号的插件

$ phonegap plugin add [email protected]

$ phonegap plugin add [email protected]

方法2：通过plugman安装

首先通过npm安装plugman

$ npm install -g plugman

安装插件

$ plugman --platform <ios|amazon-fireos|android|blackberry10|wp7|wp8> --project <directory> --plugin <name|url|path> [--plugins_dir <directory>] [--www <directory>] [--variable <name>=<value> [--variable <name>=<value> ...]]

删除插件

$ plugman --uninstall --platform <ios|amazon-fireos|android|blackberry10|wp7|wp8> --project <directory> --plugin <id> [--www <directory>] [--plugins_dir <directory>]

搜索插件

plugman search <plugin keywords>

更改registry

plugman config set registry <url-to-registry>

plugman config get registry

安装主要插件

cordova-plugin-battery-status plugman --platform --project --plugin org.apache.cordova.battery-status

cordova-plugin-camera plugman --platform --project --plugin org.apache.cordova.camera

cordova-plugin-console plugman --platform --project --plugin org.apache.cordova.console

cordova-plugin-contacts plugman --platform --project --plugin org.apache.cordova.contacts

cordova-plugin-device plugman --platform --project --plugin org.apache.cordova.device

cordova-plugin-device-motion (accelerometer) plugman --platform --project --plugin org.apache.cordova.device-motion

cordova-plugin-device-orientation (compass) plugman --platform --project --plugin org.apache.cordova.device-orientation

cordova-plugin-dialogs plugman --platform --project --plugin org.apache.cordova.dialogs

cordova-plugin-file plugman --platform --project --plugin org.apache.cordova.file

cordova-plugin-file-transfer plugman --platform --project --plugin org.apache.cordova.file-transfer

cordova-plugin-geolocation plugman --platform --project --plugin org.apache.cordova.geolocation

cordova-plugin-globalization plugman --platform --project --plugin org.apache.cordova.globalization

cordova-plugin-inappbrowser plugman --platform --project --plugin org.apache.cordova.inappbrowser

cordova-plugin-media plugman --platform --project --plugin org.apache.cordova.media

cordova-plugin-media-capture plugman --platform --project --plugin org.apache.cordova.media-capture

cordova-plugin-network-information plugman --platform --project --plugin org.apache.cordova.network-information

cordova-plugin-splashscreen plugman --platform --project --plugin org.apache.cordova.splashscreen

cordova-plugin-vibration plugman --platform --project --plugin org.apache.cordova.vibration

例：

plugman --platform android --project HelloWorld --plugin org.apache.cordova.device

如果网络问题导致安装超时，也可以通过本地安装方法安装插件

方法3：通过本地安装

安装命令：phonegap local plugin add /*path of plugin*/

如 >phonegap local plugin add E:\flashair\cordova-plugin-camera

插件可以通过访问git服务器获取:
Camera：https://github.com/apache/cordova-plugin-camera/tree/b76b5ae670bdff4dd4c716e889ab12e049f9c733
FileSystem：https://github.com/apache/cordova-plugin-file
FileTransfer：https://github.com/chanthus/cordova-plugin-file-transfer-gcs/tree/3a89374d9b834196fb0d40a40fecd7d76db3afb9

插件可以通过官方网址查询

全部插件
https://build.phonegap.com/plugins

camera插件
https://build.phonegap.com/plugins/768

FileSystem插件
https://build.phonegap.com/plugins/617

FileTransfer插件
https://build.phonegap.com/plugins/618

phonegap Camera插件的使用教程：
http://blog.csdn.net/aaawqqq/article/details/20125837

安装Camera插件

phonegap plugin add org.apache.cordova.camera

代码部分，请参照Phonegap API文档，或者上面的使用教程

关联插件安装

$ phonegap plugin add org.apache.cordova.camera

$ phonegap plugin add org.apache.cordova.file

$ phonegap plugin add org.apache.cordova.file-transfer

关于camera插件的sample：

HTML部分：

<div id="gallery">

<img id="smallImage">

</div>

<button onclick="getPhoto()">拍照</button>

<button onclick="getFile()">选择文件</button>

JS部分：

/**

* 调用摄像头拍照

*/

function getPhoto() {

navigator.camera.getPicture(captureSuccess, captureFail, {

quality: 50,

destinationType: Camera.DestinationType.FILE_URI,

saveToPhotoAlbum: true,

correctOrientation: true

});

}

// 拍照成功后触发此函数

function captureSuccess(imageURI) {

showPicture(imageURI);

}

// 当有错误发生时触发此函数

function captureFail(error) {

alert(‘Failed because: ‘ + error.code);

}

/**

* 打开相册,供用户选择图片。

*/

function getFile() {

navigator.camera.getPicture(selectSuccess, selectFail, {

quality : 50,

destinationType : Camera.DestinationType.FILE_URI,

sourceType : Camera.PictureSourceType.PHOTOLIBRARY

});

}

// 选择成功后触发此函数

function selectSuccess(fileURI) {

showPicture(fileURI);

}

// 错误发生时触发此函数

function selectFail(error) {

alert("select file fail Code = " + error.code);

}

function showPicture(fileURI) {

var image = new Image();

var targetImage = document.getElementById(‘smallImage‘);

var imageObj = {};

var widthScale = 1, heightScale = 1, scale;

var WIDTH = 600;

var HEIGHT = 400;

image.src = fileURI;

image.onload = function() {

widthScale = image.width / WIDTH;

heightScale = image.height / HEIGHT;

if (widthScale <= 1 && heightScale <= 1) {

imageObj.width = image.width;

imageObj.height = image.height;

} else {

scale = Math.max(widthScale, heightScale);

imageObj.width = image.width / scale;

imageObj.height = image.height / scale;

}

targetImage.width = imageObj.width;

targetImage.height = imageObj.height;

targetImage.src = fileURI;

}

}

关于file-transfer插件的sample：

说明：上传的是上一个例子中id为smallImage的<img>标签中的图片。

HTML：

<button onclick="uploadPic()">传送到服务器</button>

JS：

/**

* 调用file-transfer插件上传图片

*/

function uploadPic() {

var options = new FileUploadOptions();

var imageURI = document.getElementById(‘smallImage‘).src;

options.fileKey="file";

var params = new Object();

params.value1 = "test";

params.value2 = "param";

options.params = params;

var ft = new FileTransfer();

// 通过resolveLocalFileSystemURI可以得到文件的绝对路径。

window.resolveLocalFileSystemURI(imageURI, function(imageURI) {

imageURI = imageURI.toURI();

options.fileName="app_" + imageURI.substr(imageURI.lastIndexOf(‘/‘)+1);

ft.upload(imageURI, encodeURI("http://flashair/upload.cgi"), uploadWin, uploadFail, options);

});

}

//调用成功触发此函数

function uploadWin(r) {

alert("upload successful");

console.log("Code = " + r.responseCode);

console.log("Response = " + r.response);

console.log("Sent = " + r.bytesSent);

}

//调用失败触发此函数

function uploadFail(error) {

alert("An error has occurred: Code = " = error.code);

}

phonegap file-system插件

https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md

HTML5 file-system-api

http://www.html5rocks.com/en/tutorials/file/filesystem/
http://www.w3.org/TR/2011/WD-file-system-api-20110419/

HTML5 file-writer

http://www.w3.org/TR/2012/WD-file-system-api-20120417/#dfn-filewriter

HTML5 文件操作API（中文翻译）

http://blog.csdn.net/fwwdn/article/details/8349657/

关于路径

测试代码：

console.log("cordova.file.applicationDirectory :" + cordova.file.applicationDirectory);

console.log("cordova.file.applicationStorageDirectory :" + cordova.file.applicationStorageDirectory);

console.log("cordova.file.dataDirectory :" + cordova.file.dataDirectory);

console.log("cordova.file.cacheDirectory :" + cordova.file.cacheDirectory);

console.log("cordova.file.externalApplicationStorageDirectory :" + cordova.file.externalApplicationStorageDirectory);

console.log("cordova.file.externalDataDirectory :" + cordova.file.externalDataDirectory);

console.log("cordova.file.externalCacheDirectory :" + cordova.file.externalCacheDirectory);

console.log("cordova.file.externalRootDirectory :" + cordova.file.externalRootDirectory);

在android上的输出：

cordova.file.applicationDirectory                :file:///android_asset/

cordova.file.applicationStorageDirectory         :file:///data/data/com.phonegap.myApp/

cordova.file.dataDirectory                       :file:///data/data/com.phonegap.myApp/files/

cordova.file.cacheDirectory                      :file:///data/data/com.phonegap.myApp/cache/

cordova.file.externalApplicationStorageDirectory :file:///mnt/sdcard/Android/data/com.phonegap.myApp/ cordova.file.externalDataDirectory               :file:///mnt/sdcard/Android/data/com.phonegap.myApp/files/ cordova.file.externalCacheDirectory              :file:///mnt/sdcard/Android/data/com.phonegap.myApp/cache/

cordova.file.externalRootDirectory               :file:///mnt/sdcard/

在file-system的API中可以直接使用上面的变量，得到当前机器的可读写路径。

读取文件

// 错误处理

function errorHandler(e) {

var msg = ‘‘;

switch (e.code) {

case FileError.QUOTA_EXCEEDED_ERR:

msg = ‘QUOTA_EXCEEDED_ERR‘;

break;

case FileError.NOT_FOUND_ERR:

msg = ‘NOT_FOUND_ERR‘;

break;

case FileError.SECURITY_ERR:

msg = ‘SECURITY_ERR‘;

break;

case FileError.INVALID_MODIFICATION_ERR:

msg = ‘INVALID_MODIFICATION_ERR‘;

break;

case FileError.INVALID_STATE_ERR:

msg = ‘INVALID_STATE_ERR‘;

break;

default:

msg = ‘Unknown Error‘;

break;

}

console.log(‘Error: ‘ + msg);

}

// 操作fileEntry

function testReader(fileEntry) {

// Get a File object representing the file,

// then use FileReader to read its contents.

console.log(‘testReader.‘);

fileEntry.file(function (file) {

var reader = new FileReader();

reader.onloadend = function (e) {

console.log(‘read result:‘ + this.result);

var txtArea = Ext.ComponentQuery.query("textareafield")[1];

txtArea.setValue(this.result);

// txtArea.value = this.result;

};

console.log(‘read file:‘ + file.name);

reader.readAsText(file);

}, errorHandler);

}

// 操作file-system

function testFileSystem() {

function onInitFs(fs) {

console.log(‘Opened file system: ‘ + fs.name);

// 使用phonegap提供的全局变量，操作可读写文件。

var file = cordova.file.externalDataDirectory + ‘log.txt‘;

// 使用phonegap提供的resolveLocalFileSystemURL函数，得到该目录的directoryEntry。

resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function (newEntry) {

console.log("Successfully resolved.");

console.log(newEntry.toURL());

// 操作directoryEntry

newEntry.getFile(‘log.txt‘, {

create: true,

exclusive: false

}, function (fileEntry) {

console.log(‘name: ‘ + fileEntry.name);

console.log(‘fullPath: ‘ + fileEntry.fullPath);

console.log(‘isFile: ‘ + fileEntry.isFile);

console.log(‘isDirectory: ‘ + fileEntry.isDirectory);

console.log("Temporary file is at " + fileEntry.toURL());

testReader(fileEntry);

}, errorHandler);

}, console.error("resolveLocalFileSystemURL"));

}

window.requestFileSystem(window.PERSISTENT, 5 * 1024 * 1024 /*5MB*/ , onInitFs, errorHandler);

}

testFileSystem();

写入文件

// 错误处理

function errorHandler(e) {

var msg = ‘‘;

switch (e.code) {

case FileError.QUOTA_EXCEEDED_ERR:

msg = ‘QUOTA_EXCEEDED_ERR‘;

break;

case FileError.NOT_FOUND_ERR:

msg = ‘NOT_FOUND_ERR‘;

break;

case FileError.SECURITY_ERR:

msg = ‘SECURITY_ERR‘;

break;

case FileError.INVALID_MODIFICATION_ERR:

msg = ‘INVALID_MODIFICATION_ERR‘;

break;

case FileError.INVALID_STATE_ERR:

msg = ‘INVALID_STATE_ERR‘;

break;

default:

msg = ‘Unknown Error‘;

break;

}

console.log(‘Error: ‘ + msg);

}

// 操作fileEntry写入文件

function testWriter(fileEntry) {

// Create a FileWriter object for our FileEntry (log.txt).

console.log(‘testWriter.‘);

fileEntry.createWriter(function (fileWriter) {

fileWriter.onwriteend = function (e) {

console.log(‘Write completed.‘);

};

fileWriter.onerror = function (e) {

console.log(‘Write failed: ‘ + e.toString());

};

fileWriter.onwrite = function (evt) {

console.log("writting");

};

var txtArea = Ext.ComponentQuery.query("textareafield")[0];

var text = txtArea.getValue();

console.log(‘Write string: ‘ + text);

fileWriter.write(text);

}, errorHandler);

}

// 操作file-system

function testFileSystem() {

function onInitFs(fs) {

console.log(‘Opened file system: ‘ + fs.name);

console.log("Temporary root is(toURL) at " + fs.root.toURL());

console.log("Temporary root(toInternalURL) is at " + fs.root.toInternalURL());

//** 下面的方法等同于：resolveLocalFileSystemURL(cordova.file.externalDataDirectory)

// fs.root.getDirectory(cordova.file.externalDataDirectory, {

//   create: true,

//   exclusive: false

// }, function (directoryEntry) {

//   console.log(‘getDirectory success!‘);

// }, errorHandler);

var file = cordova.file.externalDataDirectory + ‘log.txt‘;

console.log(‘will create file: ‘ + file);

// 使用phonegap提供的resolveLocalFileSystemURL函数，得到该目录的directoryEntry。

resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function (newEntry) {

console.log("Successfully resolved.");

console.log(newEntry.toURL());

newEntry.getFile(‘log.txt‘, {

create: true,

exclusive: false

}, function (fileEntry) {

console.log(‘name: ‘ + fileEntry.name);

console.log(‘fullPath: ‘ + fileEntry.fullPath);

console.log(‘isFile: ‘ + fileEntry.isFile);

console.log(‘isDirectory: ‘ + fileEntry.isDirectory);

console.log("Temporary file is at " + fileEntry.toURL());

testWriter(fileEntry);

}, errorHandler);

}, console.error("resolveLocalFileSystemURL"));

}

window.requestFileSystem(window.PERSISTENT, 5 * 1024 * 1024 /*5MB*/ , onInitFs, errorHandler);

}

testFileSystem();

phonegap命令

E:\Work\workspace\phonegap>phonegap help

Usage: node C:\Users\gufsh.DL\AppData\Roaming\npm\node_modules\phonegap\bin\phonegap.js [options] [commands]

Description:

PhoneGap command-line tool.

Commands:

create <path>        create a phonegap project

serve                serve a phonegap project

build <platform>     build the project for a specific platform

install <platform>   install the project on for a specific platform

run <platform>       build and install the project for a specific platform

local [command]      development on local system

remote [command]     development in cloud with phonegap/build

platform [command]   update a platform version

plugin [command]     add, remove, and list plugins

help [command]       output usage information

version              output version number

Options:

-d, --verbose        allow verbose output

-v, --version        output version number

-h, --help           output usage information

Platforms:

keyword            | local environment   | remote environment

-------------------|---------------------|-------------------

android            | Yes                 | Yes

ios                | Yes                 | Yes

wp8                | Yes                 | Yes

Blackberry 10      | Yes                 | No

Examples:

$ node C:\Users\gufsh.DL\AppData\Roaming\npm\node_modules\phonegap\bin\phonegap.js help create

$ node C:\Users\gufsh.DL\AppData\Roaming\npm\node_modules\phonegap\bin\phonegap.js help remote build

$ node C:\Users\gufsh.DL\AppData\Roaming\npm\node_modules\phonegap\bin\phonegap.js create path/to/my-app

$ node C:\Users\gufsh.DL\AppData\Roaming\npm\node_modules\phonegap\bin\phonegap.js remote build android

使用例

$ phonegap create my-app

$ cd my-app

$ phonegap run android

phonegap create

Description:

Creates a new application at the provided path.

The application name and package ID can also be customized.

These values are set in the app manifest (www/config.xml) and are used when

creating a native project (platforms/<platform>/).

Options:

--name, -n <name>    application name (default: "Hello World")

--id, -i <package>   package name (default: "com.phonegap.hello-world")

Examples:

phonegap create path/to/my-app

phonegap create path/to/my-app "com.example.app" "My App"

phonegap create path/to/my-app --id "com.example.app" --name "My App"

phonegap安装插件

phonegap plugin add org.apache.cordova.camera org.apache.cordova.file org.apache.cordova.file-transfer

描述

http://docs.sencha.com/cmd/5.x/cordova_phonegap.html

http://www.sencha.com/blog/getting-started-with-sencha-touch-2-build-a-weather-utility-app-part-3/

http://phonegap.com/blog/2013/11/20/SenchaPhoneGap/

http://sensai-touch.com/building-an-ios-and-android-app-with-sencha-touch-2-3-and-cordova/

创建app

$ sencha -sdk /path/to/touch generate app MyApp .

/path/to/touch sencha touch的解压路径.
MyApp 应用的名字
. 应用的路径

或者，

$ cd /path/to/touch

$ sencha -sdk /path/to/touch generate app MyApp E:/path/appName

追加phonegap的支持

添加config.xml到根目录

参照：
https://github.com/phonegap/phonegap-start/blob/master/www/config.xml

创建phonegap支持

//sencha phonegap init [APP_ID] [APP_NAME]

$ sencha phonegap init com.mycompany.MyApp MyApp

建立：phonegap.local.properties

在根目录下追加文件：phonegap.local.properties

# The following are supported platforms for local building (blackberry is version 10)

# android, blackberry, ios, wp7, wp8

#

# The following are supported platforms for remote building (blackberry is version 6)

# android, blackberry, ios, symbian, webos, wp7

# This property can be a single platform or a space delimited list

phonegap.platform=android

# This determines if build is remote (phonegap build) or local

phonegap.build.remote=false

# Username for PhoneGap Build

phonegap.build.remote.username={username}

# Password for PhoneGap Build

phonegap.build.remote.password={password}

运行

sencha app build -run native

编辑APP

修改根目录的
index.html
APP/*
resources/*

PhoneGap Developer app 是一个为 Web 开发者和设计者提供的测试工具，使用 PhoneGap 框架。安装后可连接到你的 PhoneGap 桌面到一个即时视图并在设备上进行测试。

相当于是在移动设备上调试 PhoneGap 应用的工具，不需要每次打包、安装就可以直接在手机上调试 PhoneGap 应用。

为使用这款应用，开发人员需要让他（或她）的开发机上有 PhoneGap CLI，并从 iOS应用商店或Google Play安装这款PhoneGap Developer App。通过在一个特定的移动应用上发出PhoneGap CLI serve指令，能把开发机变成一台服务器，它通过WiFi与一台移动设备上的PhoneGap配对。这台服务器监控代码的变动，并把它们自动地发送到那台设备上，而不用执行本地编译或代码签名。一位Adobe PhoneGap开发人员Raymond Camden说，这样甚至就可以在Windows机器上测试iOS应用了。

PhoneGap Developer App包括PhoneGap核心插件，所以任何人都不必再单独地安装它们。而且，所以任何人都可以扩展它，增加第三方插件。

当前，代码修改时会被发送到这台设备上，应用页面会被重新载入。而且，Safari或 Chrome的远程调试无法用于Developer App，但可以使用 Weinre，Camden。

还有另一种方法能做到类似的事，那就是使用LiveReload加GapReload，它们都是开源的。LiveReload能用于网络应用，能够很神奇地在iOS设备和Windows间传送代码，在下一个版本中还将支持Android，这款工具之父Andrey Tarantsov说。GapReload是一款LiveReload插件，它增加了对PhoneGap或Cordova应用的特殊支持。LiveReload的优点是某些修改不需要重新载入页面。Sebastien Paul说，“如果你修改一个CSS文件，LiveReload不会做整个页面的刷新，它将快速注入新的规则，这真的很快捷。”

使用方法：

官方主页介绍

http://app.phonegap.com/

使用方法

安装桌面版的phonegap

下载并安装APP

com.adobe.phonegap.app.apk(官方版)
PhoneGap-debug.apk(编译版)

通过无线配对app

要运行该APP，必须打开无线，否则可能无法启动（android）

开发机跟手机要在同一无线环境下

在开发机的app根目录运行以下命令。

phonegap serve

在手机端的app上输入开发机的ip地址。

调试代码

只需修改本地的js，html，css代码即可，手机端的app会自动同步最新代码。

Remote Web Inspector

1.Chrome Remote Debugging

2.GapDebug

3.Weinre

Log Messages

console.log(‘...‘)

alert(‘...‘)

Log Messages

在命令行下过滤adb logcat的输出

adb logcat | grep Console #只输出console的log。

adb logcat | grep MyApp #只输出MyApp的log。

adb logcat | grep -i myapp #忽略大小写。

adb logcat | grep --color=auto -i myapp #设置匹配字符串颜色。更多设置请查看 grep 帮助。

因为windows没有grep命令，
所以请先安装grep命令。

下载：http://sourceforge.net/projects/unxutils/

解压到某盘

将以下追加到path
盘符:\UnxUtils\usr\local\wbin

参考：
http://blog.csdn.net/listening_music/article/details/7518990

时间： 2025-01-13 18:49:55

Phonegap学习入门篇的相关文章

sass学习入门篇（三）

这章我们讲“嵌套”,嵌套包括两种:一,选择器嵌套.二是属性的嵌套.一般用选择器嵌套居多 一,选择器嵌套:指的是在一个选择器中嵌套另一个选择器来实现继承.使用&表示父元素选择器 li{ float :left; a{ color:#fff; &:hover{ color:#ddd; } } } 跟css用法一样,没什么说的. 二,属性嵌套,指的是有些属性拥有同一个开始单词,如border-width,border-color都是以border开头 .fshadow{ boder:{ styl

css学习入门篇（1）

1.网页制作 的两大误区:[1].网页用了Table,页面就不标准[2].div标签越多越好. 解释:table是为了存储数据而div是为了架设页面 ,两者有不同的工作职能 . 2.W3C标准:他不是一个标准,而是一系列标准的组合:结构标准(代表语言HTML).表现标准(CSS).动作标准(JavaScript). 3.css控制页面的四种方式: [1]行内样式:<p style=" color: #F00; background: #CCC; font-size: 12px;"

Vue学习笔记入门篇——组件的使用

本文为转载,原文:Vue学习笔记入门篇--组件的使用 组件定义 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件使用 注册 注册一个全局组件,你可以使用 Vue.component(tagName, options).组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用.

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa

现代C++学习笔记之二入门篇2,数据转换

static_cast:    这种强制转换只会在编译时检查. 如果编译器检测到您尝试强制转换完全不兼容的类型,则static_cast会返回错误. 您还可以使用它在基类指针和派生类指针之间强制转换,但是,编译器在无法分辨此类转换在运行时是否是安全的. dynamic_cast: dynamic_cast在运行时检查基类指针和派生类指针之间的强制转换. dynamic_cast 是比 static_cast 更安全的强制类型转换,但运行时检查会带来一些开销. const_cast:    con

Vue学习笔记入门篇——组件的通讯

本文为转载,原文:Vue学习笔记入门篇--组件的通讯 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B.它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的.这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递

Struts学习傻瓜式入门篇

或许有人觉得struts不容易学,似乎里面的一些概念让未接触过的人迷惑,MVC1.MVC2.模式……我写这篇文章是想让从来没有接触过struts的人,能有个简单的入门指引,当然,系统地学习struts是必要的,里面有很多让人心醉的东东,那是后话了. 该案例包括首页,用户登陆.网站向导页面.就这么简单,没有深奥的struts概念,主要靠动手,然后用心体会. WEB Server用tomcat4.到http://jakarta.apache.org下载struts1.1,把zip文 件释放到c:\s

现代C++学习笔记之一入门篇：智能指针（C++ 11）

原始指针:通过new建立的*指针 智能指针:通过智能指针关键字(unique_ptr, shared_ptr ,weak_ptr)建立的指针 在现代 C++ 编程中,标准库包含智能指针,该指针用于确保程序不存在内存和资源泄漏且是异常安全的. 在现代 C++ 中,原始指针仅用于范围有限的小代码块.循环或者性能至关重要且不会混淆所有权的 Helper 函数中. 1 void UseRawPointer() 2 { 3 // Using a raw pointer -- not recommended

Python学习（一）：入门篇：python中的一些数据结构

Python里的一些基本知识点总结 Last Edit 2014/5/2 这里记录的是Python2.7版本的语法特征,部分与Python3.0是不一样的. 一,关于开发环境 在windows下可以直接在官网下载相关的版本,然后默认安装.使用直带的IDLE编辑器. IDLE中两个有用的快捷键: ALT+P:重复历史命令(从最近到最老) ALT+N:   重复历史命令(从最老到最近) IDLE中没有清屏功能. 在cmd中进行: 1,首先要在环境变量的path中添加相关的路径: C:\Python2