欢迎各位兄弟 发布技术文章

这里的技术是共享的

phoneGap 移动应用开发基础 宁皓网

课程介绍:

移动设备的本地应用就是能直接安装在设备上的应用程序,本地应用的好处就是可以利用设备的原生的一些功能,比如文件系统,定位,加速计,相机,通讯录,通知中心... PhoneGap 可以用来开发这样的应用。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

使用 PhoneGap 我们可以用已经熟悉的 HTML ,CSS,还有 JavaScript …. 去针对移动设备来开发应用 … 我们可以使用 HTML 和 CSS 来设计应用的界面 …

用 JavaScript 跟设备去沟通 .. 来调用设备的一些原生的功能 … 比如 相机,加速仪,罗盘,全球定位等等 …

我们只需要使用这些统一的 JavaScript 接口 … 然后再配合不同的平台的开发环境 … 去把应用编译成可以在不同平台上使用的应用程序 … 比如 iOS 平台 … Android 平台 … 还有 Windotws Phone 等等 …
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

想要为 Android 平台的设备去开发应用,我们需要先安装一下 Android SDK … SDK 的意思就是 Software Development Kit … 软件开发的工具包 … Android 的开发环境支持多种平台,你可以在 Windows ,Mac ,或者 Linux 平台上使用 Android SDK 去开发 Android 应用程序 …

先打开这个地址 … http://developer.android.com/sdk   
(翻墙才打得开)

这个 Android SDK 里面包含了很多东西 ,Eclipse 软件,Android SDK ,Android 模拟器等等 …

点击页面右边的这个下载按钮,可以下载 Android SDK …

它会判断我们当前使用的系统,下载对应版本的 SDK …

如果你想选择下载的话 .. 可以点击页面下方的这个 Download for Other Platforms ,在这里,你可以选择 Windows 版,Mac 版,或者 Linux 版的 SDK ....

这里我已经事先下载好了 … 找到下载下来的压缩包 … 先解压一下 ..

里面会有两个文件夹 … eclipse … 还有 sdk …

我们可以重命名一下解压以后的这个文件夹 … 命名为 Android … 然后找一个熟悉的地方 … 把它放在里面 … 这里我们把它放在 应用程序 里面 …

PATH

然后在应用程序里,再打开 Android … SDK …

以后面的视频里,我们会使用 PhoneGap 的命令行工具去创建应用项目,去编译或者安装应用到设备上 … 想要让这个命令行工具能去处理 Android 平台的应用 …

我们要做这个 SDK 目录下面的 tools 还有 platform-tools 这两个目录的路径包含到系统的 PATH 环境里面 …

Mac 用户可以去编辑一下 .bash_profile 文件 …

先打开终端工具 … 然后输入 sudo vim ~/.bash_profile … 使用 vim 工具去编辑一下当前用户的 .bash_profile 文件 …

如果这个文件不存在的话,会去创建一个 …

按一上小 i 键 … 输入 export PATH=${PATH}:

冒号的后面,可以再去输入 tools 还有 platform-tools 这两个目录的位置 … 是在

export PATH=${PATH}:/Applications/Android/sdk/tools:/Applications/Android/sdk/platform-tools

 

再输入一个冒号,去添加 tools 目录的位置 ….

ESC 退出编辑模式 … 输入一个冒号 … wq ,保存并退出 …

我输的是 export PATH=$PATH:/Applications/Android/sdk/tools:/Applications/Android/sdk/platform-tools   保存后重启终端ok

下面我们就可以使用 tools 还有 platform-tools 里面的一些命令行工具了 …

验证一下,可以输入 android … 回车 … 这样可以打开 Android SDK 的管理工具 …. 如果能打开就说明已经可以用终端工具去执行 android 相关的命令了 …
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 

录这个视频的时候,Android 最新的版本是 4.3 … 这里显示,我们已经安装了 4.3 版本的 SDK … 还有设备的模拟器 …

不过我在使用 4.3 测试的时候,PhoneGap 总是不能正常的编译好 Android 应用 … 解决的办法是可以安装 Android 4.2 …

找到 Android 4.2 … 然后再勾选一下它下面的 SDK Platform … 还有 ARM EABI v7a System Image …

再点击右下角的 Install pactages 去安装 ..

但是国内用户这样安装可能会有问题 … 很多时候我们连接不上 Google 的下载服务器 …

所以,我们需要手工去安装这个 4.2 版的 SDK … 在这个地址里,你可以下载到所需要的东西 ….

先找到 android-17_r01.zip … 解压一下 … 把这个文件夹命名为 android-17

再打开 SDK 所在的目录 … 应用程序 .. Android … SDK … 把刚才解压得到的文件夹放在 platforms 这个目录的下面 …

再找到 sysimg_armv7a-17_r02.zip 这个文件 … 解压 ..

回到 SDK 目录 … 打开 system-images … 在这里新建一个文件夹 … 命名为 android-17 …

再把刚才解压得到的东西放在这个新建的目录下面 …

然后关掉 Android SDK 管理工具 … 再重新打开它 …

你会发现 … 我们已经安装好了 Android 4.2 ….
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

想要使用 PhoneGap 的命令行工具去把应用安装到 Android 的模拟器,我们还得去配置一下 …
终端命令行输入 android avd

打开 应用程序 .. Android … eclipse 下面的 … Eclipse

打开 Window 菜单 .. 选择 Android Virtual Device Manager … Android 虚拟设备管理工具 ..

点击 New 去新建一个虚拟设备 …

打开这个 Device 列表 … 在这里,你可以选择一个要虚拟的设备 … 比如这个 Nexus One …

AVD Name … 就是虚拟设备的名称 … 叫它 Nexus One ..

Target,目标系统 … 选择 Android 4.2.2 ….

下面还有一些选项,可以进一步去配置这个虚拟的 Android 设备 …

Skin是模拟器显示的屏幕大小,具体参数为:WVGA:800*480QVGA:320*240VGA:640*480HVGA:480*320WQVGA400:240*400WQVGA432:240*432WVGA800:800*480WVGA854:854*480或者也可以选择Resolution,自由设置模拟器屏幕大小。Hardware(AVD所需要的特殊设备)中的值:Abstracted LCDdensity(分辨率)其值是由选择的Skin自动设置的等等。

Back Camera … 可以模拟手机的相机功能 … 默认是 none ,没有相机 .. 如果选择 Emulated ,会给我们虚拟一个相机的功能 ..

