(HTML5)phonegap的基础入门（一）

来源：互联网发布：《杨逍与纪晓芙》知乎编辑：程序博客网时间：2024/05/30 20:09

phone gap是一个利用HTML5开发App的一个框架，可以一次编写，编译成多个移动平台的版本，常见的就有android，ios，wp，黑莓。它的优点就是能够节省公司的开发周期，但是性能却没有原生的好。
1，安装git
2，安装node.js
3，进入终端使用npm安装phone gap

sudo npm install -g phonegap (-g表示在全局范围里安装phonegap)phonegap -v可以查看phonegap的最新版本sudo npm update -g phone gap 更新phone gap 的版本

4，创建项目

    cd desktop    phonegap create hello com.water.hello HelloWorld    phonegap create 路径 项目的唯一标识符 应用的名称    plugins 存放插件    wwww    存放应用程序    platfroms 存放不同平台的应用

5，编译安装运行
phonegap build
phonegap install
phonegap run

**1，phonegap build**> cd desktop/hello> phonegap build ios (这个命令会将www目录下的应用编译成为可以在ios平台下使用的应用，platfroms下会出现一个ios，而ios下有一个.xcodeproj)**2,phonegap install**> phonegap install ios使用上面的命令需要下载一个小插件，到网站brew.sh/index_zh-ch.html，安装了该插件之后就可以调用本地的虚拟机。可以在终端工具上面输入下面的命令行ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/install/master/install)"brew install ios-simphonegap install --emulator ios***pheongep run --emulator ios***管理插件phonegap local plugin addphonegap local plugin removephonegap local plugin listcd desktop/hellophonegap local plugin add https://git-wip....默认这个插件是可以安装下pluginsphonegap local plugin list是可以查看到所有的插件phonegap local plugin remove org.apache.cordova.console

6，简单的认识代码的内容
打开www目录下的index.html文件，这个文件有一个行代码

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

上面的代码会关闭掉浏览器的一个自动识别电话号码功能

<meta name="viewport" content="user-scalabel=no, initial-scale=1, maximun-scale=1,    minimum-scale=1,width=device-width,height=device-height,target-densitydpi=device-dpi"/>

* user-scalable=no 禁止页面的缩放* initial-scale=1  页面刚加载的时候页面的大小比例，1值得是不缩放。* maximun-scale=1  页面的放大的最大的比例* minimum-scale=1  页面的缩小的最小的比例* width=device-width   页面的可视范围的宽度是设备的宽度* height=device-height 页面的可视范围的高度是设备的高度

7，调试工具weinre
Chrome Developer Tools
sudo npm -g install weinre
安装完weinre之后就可以在命令行工具下输入weinre
将下面的代码赋值到index.html文件中，

<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>

将下面的代码赋值到config.xml文件中

<feature name="debug-server" required="true">       <param name="domain" value="http://127.0.0.1"/>    <param name="key" value="com.water.hello"/></feature>

8，事件Events
暂停 pause
恢复 resume
在线 online
离线 offline
电量低 betterylow
增大音量 volumeupbutton

on DeviceReady:function(){    document.addEventListener('online',app.onOnline,false);    document.addEventListener('offline',app.onOffline,false)}安装插件phonegap local plugin add org.apache.cordova.network-informationphonegap local plugin listphonega local plugin add org.apache.cordova.dialogsonOffline:function(){    console.log('掉线了');    navigator.notification.alert(    '掉线了',    app.alertDismissed,    '网络状态提醒',    '知道了');}确定窗口showConfirem: function(){    navigator.notification.confirm(        '软件有新版本了',        app.onConfirm,        '文件更新',        ['以后再说','立即下载']    );}onConfirm:function(buttonIndex){    if(buttonIndex == 1){        console.log('以后再说');    }else {        console.log('立即下载');    }}

0 0