Mac OS编译node-webkit概要

1)下载depot_tools,zip下载不了,直接git clone下

2)depot_tools加环境变量

3)gclient sync

a)python下载安装不了,可以手动安装python2.7.6,复制python.exe到depot_tools

b)git下载安装不了,可以手动安装git,设置环境变量到bin路径

c)sync先会下载chromium.src,有1.5G,如果用gclient sync会老是出错,因为太大了,国内环境大家都懂的。所以推荐使用github客户端来clone,clone下来后重命名到node-webkit/src

d)以后会clone88个工程,这个过程很懊恼,会话很久时间,googlesource.com网络有不是很稳定,所以先自己加个域名解析,会快点,如果是github的项目,建议跟c)一样,用客户端下载后放入目录。这里clone的都是chromium.src下的DEPS.git文件里的配置项目

e)88个项目都clone完成后,gclient会安装llvm/clang,然后编译。我使用的是OS X 11,编译时候老是提示clang: error: invalid deployment target for -stdlib=libc++ (requires OS X 10.7 or later) ,解决方案为修改node_webkit/src/tools/clang/scripts/update.sh MACOSX_DEPLOYMENT_TARGET=10.5 ==> MACOSX_DEPLOYMENT_TARGET=10.7

f)On OSX you’ll see error messages reporting cycle in .gyp file dependency graph detected. It can be ignored because gclient wants to run gyp_chromium without a switch we need. Please move on to the Build section
Error: Command /usr/bin/python src/build/gyp_chromium returned non-zero exit status 1 in /Users/gexin/Documents/nw_workspace/node_webkit
Hook ‘/usr/bin/python src/build/gyp_chromium’ took 42.73 secs

g)cd node-webkit/src
export GYP_GENERATORS=‘ninja’
./build/gyp_chromium content/content.gyp
ninja -C out/Release nw -j4

HTML5-Geolocation

HTML5 Geolocation API 封装在 navigator.geolocation 属性里,各种接口即是 navigator.geolocation 对象的方法。

1、getCurrentPosition()

getCurrentPosition 用来获取用户当前的位置信息,该方法带有三个参数:

1、successCallback:成功获取用户位置信息后的回调函数
2、errorCallback:获取用户位置信息失败时的回调函数
3、positionOptions:可选。获取用户位置信息的配置参数

i)successCallback
successCallback 函数带有一个参数,对象字面量格式,表示获取到的用户位置数据。该对象包含两个属性 coords 和 timestamp。其中 coords 属性包含以下7个值:

1、accuracy:精确度
2、latitude:纬度
3、longitude:经度
4、altitude:海拔
5、altitudeAcuracy:海拔高度的精确度
6、heading:朝向
7、speed:

ii)errorCallback和 successCallback 函数一样带有一个参数,对象字面量格式,表示返回的错误代码。它包含以下两个属性:

1、message:错误信息
2、code:错误代码。

其中错误代码包括以下四个值:

0 — UNKNOW_ERROR:表示不包括在其它错误代码中的错误,这里可以在 message 中查找错误信息
1 — PERMISSION_DENIED:表示用户拒绝浏览器获取位置信息的请求
2 — POSITION_UNAVALIABLE:表示网络不可用或者连接不到卫星
3 — TIMEOUT:表示获取超时。必须在options中指定了timeout值时才有可能发生这种错误

iii)positionOptions
positionOptions 的数据格式为JSON,有三个可选的属性:

1、enableHighAcuracy — 布尔值: 表示是否启用高精确度模式,如果启用这种模式,浏览器在获取位置信息时可能需要耗费更多的时间。
2、timeout — 整数: 表示浏览需要在指定的时间内获取位置信息,否则触发errorCallback。
3、maximumAge — 整数/常量: 表示浏览器重新获取位置信息的时间间隔。

2、watchPosition()
watchPosition 的三个参数和 getCurrentPosition 完全一样,不同的是 watchPosition 是设计用来实时获取\检测用户的位置信息。它像一个追踪器一样时刻监视用户的位置,只要发生变化,浏览器就会触发 watchPosition 的回调函数。成功则触发 successCallback ,否则触发 errorCallback。另外和  getCurrentPosition 不同的地方就是有返回值。类似于延迟函数/间隔函数(setTimeout/setInterval)那样,返回一个 ID ,可以被清除掉。这里是用接下来介绍的 clearWatch 清除。

3、clearWatch()

接受一个 watchPosition 返回的 ID,功能是清除对用户位置的循环监视。

CSS3新样式

1.select去掉默认样式
background: transparent;
-webkit-appearance: none;