如果选择 Webcam .. 会把电脑的摄影头虚拟成设备上的相机 … 这里我们可以选择 Emulated ..

Memory Options 是跟设备内存相关的设置 …

Internal Storage .. 是设备的存储空间的大小 … SD Card 可以给设备添加一个虚拟的 SD 卡 …

在这里,我们可以指定这个 SD 卡的大小 … 设置成 1000 MB …

然后点击 OK …

现在,我们就配置好了开发 Android 应用需要的所有的工具 …
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Android SDK 支持在多种平台上运行,这个视频我们来看一下在 Windows 平台上安装 Android SDK … 先打开 developer.android.com/sdk …

在这里我们可以下载在不同平台上运行的 Android SDK … 点击页面右边的下载按钮 … 它可以自动判断我们当前使用的系统,然后下载对应版本的 SDK …

在这里需要先勾选一下同意许可协议 … 然后再选择操作系统的位数 … 这里我们选择 64 位的 SDK …

点击 Download 按钮 … 就可以下载了 …

不过这里我提前下载好了 … 找到下载下来的 SDK … 先解压一下 …. 把它放在桌面上 …

解压以后重命名一下这个目录 … 修改成 Android … 可以再打开看一下 …

这里面有 eclipse 开发软件 … 还有 Android sdk … 另外还有一个可以管理 SDK 的工具 …

我们可以把它解压以后的 SDK 软件包 … 放在 C 盘的根目录下面 …

环境变量

下面我们要去配置一下系统的环境,让我们的系统可以执行 android 相关的命令 …

在资源管理器上面 … 右键点击 计算机 …

点击边栏上面的 高级系统设置 …

在 高级 这个选项卡里面 … 打开 环境变量 …

然后在 系统变量 这个区域里面 … 选中 Path 变量 … 点击 编辑 …

在这个 变量值 这里面 … 我们需要指定 Android SDK 软件包里的 sdk 目录下面的 tools 还有 platform-tools 这两个目录的路径 …

先输入一个 ; 号分隔一下 …

然后输入 C:\Android\sdk\ … 在这里面 … 我们可以找到 tools 还有 platform-tools …

回过来 … 再输入 tools … 下面再去指定 platform-tools 的路径 …

同样是在 C:\Android\sdk\ … platform-tools

输入好以后,点击确定 …. 确定 … 再确定

测试

下面我们可以打开命令提示符工具… 去测试一下 …. 搜索 cmd …

输入 android …. 回来 …

这里出现提示 … 说我们的系统里面没有安装 java …

在下面的视频里我们再去看一下 … 


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

下面我们还需要去安装两个东西 … Java 的开发工具包,还有 ant … 在这个地址里,我们可以找到 Java 的开发工具包 …

打开跟我们的系统相匹配的软件版本 … 64 位的 Windows 就下载 Windows x64 … 32 位的,去下载 Windows x86 …

然后打开这个地址 http://ant.apache.org/bindownload.cgi … 可以下载到 ant …. 点击这个链接就行了 …

这里我提前都已经下载好了 …

先去安装一下 Java 的开发工具包 …

下一步 … 再点击 下一步 … 完成以后,点击 关闭 …

下面我们需要去复制一个工具到 JRE 目录里面 …

找到 Java 开发工具包的安装目录 …

C:\Program Files\java … 打开 jdk 这个目录 … 找开 lib …

在这个目录里面 … 我们可以复制一下 tools.jar 这个文件 ….

再回到 java 目录 …

打开 jre 目录 … 打开 lib … 把刚才复制的文件粘贴到这里 …

安装 ant

下面我们再去安装 ant ….

先解压一下 …

修改一下目录的名称 … 改成 ant … 我们可以把它放在 c 盘根目录下面的 Android 这个目录里面 …

为了让系统能执行 ant 相关的命令 … 我们还得去添加一个环境变量 …

右键点击 计算机 … 属性 … 高级系统设置 …

点击 环境变量 … 在 系统变量 区域里面 … 选中 Path … 然后再编辑一下 …

在 变量值 这里,我们需要指定一下 ant 所在的目录下面的 bin 目录 …

在结尾处 … 注意先要加上一个分号分隔一下 …

然后再输入 C:\Android\ant\bin .. 确定 … .

下面我们可以使用 命令提示符 … 去验证一下 ….

输入 Android …. 你会看到, 这样会打开 Android SDK 管理器 …. 说明我们的 Windows 系统上的 Android 开发环境就已经配置好了 …


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

如果你想为 iOS 设备去开发应用程序,比如 iPhone, iPad … 我们只需要去安装一个 Xcode 就行了 … 它里面包含了用来开发 iOS 应用的工具 … 另外还有 iOS 设备的模拟器 …

使用 Xcode 不但可以开发 iOS 应用程序,还可以开发 Mac 电脑上的应用程序 .. 不过如果你想使用 Xcode 的话,你需要有一台 Mac 电脑 …

在这个地址里,可以去下载 Xcode … https://developer.apple.com/downloads/index.action

或者我们可以直接打开 App Store …

然后搜索一下 Xcode … 找到以后 … 点击打开 … 然后 安装 … Xcode 是免费的软件 … 

配置

这里我已经提前安装好了 Xcode … 安装好以后,我们还得再去简单的配置一下 … 打开 Xcode …

打开 Xcode 菜单 … Preferences … 偏好设置 …

这里我们需要安装一下这个 Command Line Tools … 命令行的工具 … 这样我们就可以通过 PhoneGap 的命令行工具 … 去使用 Xocde 编译安装应用了 …

另外,最新版的 Xcode 里面有 iOS 设备虚拟器是 iOS 7.0

… 如果你需要其它版本的 iOS 模拟器 .. 可以在这里,选择去下载 …


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

使用 PhoneGap 的命令行工具我们去创建,运行,或者去部署应用程序,可以为不同的平台去编译应用程序。

这个命令行工具可以让我们更有效率。想要使用 PhoneGap 的命令行工具,我们首先要去安装和配置不同平台的 SDK,比如你想开发 iOS 应用,需要先安装 Xcode,想要开发 Android 应用,需要安装 ADT 。

在前面视频里我们已经介绍了安装这些 SDK,然后我们需要安装 node.js ,这样我们就可以使用 npm 命令来安装或者更新 PhoneGap 了。

安装 node.js

先打开 http://nodejs.org/, 点击 Download ,你可以根据自己的系统选择对应的 node.js ,或者,我们也可以直接点击 Install ,这样会自动判断我们当前使用的系统,下载对应的 node.js 。

这里我已经提前下载好了,打开下载下来的 node.js ,双击安装 …


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 

安装了 node.js 以后,我们就可以系统的命令行工具去执行 npm 命令了。npm 可以打包,管理,安装,发布 node 程序,我们需要用到它来安装 PhoneGap。

Mac 用户可以使用终端工具 … 然后输入 sudo npm install -g phonegap

sudo 表示我们要用 root ,也就是超级管理员用户执行命令 … 然后使用 npm install ,后面加上一个 -g … 表示在全局范围内安装 … 最后是要安装的东西,这里就是 phonegap ….

PhoneGap 命令

安装完成以后,我们就可以使用 phonegap 命令了。下面可以先试一下 …. 输入 phonegap 回车 …

会返回 phonegap 命令的帮助的信息 … 证明我们已经成功的安装了 phonegap …

输入 phonegap -v … v 就是英文 version 的简称,这行命令可以查看当前安装的 phonegap 的版本 …

想要升级 phonegap ,可以使用 sudo npm update -g phonegap …


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

02_03) 想在 Windows 系统上安装 PhoneGap .. 并且使用 PhoneGap 的命令行工具去创建和管理应用项目 … 我们需要先安装一下 node …

先打开 nodejs.org … 然后点击 INSTALL … 下载完成以后再去安装一下 node …

点击 next 下一步 … 同意许可协议 .. next … 下一步 …

指定安装目录 … 再次点击 next … 然后点击 Install 进行安装 ..

完成以后,我们可以去搜索一下 node … 这样可以找到 Node.js 的命令提示符工具 …

在这里输入 npm install -g phonegap … 这行命令可以去自动的安装 phonegap …

(据网上的人说 ,开不开翻墙都无所谓)
 

 

npm install --production

笔者遇到这样一个错误:

npm http GET https://registry.npmjs.org/grunt-contrib-jshint
npm ERR! not found: git
npm ERR!
npm ERR! Failed using git.
npm ERR! This is most likely not a problem with npm itself.
npm ERR! Please check if you have git installed and in your PATH.