2.css实现按钮
background: -webkit-gradient(linear, 0 0, 0 100%, from(#40BF49), to(#0D9D22));
color: #fff;
border-color: #008F01;
width: 298px;
height: 41px;
line-height: 41px;
border: 1px solid #B3B3B3;
border-radius: 3px;
text-decoration: none;
text-align: center;

WEBAPP去掉input白色外框

-webkit-user-modify: read-write-plaintext-only

唯一已知的消除它的方式:

但是这个方式有一个副作用,就是输入法不再能够输入多个字符,比如用中文输入法打“我们”,进入文本框的就只有“我”.

HTML5语言输入

只要在input中加入 x-webkit-speech lang=”zh-CN” x-webkit-grammar=”bUIltin:search”

HTML JS渲染问题

这几天纠结了一个很蛋疼的问题,用jquery的$.html()方法改变div内容,但是显示上开来似乎没有改变内容。
通过获取html内容发现其实源码的内容已经是变了的,就是显示渲染没有做,导致看上去跟没有变一样。
解决办法。$.html()加一个延时,100ms就足以,视觉上也没什么感觉,但是效果很好,而且目前看来只要一个地方用了这个方法,其它地方都不会再有这个问题。很蛋疼。
这个问题也就只有在android4.0以后的webkit上存在。

HTML5 offline

<!DOCTYPE HTML>
<html manifest="offline.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery.mobile-1.1.0-rc.1.event.js"></script>
<style>
#toast {
  position: fixed;
  width: 70%;
  right: 15%;
  bottom: 30%;
  color: #fff;
  border-radius: 1em;
  padding: 2%;
  overflow: hidden;
  text-align: center;
  font-size: 1.5em;
  overflow: hidden;
  background-image: -webkit-gradient(linear, 100% 0%, 71% 100%, from(#424242), to(#3D3D3D), color-stop(1, #303030) );
  bottom: 30%;
}
</style>
</head>
<body style="background: none">
  <div id="toast">正在检查更新...</div>
  <!-- 弹出框容器 -->
  <div id="layer">
    <div class="tips-map">
      <div class="tips-dt">提示</div>
      <p class="box box1">确认退出?</p>
      <div class="btn-div">
        <img src="images/ok_1.png" class="definite" alt="确定"><img src="images/cancel_1.png" class="cancel"
          alt="取消">
      </div>
    </div>
  </div>
</body>
</html>

<script>
  var toast = document.getElementById("toast");
  //判断是更新还是初始化
  var version = localStorage.getItem('version');
  var initOrUpdate = '更新';
  console.log('version:' + version);
  if (version == '' || version == null) {
    initOrUpdate = '初始化';
  }
  //更新处理
  var cache = window.applicationCache;
  var loaded = 0;
  var total = 165;
  cache.addEventListener('progress', function(e) {
    console.log(loaded);
    var progress = Math.round(100 * loaded / total);
    if (progress > 100) {
      progress = 100;
    }
    loaded++;
    message(initOrUpdate + '系统,已完成' + progress + "%");
  }, false);

  /*onupdate事件表示:没有更新。 */
  cache.addEventListener('noupdate', function() {
    location.href = 'login.html';
  }, false);

  /*oncached事件表示:第一次加载完成。 */
  cache.addEventListener('cached', function() {
    message(initOrUpdate + '完成');
    localStorage.setItem('version', 0);
    location.href = 'login.html';
  }, false);
  /*onupdateready事件表示:更新已经处理完成,新的缓存可以使用。*/
  cache.addEventListener('updateready', function() {
    message(initOrUpdate + '完成');
    localStorage.setItem('version', parseInt(version) + 1);
    cache.swapCache();
    location.href = 'login.html';
  }, false);

  function message(msg) {
    toast.innerHTML = msg;
  }

  // 退出
  window.onmessage = function(e) {
    var data = eval('(' + e.data + ')');
    if (data.target == 'back') {
      $("#layer").show();
      $('.definite').bind('vmouseup', function() {
        window.parent.postMessage('{target:"exitnow"}', "*");
      });
      $('.cancel').bind('vmouseup', function() {
        $("#layer").hide();
      });
    }
  };
</script>

offline.manifest

CACHE MANIFEST
#version 2.0.0.0
#dev-version 20121219180022
CACHE:
./css/public.css
./css/reset.css
./css/style.css
./js/Entities.js
./login.html
./index.html
./register.html
NETWORK:
*
FALLBACK:

JS对JSONString互转

一、JSON字符串转换为JSON对象
1.var obj = eval(‘(‘ + str + ‘)’);
2.var obj = str.parseJSON();
3.var obj = JSON.parse(str);

二、可以运用 toJSONString()或者全局要领 JSON.stringify()将JSON对象转化为JSON字符串。
1.var last=obj.toJSONString();
2.var last=JSON.stringify(obj);

JS对JSON<-->String互转

一、JSON字符串转换为JSON对象
1.var obj = eval(‘(‘ + str + ‘)’);
2.var obj = str.parseJSON();
3.var obj = JSON.parse(str);

二、可以运用 toJSONString()或者全局要领 JSON.stringify()将JSON对象转化为JSON字符串。
1.var last=obj.toJSONString();
2.var last=JSON.stringify(obj);

获取HTML单击的元素

$(function () {
	$('*').click(function (event) {
		console.log($(this)); //Jquery会把标签名放在tagName属性里。
		$(this).focus();//这里如果用了iscroll后输入控件会得不到焦距,所以需要focus
		event.stopPropagation(); //阻止事件冒泡,否则点一下会弹出很多,具体原因请查询JS的事件冒泡规则
	});
});