错误原因是没找到git程序,解决方法是在Download Git (http://git-scm.com/downloads)下载windows版本的git,将git.exe 所在目录加入path就解决了。(应该是要安装它吧) (如果停顿下来 就ctrl+c 重来,多试几次)(还是报错的不能安装的话 就先执行 npm config set registry http://registry.npmjs.org/ 再执行 npm install -g phonegap) 费尽了牛劲,终于安装好了phonegap

(提示:据网上的人说 ,开不开翻墙都无所谓,但我最好还是翻下墙吧)

如果没什么问题的话,就可以运行了:

 

完成以后 … 再输入 phonegap … 回车 …

这里会出现 phonegap 命令的帮助的信息 ….

输入 phonegap -v …

可以查看当前我们安装的 phonegap 的版本 ….


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

创建一个 PhoneGap 应用我们可以使用 phonegap create 命令 … 打开终端工具 … 然后先进入到你想存储应用的目录下面 …

cd desktop … 进入到当前用户的桌面上 … cd 命令的意思就是改变工作目录 …

再输入 phonegap creatHe hello net.ninghao.hello HelloWorld …

phonegap create 可以创建应用程序 … 后面加上存放这个应用项目的目录 … hello … 这样会在我的桌面上创建一个叫 hello 的目录… 里面会存放我的应用项目所需求的一些文件 …

后面我们可以加上一个应用的识别符,想要发行你的应用,比如放在 app store 上去卖的话,需要指定应用的识别符,这个识别符必须是唯一的。一般我们可以使用反向域名的命名方式 ….

比如我的网站域名是 ninghao.net … 这里我们倒过来,把域名的后缀放在前面 net.ninghao … 后面加上一个点 … 然后再加上应用的名称 …

这样这个应用的识别符应该在全世界范围内都是唯一的了。

输入空格 … 再定义一下这个应用的显示的名称 …

应用的识别符还有这个应用的显示的名称,我们可以在应用的 config.xml 配置文件里去修改 ….

预览

下面回到桌面上 … 在这里,你可以找到刚才我们用命令创建的应用所在的目录 … 就是这个 hello …

在这个目录下面,还包含一些其它的目录 …. www 这个目录是应用程序主目录,里面有应用程序的主页… index.html ..

我们可以使用浏览器打开这个页面看一下 …. 页面上已经有一些内容了,这个页面上使用的样式表,js 文件 ,还有图像,会放在各自的目录下面 ...

我们可以基于这个目录里的东西去开发自己的应用。在后面的视频里再详细的去了解一下。

plugins 这个目录下会存放的是我们安装的 phonegap 的一些插件 …. 比如你想使用设备的定位功能,你需要安装 Geolocation 插件,安装以后,插件会放在这个目录的下面。

目前这里是空的,因为我们还没有安装 phonegap 的插件 ….

platforms 下面会存放针对不同平台编译的应用 … 在下面的视频里我们去使用 phonegap 的 build 命令去编译一个 iOS 应用。  
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

这个视频我们可以去试一下,使用 PhoneGap 的命令行工具,创建一个应用,再把它编译成指定平台的应用 … 然后再把它安装在 iOS 模拟器上去运行一下 …

Build


phonegap build
phonegap install
phonegap run

打开终端工具 … Windows 用户可以使用命令提示符工具 …

先进入到应用所在的目录 …. 我们的应用是在桌面上的 hello 这个目录的下面 … 输入 cd desktop/hello ….

phonegap build ios

(windows平台下不能使用它?可以 在线编译 可以装mac 虚拟机 或黑mac操作系统)(双系统,如果你没有经验建议慎行,装黑苹果是个麻烦的事,虚拟机可以随便折腾)

输入 phonegap build… 后面加上要编译的平台的名称 …. ios … 回车 …

这样 phonegap 会基于之前我们使用 create 命令创建的简单的应用,也就是在 hello 这个目录下面的 www 这个目录里的应用,把它编译成一个 ios 平台上的应用 ….

回到桌面,打开应用所在的目录 …. 在 platforms 这个目录的下面 … 现在会多出一个 ios 目录 … 这个目录下面就是编译好的 ios 平台下面的应用 …

phonegap 的 build 命令会为我们生成一些针对 ios 平台所需求的文件 ….

这个 HelloWorld.xcodeproj 是一个 xcode 项目文件 … 双击可以打开这个项目文件 …

打开以后,可以使用 Xcode 工具来调试我们的应用。 点击这个 build and run 按钮,可以编译应用并且安装的 iOS 的模拟器上 ….

(#关闭 iOS 模拟器)

或者我们也可以使用命令把应用安装在模拟器上 ….

回到终端工具 …. 输入 phonegap install …. 后面加上要安装到的平台的名字….

仅输入 phonegap install 打印出来的结果里就会有提示

phonegap install ios ….

这里我们也可以使用 --device 参数,把应用安装在设备上,或者使用 --emulator ,把应用安装在设备的模拟器上。如果不单独指定这些参数的话…

这个命令会先试着把应用安装在设备上,不过这里我并没有连接任何的设备到我的电脑上,所以,找不到具体的设备, phonegap 会继续尝试,去把应用安装在指定平台的模拟器上 ….

不过这里会提示说 … 没找到 ios-sim … 它是一个小插件 … 可以让我们使用命令行控制 iOS 设备的模拟器 …

安装这个小插件 … 可以使用 homebrew ..

先打开这个地址 ... http://brew.sh/index_zh-cn.html

复制一下安装 homebrew 的这行代码  

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"

粘贴到终端工具里面 … 回来 … 输入密码 … 这行命令会自动去下载并且初建 homebrew …

然后我们可以使用 brew 命令去安装 ios-sim …

brew install ios-sim

再输入 phonegap install --emulator ios …

会把应用安装在 ios 设备的模拟器上 …

run

这里我们先使用 build 把应用编译成可以在指定平台上运行的应用,然后使用 install 命令把应用安装在设备或者设备的模拟器上。

另外 phonegap 还提供了一个 run 命令,可以把编译和安装这两个动作结合在一起 …

比如使用 phonegap run ios …

phonegap 会把应用先编译成可以在 ios 平台上使用的应用,然后再把它安装在设备上 …

首先它会去试着把应用安装到连接的真正的设备上 … 如果找不到设备的话 … 会把应用安装到设备的模拟器上 …

这里我们也可以通过参数,去指定让它安装到的那个目标 …

比如安装到真正的设备上,我们可以使用 phonegap run --device ios … device 就是设备的意思 … 前面要加上两个连字符 …

如果想直接安装到模拟器上的话 … 可以把这个 device 改成 emulator 它的后面是平台的名称 …

你会看到 … 命令会直接把应用安装到指定平台的模拟器上 ... 


 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

想要使用 PhoneGap 的一些设备级别的功能,比如加速计,罗盘,访问设备本地的文件,创建联系人,定位等等,这些我们都需要去安装 PhoneGap 的插件。

phonegap local plugin add
phonegap local plugin remove
phonegap local plugin list

这些插件提供了使用设备的这些原生组件的一个接口,你甚至可以自己去创建 PhoneGap 插件。

我们可以使用 phonegap local plugin add ,这个命令来安装想要使用的插件 …

安装 console 插件

先进入到应用项目的目录里面 … cd desktop/hello ….

然后输入 phonegap local plugin add …. 后面要加上插件的 Repository … 也就是插件的代码库的地址 … 在 PhoneGap 的文档网站上,你可以找到这些插件库的地址,还有详细的介绍。

这里我们先安装一个 console ,控制台插件,这个插件可以帮助我们调试应用,它可以在 SDK 工具上显示我们指定要输出到控制台上的信息。 在后面的视频里我们再去详细的了解一下这个插件的使用。

phonegap local plugin addhttps://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

安装好的插件会存放在应用目录下面的 plugins 这个目录里面 …

默认情况下这个插件可以用在所有的平台上,iOS,Android 等等,想要单独为某个平台安装插件,你需要做一些其它的手工配置,具体的做法可以参考 phonegap 的文档 ….

查看安装的插件

查看已经安装的插件,可以使用 phonegap local plugin list …. 先要确定当前的工具目录是在项目所在的目录里面 …

这里你会看到一个插件 …. org.apache.cordova.console …. 最后的这个 .console 可以确定这是什么插件 …. 也就是我们刚才安装的控制台插件 …

移除安装的插件

移除安装好的插件,可以使用 phonegap local plugin remove …. remove 就是移除的意思 … 后面要加上想要移除的插件的名称 …

复制一下 … 粘贴 …. 按下回车 …

提示成功以后,我们可以再次使用 phonegap local plugin list …. 来查看一下 ….

现在,已经移除掉了刚才安装的插件 ….


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

想要使用 PhoneGap 的一些设备级别的功能,比如加速计,罗盘,访问设备本地的文件,创建联系人,定位等等,这些我们都需要去安装 PhoneGap 的插件。

这些插件提供了使用设备的这些原生组件的一个接口,你甚至可以自己去创建 PhoneGap 插件。

phonegap local plugin add
phonegap local plugin remove
phonegap local plugin list

我们可以使用 phonegap local plugin add ,这个命令来安装想要使用的插件 …

安装 console 插件

先进入到应用项目的目录里面 … cd desktop/hello ….

然 后输入 phonegap local plugin add …. 后面要加上插件的 Repository … 也就是插件的代码库的地址 … 在 PhoneGap 的文档网站上( http://docs.phonegap.com ),你可以找到这些插件库的地址,还有详细的介绍。

这里我们先安装一个 console ,控制台插件,这个插件可以帮助我们调试应用,它可以在 SDK 工具上显示我们指定要输出到控制台上的信息。 在后面的视频里我们再去详细的了解一下这个插件的使用。

phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git

安装好的插件会存放在应用目录下面的 plugins 这个目录里面 …

默认情况下这个插件可以用在所有的平台上,iOS,Android 等等,想要单独为某个平台安装插件,你需要做一些其它的手工配置,具体的做法可以参考 phonegap 的文档 ….

查看安装的插件

查看已经安装的插件,可以使用 phonegap local plugin list …. 先要确定当前的工具目录是在项目所在的目录里面 …

这里你会看到一个插件 …. org.apache.cordova.console …. 最后的这个 .console 可以确定这是什么插件 …. 也就是我们刚才安装的控制台插件 …

移除安装的插件

移除安装好的插件,可以使用 phonegap local plugin remove …. remove 就是移除的意思 … 后面要加上想要移除的插件的名称 …

复制一下 … 粘贴 …. 按下回车 …

提示成功以后,我们可以再次使用 phonegap local plugin list …. 来查看一下 ….

现在,已经移除掉了刚才安装的插件 ….


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

使用 phonegap create 命令可以创建一个应用程序的骨架或者叫模板,我们可以基于这个简单的应用去开发自己的应用程序。这个视频我们先来了解一下这个应用的模板。

打开应用项目所在的目录 …. www 这个目录里面就是创建的应用程序的主体内容, index.html 就是应用的主页 …. 我们可以使用文本编辑软件打开这个文件来看一下 …

这里我用的是 brackets … 所以可以打开整个目录 …. 在桌面上,打开 hello 下面的 www 这个目录 … 然后打开里面的 index.html …

这其实就是一个简单的 html 网页,用的是 html5 的文档规范 …

先看一下这两个特殊的 meta 标签 …

format-detection

这个 format-detection meta 标签,指定了 telephone=no … 比如在 iOS 设备上的 safari 浏览器,会检测页面上出现的可能是电话号码的数字 … 这样会生成一个链接,用户点击这个链接可以呼叫这个电话号码 …

不过有时候浏览器可能会把不是电话的数字转换成这个呼叫的链接 … 这个 meta 标签的作用就是关掉了浏览器的这个自动检测页面上电话号码的功能。

viewport

下面还有一个 viewport 可视窗口的这个 meta 标签,在 《 响应式网页设计 》这个课程里,我们详细的介绍了这个 viewport 标签 …

user-scalable=no 就是不让用户可以缩放页面,initial-scale=1 是设置页面的初始的缩放比例为 1 倍,也就是不去缩放页面,maximum-scale=1 设置要最大的缩放级别是 1,minimum-scale=1 设置的是最小的缩放级别也是1… width=device-width 设置了可视窗口的宽度等于设备的宽度。

height=device-height 的意思是把可视窗口的高度设置成跟设备的高度一样。

最后这个 target-densitydpi=device-dpi 很多浏览器已经不支持它了,所以,我们可以去掉它。

其它

在页头部分,链接了一个自定义的样式表 index.css,放在了 css 这个目录的下面。

底部

再看一下页面的底部,在这里,嵌入了 phonegap.js ,另外还有一个自定义的 js 文件,index.js ,我们可以把应用需要的 js 代码放在这个文件里面。

最 后,执行 app.initialize(); … app 是在 index.js 里面定义的一个对象 …. initialize() 是 app 的一个函数,或者叫 method … 合起来的意思就是去执行 app 这个对象里的 initialize() 这个函数。

下面的视频里,我们再详细的看一下在 index.js 文件里定义的 app 对象。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

下面我们再打开 index.js ,去看一下这个 app 对象里的东西。
在 E:\hello\www\js 目录里

这个文件里定义了一个叫 app 的对象,你可以看到,它里面的东西都放在了一组大括号里面 …

最开始就是在 index.html 里面执行的 initialize …. 它是一个函数,函数在对象里叫做 method ,方法,可以理解成对象的动作。

在这里,它调用了这个对象的另一个动作,bindEvents(),它前面的 this 表示当前这个 app 对象 。

也就是当页面加载以后,会执行 app 的 initialize ,initialize 要做的事情就是去调用 bindEvents() …

在 下面定义了 bindEvents() 要做的事情,这里,用了一个 addEventListener() ,绑定了一个 deviceready 事件 … 这个事件会在 phonegap 准备好以后触发执行一次,这样我们就可以安全的去使用 phoneGap 里的东西了 ….

当发生这个事件以后,会调用 onDeviceReady 这个函数 …. onDeviceReady 做的事情在下面已经定义好了,就是去调用 receivedEvent() …

它前面的 app 表示 app 这个对象… 这里我们并没有使用 this 来引用当前这个对象,因为在这里 this 表示的是 deviceready 这个事件 ….

这个函数里传递了一个参数,参数的值是 deviceready …

在下面定义了 receivedEvent … 这允许我们传递一个参数叫 id ….

在它的里面,先定义了一个变量叫 parentElement … 它的值是在页面上找到的包含指定 id 的元素 … 在 onDeviceReady 里,我们调用这个函数的时候,传递的参数值是 deviceready …

所以,在这里,就是找到页面上包含 deviceready 这个 id 的元素 …. 给它起个名字,叫 parentElement ….

第二行,又定义了一个变量,叫 listeningElement …. 它的值是,在 parentElement 里找到的 deviceready 这个 id 下面的 .listening 这个类的元素。

第三行的 receivedElement 的值是 在 parentElement 里找到的 deviceready 这个 id 下面的 .received 这个类的元素 …

然后把 listeningElement 里面找到的那个元素上设置一个 style 属性,属性的值是 display:none ,也就是把元素隐藏起来。

同样在 receivedElement 里面找到的那个元素上设置一个 style 属性,属性的值是 display:block …. 就是把元素显示出来 ….

回到 index.html ,我们再解释一下 receivedEvent ,也就是在 deviceready 这个事件发生以后所做的事情 …

先是找到 deviceready 这个 id 所在的元素 … 再找到它下面的 .listening 这个类,使用 display:none ,把它隐藏起来 …

再找到 received 这个类所在的元素… 使用 display:block ,把它显示出来 ….

最后会在控制台上显示一个 接收到的事件 … 后面加上这个 id 参数 …

模拟器

下面我们可以使用设备的模拟器运行一下这个简单的应用 ….

打开终端 …. 进入到应用所在的目录 … cd desktop/hello …

输入命令 phonegap run ios …. 这样可以先编译应用,然后再把它安装在 ios 模拟器上 ….

完成以后会自动打开这个 HelloWorld 这个应用 …

这个应用上会显示 设备已经准备好了 …. 说明 deviceready 这个事件已经发生了 …

safari

下面我们可以使用本地电脑上的 safari 浏览器的开发者工具查看一下 ….

打开 safari …. 找到 开发 菜单 … 如果没有显示这个菜单,可以先打开 safari - 偏好设置 … 找到 高级 选项卡 …

勾选一下 在菜单栏中显示“开发”菜单 …

然后在 开发 菜单里,找到 iPhone Simulator …. 选择 HelloWorld 下面的 index.html

在这里,你可以看到 … .listening 这个类所在的元素上面,会有一个 display:none …. .received 这个类上,会添加一个 display:block …

 看完03-02
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

使用 Weinre ,我们可以在本地电脑的浏览器来调试在模拟器上的应用。Weinre 是基于 Chrome Developer Tools ,所在用起来跟 Chrome 浏览器的开发者工具差不多。

下面我们可以先去安装一个 Weinre ,然后再看一下怎么样使用它来调试应用。

先安装一下 node.js ,在之前的视频里我们已经安装好了 … 然后打开 终端工具 …

我们使用 npm 来安装 Weinre … 输入 sudo npm -g install weinre

安装好以后,再输入 weinre ,可以启动 weinre 服务 … 提示成功以后 … 打开浏览器 ..

输入 localhost:8080 … 这样可以打开 weinre 服务在本地电脑上的站点 …

这里我们可以把 localhost 改成本地电脑的调试的 ip 地址 … 也就是 127.0.0.1 ….

这个 debug client user interface …. 就是调试应用的界面 … 点击后面的链接 … 可以在新的标签里打开这个链接 ….

你会发现,它跟 Chrome 浏览器的开发者工具长的差不多 …

再回到 weinre 站点的页面上 … 我们需要在应用的网页上嵌入一个 Target Script …. 这样才能使用 weinre 调试应用…

复制一下这行代码 ….<script src="http://127.0.0.1/target/target-script-min.js#anonymous"></script>

再打开我们的应用的主页 … 也就是应用项目目录下的 www 这个目录下面的 index.html ….

把复制的代码粘贴到页面上 …. 然后保存一下…

Feature

另外我们还需要去配置一下应用的 config.xml … 这个文件在应用项目目录下面的 www 这个目录里面。

在这个文件里,需要输入一组 feature 标签 ….
<feature name="debug-server" required="true">
  <param name="domain" value="http://127.0.0.1" />
  <param name="key" value="net.ninghao.hello" />
</feature>
 

它的作用就是启用 debug-server ,调试服务器 …. 然后指定一下调度服务器的 ip 地址 …. 这里我们设置成了 127.0.0.1 ,表示使用本地电脑上的调试服务器。

在它的下面,我们需要再指定一下这个应用的 key ,也就是应用的唯一的标识符 ….

保存 ….

编译并安装

回到终端工具,新建一个窗口 … 进入到应用目录 … 再去重新编译并安装一下 iOS 的应用 … phonegap run ios …

预览

如果一切正常的话,在调度的界面上,Targets 下面的文字会变成绿色的。

打开 Elements 选项卡 … 可以看到应用的页面上的代码 … 你可以像调试一般的网页一样 … 修改页面上的元素 … 还有元素上应用的样式等等 ….


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

PhoneGap 的 Events API 也就是事件 API,它可以监测设备上发生的事情。比如暂停,恢复,在线,下线,电量低,增大音量等等 ,这些动作都会触发对应的事件 ...

事件有许多
暂停:pause
恢复:resume
在线:online
离线:offline
电量低:betterylow
增大音量:volumeupbutton

 

根据这些发生的事情,你可以去设计一下让设备要执行的动作。 比如当应用暂停使用的时候,会触发 pause 事件,你可能想要让应用去保存一下用户所做的事情,

当用户再次回到这个应用的时候,会触发 resume 事件,你可以根据这个事件再去做一些事情。

下面我们先来看一下这两个事件。

pause 与 resume 暂停与恢复

先打开应用的 js 目录下面的 index.js 这个脚本文件,在创建这个应用的时候,PhoneGap 在这个文件里已经用到了事件 API 里的一个事件,就是这个 deviceready … 当 phonegap 准备好以后,会触发这个事件。

一般我们可以把其它的要做的事件放在当这个事件发生以后要做的事里面。也就是这个 onDeviceReady ….

在这里,可以使用 document.addEventListener() 去添加一个事件的监听器 …

// 添加 pause 事件的监听器
document.addEventListener('pause', app.onPause, false);

document 是事件发生的目标, addEventListener … 括号 … 最后是一个分号 …. 括号里可以指定 addEventListener 的三个参数 …

第一个参数是事件的类型 … 这里我们使用 pause 这个事件,就是应用在暂停的时候会发生的事件 … 第二个参数是 listener ,也就是监听器 …

你可以把它理解成,事件发生以后,要做的事情的名称,在下面,我们可以去具体的定义要执行的动作 …

这里设置成 app.onPause … app 是这个文件时定义的 app 对象,后面的 onPause 是我们自己定义的名称 …

最后是 useCapture 参数,这个参数可以控制事件的传播的方式 … 在以后的 JavaScript 课程里,我们会详细的介绍一下 JavaScript 里面的事件 ..

这个参数一般我们都可以设置成 false …

onPause

下面我们再去定义发生 pause 事件以后要做的事情 … 在这个 onDeviceReady 的下面,我们去定义 onPause …

先输入一段注释 … // 当发生 pause 事件以后要做的事

onPause: function(){},

onPause 冒号 … 后面输入一个 function() 再加上一组大括号 … 表示这个 onPause 是一个函数 …. 在大括号里,可以定义具体要做的事 …

onPause: function(){
console.log('应用被暂停了');
},

这里我们使用一个 console.log ,在控制台上输出一些文字,这样当我们在控制台上看到这些文字,就证明这个 pause 事件已经发生了,并且执行了 onPause 里面定义的东西….

resume

用类似的方法,我们可以再去添加一个 resume 事件的监听器,去监听恢复事件。

复制一下这个添加监听器的代码 … 把 pause 改成 resume … app.onPause 改成 app.onResume …

再去定义 onResume …. 可以基于这个 onPause 去修改一下 …

// 当发生 resume 事件以后要做的事
onResume: function(){
console.log('应用已经恢复');
}


shift+command+h 暂停应用快捷键  可是我这边不起作用啊
我这边好像是 shift+ctrl+win徽标+alt+h shift+win徽标+alt+h
   shift+win徽标+h(应该是它)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 

online 和 offline 是设备在连接到互联网和断开互联网的时候发生的事件 …. 下面我们来看一下这两个事件的使用。

在应用的 index.js 文件里,可以添加这两个事件的监听器 … 可以把它们放在 deviceready 发生以后要做的事情里面,这样做会更安全一些。

可以复制前面视频里添加的这个事件的监听器 …

// 添加 online 事件的监听器
document.addEventListener('online', app.onOnline, false);

添加下注释 … 要监听的事件的类型 … 我们先看一下 online 这个事件 … 再添加一下事件发生以后,要做的事情 … 改成 onOnline … 这个名字你可以随便定义 …

然后再去定义这个 onOnline …

// 当发生 online 事件以后要做的事
onOnline: function(){
console.log('已经连接到互联网');
},

用类似的方法,我们再去添加一个 offline 事件的监听器,当断开互联网时触发的事件。

// 添加 offline 事件的监听器
document.addEventListener('offline', app.onOffline, false);

// 当发生 offline 事件以后要做的事
onOffline: function() {
console.log('掉线了!');
},

修改好以后,保存一下文件。

安装 Connection 插件

要想让这个 online 与 offline 事件能够正常的工作,我们还需要去安装一个 Connection 插件,这两个事件,需要用到 Connection 插件里提供的一些信息。

打开终端工具,进入到应用项目的目录里面 … 然后使用 phonegap local plugin add 命令去添加这个插件 … phonegap local plugin add 后加 repos的地址或名字

phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information

(  phonegap local plugin add org.apache.cordova.network-information  )

安装好以后,再使用 phonegap run ios … 重新编译并安装一下修改之后的应用 …

( phonegap run ios --emulator )

测试

打开 weinre 的调试界面 … 选择 console 这个选项卡 … 因为我们现在用的是设备的模拟器,所以只要断开电脑的互联网连接,这个模拟器也会断开互联网连接。

这样就会触发 offline 这个事件 …

你会看到,在控制台上,会显示 掉线了! …

再连接到互联网 …. 控制台上会显示 已经连接到互联网 …


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Connection API 可以判断设备的联网类型,比如 WIFI ,蜂窝移动网络等等。你可以根据用户的联网的类型,去让应用去做相应的事情。

想要使用这个功能,我们需要先安装一下 network-information 这个插件。在前面介绍 online 和 offline 事件的时候,我们已经安装了这个插件。

用命令可以判断一下应用是否已经安装了这个插件。

打开终端,进入到应用项目的目录 .. cd desktop/hello

然后用 phonegap local plugin list … 这个命令可以查看项目已经安装的插件 … 在这里,你可以看到 org.apache.cordova.network-information

证明已经安装好了这个插件。

下面打开应用的 index.js ….

我们先去定义一个检查连接的函数 … checkConnection: function() {},

这个名称你可以根据自己的需求去命令它。

在这个函数里,我们可以使用 connection.type 来检查当前的网络连接的类型 …. 前面我们要加上一个 navigator ,因为 connection.type 是在 navigator 下面。

navigator.connection.type;

我们可以把检查到的联网类型输出到控制台上面。

console.log('网络连接的类型是:' + navigator.connection.type);

下面我们可以决定在什么情况下执行这个检查联网类型的动作。 你可以把它放在 deviceready 事件发生的时候,这样这个检查联网类型的动作在 phonegap 准备好以后,会被执行一次。

不过这里我们可以把它放在 resume 这个事件发生以后要做的事情里面,这样每次恢复应用的时候,都会去检查一次联网的类型 ..

onResume: function(){
app.checkConnection();
},

保存 ….

打开终端,重新编译安装一下这个应用 …. phonegap run ios

打开 weinre 调试工具的控制台 ….

按一下 Home 键 …. 再次打开应用 … 这样会触发 resume 事件 … 也就会去执行检查联网类型的动作,它会把联网类型输出到控制台上 …

在控制台上,你会看到,现在的 网络连接的类型是: wifi

下面我们再断开网络连接试一下 ….

按下 Home 键,再回到应用 …. 在控制台上,会显示现在的网络连接的类型是 none …. 也就是没有连接网络。

重新定义连接类型的常量

在这里显示的这个网络连接类型的名称,我们可以重新去定义一下。

回到 index.js …

使用这段代码 … 这里我们先把检查到的连接类型交给 networkState ….

然后新建一个叫 states 的对象,并且重新定义了各种网络连接类型的名称 ….

最后我们再修改一下这个 console.log 里的东西,想要显示重新定义的名称 … 把这个 navigator.connection.type s

改成 states[networkState]

重新编译安装一下应用 ….

按下 Home 键 … 再打开应用 ….

现在控制台上显示的网络连接的类型,就会使用我们重新定义的名称了。


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

Notification API 可以使用对话框,响铃,或者震动来提醒用户。

notification.alert

下面我们先看一下使用对话框提醒的功能,我们可以使用 notification.alert。这里需要先去安装一下 dialogs 插件。

打开终端 ,进入到应用项目的目录 … cd desktop/hello

然后用 phonegap local plugin add 后面加上插件代码库的地址

phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git

phonegap local plugin add org.apache.cordova.dialogs

然后打开应用的 index.js 这个文件。

找到想要显示这个提醒对话框的地方,这里我们把它放在当断开互联网以后要做的事情里面。 offline 这个事件发生以后,会执行 onOffline 里面的动作。

在这里,输入 navigator.notification.alert();

使用 navigator 的 notification 的 alert 功能。

这个功能有四个参数我们需要指定一下 … 第一个参数就是对话框里要显示的信息。

'掉线了!',

不同的参数之间用英文状态下的逗号分隔开,第二个参数是关掉对话框以后要做的事情,

app.alertDismissed,

这个意思就是去执行 app 这个对象里的 alertDismissed 这个函数 … 一会儿我们需要再去定义这个函数 …

第三个参数是对话框的标题,这个参数是可选的,如果不指定的话,默认会是 Alert … 把它设置成 '网络状态提醒'

最后一个参数是 按钮上的文字,这也是一个可选参数,默认是 OK。 这里我们设置成 '知道了'

下面再去定义一下 alertDismissed() ,也就是关掉对话框窗口以后要做的事情。

// 关掉提醒窗口以后要做的事
alertDismissed: function() {
console.log('已经关掉了提醒窗口');
},

这里用一个简单的 console.log() ,在控制台上输出一些文字 ….

完成以后,保存一下 …

打开终端,重新再编译并且安装一下这个应用 ….

启用以后,断开网络连接 … 这会触发 offline 事件 … 事件发生以后,会在设备上显示一个提醒的对话框 … 上面的内容都是我们刚才定义好的 …

下面再打开 weinre 的控制台 ….

点击对话框上的 按钮 …. 会执行我们自己定义的 alertDismissed … 它做的事就是在控制台上输出,已经关掉了提醒窗口 这几个字 …

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

这个视频我们来看一下 notification.confirm ,它跟前面介绍的 notification.alert 差不多,会弹出一个对话框,不同的是,notification.confirm 可以定义多个按钮。

你可以根据用户点击的不同的按钮,去做不同的事。

打开应用的 index.js 这个文件 … 先给 app 这个对象添加一个函数 … 命名为 showConfirm … 先输入一段注释 ...

// 点击 '显示对话框' 按钮显示对话框内容
showConfirm: function(){
},

再去定义这个函数要做的事情 …. 输入 navigator.notification.confirm(); 在它的里面我们需要设置它的参数 … 对话框上的文字,回调函数,也就是点击不同的按钮所做的事情。另外还有两个可选的参数,对话框的标签,还有按钮。

navigator.notification.confirm(
'软件有新版本了',
app.onConfirm,
'软件更新',
['以后再说','立即下载']
);

先定义要显示的文字,把它放在一组引号里面 … '软件有新版本了' … 然后指定它的回调函数 …. app.onConfirm …. app 对象里的 onConfirm … 一会再去定义这个函数 …

第三个参数是对话框的标签 … 如果不指定的话,默认会是 Confirm ,确认 … 这里我们设置成 '软件更新',

最后一个参数是要显示的按钮 … 我们可以为对话框添加多个按钮 … 默认会显示两个按钮 … OK ,确定,还有 Cancel 取消 …

要定义的按钮我们需要放在一个数组里面,数组就是存放一些有顺序的数据的容器。

数组里的数据要放在一组方框号里面 … [] … '以后再说', '立即下载' … 你可以继续去添加想要的按钮 … 两个按钮会并排显示 … 超过两个按钮,按钮会堆叠在一起显示 …

下面再找一个地方去执行这个 showConfirm … 可以把它放在 onDeviceReady 里面 … 也就是一开始运行应用以后,就会立即显示一次这个对话框 ….

app.showConfirm();

onConfirm

下面我们再去定义一下 onConfirm .. 也就是点击不同的按钮要做的事情 ….

// 点击确认对话框以后做的事情
onConfirm: function(buttonIndex) {
},

这个函数里需要一个参数,我们叫它 buttonIndex … 它可以传递按钮的顺序 … 这个按钮的顺序从 1 开始,也就是第一个定义的按钮的顺序值是 1,第二个按钮的顺序的值就是 2 …

在这里,第一个按钮就是 以后再说 … 第二个按钮是 立即下载 …

我们可以使用 if 语句,去判断一下用户点击的按钮,然后根据用户的选择去做一些事情 …

if(buttonIndex === 1){}

这里判断的条件是,如果用户点击了第一个按钮,也就是 以后再说 这个按钮 … 会去执行在后面大括号里的代码。

还是使用 console.log(); 去在控制台上输出一些文字 …. console.log('以后再说');

然后我们再加上一个 else{} … 再这组大括号里,我们可以去定义当用户点击另外一个按钮,也就是 立即下载 这个按钮要做的事 …

同样是在控制台上输出一些文字 …. console.log('立即下载')

保存一下 … 先打开 weinre 调试工具的控制台 …. 再打开终端工具,重新去编译并安装一下这个应用 … phonegap run ios

应用启动以后,会显示我们定义的那个确认的对话框 …

点击 以后再说 …. 你会看到在控制台上,会输出 以后再说 ….

快速按两下 Home 键,可以使用快捷键 shift + command + H … 关掉这个应用 … 下面再重新打开这个应用 ….

这次我们点击 立即下载 这个按钮 …. 在控制台上,会输出 立即下载 ….

这就说明,我们成功的捕获了用户所点击的按钮,并且去执行事先设计好的动作。


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

使用对话框提醒用户,并且在对话框上提供了一个可以让用户输入内容的文本框,这就是 notification.prompt 的功能 … 它跟 notification.confirm 差不多,只不过,在对话框上多出来一个文本框。

你可以根据用户输入的内容,还有点击按钮,去做一些指定的事情。 下面我们一起来看一下这个 notification.prompt …

先定义一个函数,可以叫它 showPrompt: function(){};

它的作用就是去显示一个提示的对话框 …. 这里我们要用的是 navigator.notification.prompt();

在它的里面,需要指定五个参数,在对话框上显示的内容,处理对话框的动作,对话框的标题,对话框的按钮,还有文本框里默认的文字 ….

先定义对话框上要显示的内容 … '请输入您的姓名',

然后是处理这个对话框动作的函数,就是在用户输入内容还有点击的按钮以后,根据这些内容要做的事情。 app.onPrompt,

一会在下面,我们再去定义这个 onPrompt ...

第三个参数是对话框的标题 … '注册',

然后是对话框上的按钮 … 我们可以在对话框上显示多个按钮,这些按钮要放在一个数组里面,先输入一组方括号,这里我们添加两个按钮,取消,还有确认 … ['取消,'确认']

这个按钮的顺序从 1 开始,也就是用户点击 取消这个按钮,在返回的结果里,按钮的顺序就是 1,确定按钮是 2 …

最后一个参数是文本框里默认的文字 … 默认这个默认的文字是 Default text … 这里我们设置成 '王二麻子'

完成以后,找一个地方去执行这个 showPrompt … 放在 deviceready 这个事件发生以后 … app.showPrompt();

onPrompt

下面我们需要再去定义 onPrompt 去处理接收到的用户输入的内容还有点击的按钮 …

// 点击提示对话框以后做的事情
onPrompt: function(results) {},

接收到的结果会放在 results 这个对象里面 … 这里把它作为 onPrompt 的一个参数 …

这个 results 里面有两个属性, buttonIndex 里面包含用户点击的按钮,input1 里面是用户在文本框里输入的具体的内容 …

访问这两个属性可以这样 … results.buttonIndex … 这个代码会输出用户点击的按钮 … 用户点击第一个按钮,它就会输出 1,点击第二个按钮,它就会是 2 ….

results.input1 … 这个代码会访问到用户在文本框里输入的内容 …. 你可以使用这些内容去做一些复杂的事情,不过这里,我们还是简单的把这些内容输出到控制台上来 …

console.log('用户点击了按钮:' + results.buttonIndex + ' 用户输入的姓名是:' + results.input1);

保存一下 …

测试

先打开 weinre 的控制台 … 然后打开终端重新去编译一下这个应用 … phonegap run ios

应用启用以后,会显示这个提示的对话框 … 在文本框里会显示默认的文字 … 用户可以输入自己的内容 … 王皓 …

然后点击按钮 …

在控制台上你会看到,会根据用户输入的内容,还有点击的按钮,输出一些内容。 用户点击了按钮 …


 

 

唯物品评历史

关注"唯物品评历史",跟着泪痕春雨先生,读懂历史,看彻人生

打开隐藏二维码