微交互及其构成

微交互就是产品的功能细节。是创建优秀用户体验的必经之路。

一个微交互由四部分构成:触发器启动微交互、规则规定微交互如何起作用、反馈传达规则信息、循环和模式构成微交互的元规则。

三种看待微交互的方式:找到他们并各各击破、把复杂的功能转换为微交互、把每个功能当作一组相互关联的微交互。

phonegap 获取地理位置信息问题解决

今天做地理位置获取测试,一开始无法获取信息,总是timeout,现在找到解决方法,如下:

首先确认手机的GPS功能已开启,呵呵……

andorid 下需要加参数 enableHighAccuracy: true;

代码如下:

navigator.geolocation.getCurrentPosition(onSuccess, onError,{ maximumAge: 3……

查看详细

phoneGap 3.1 版本启动图片和程序图标设置

官方看了demo,可能水平有限,官网上的方式不管怎么修改build之后程序的图片都不变。网上查过很多文章,好像也都不是该版本,自己的方法,如下:

[quote style=’1′ cite=”]注意我用的是phonegap3.1版本[/quote]

进入到工程目录下的 \platforms\android\ant-build\res\

可以看到drawable文件是分尺寸的,……

查看详细

config.xml 文件详细参数配置

官方示例参数比较少,这里整理记录下来以后使用。

<?xml version=’1.0′ encoding=’utf-8′?>
<widget id=”com.uxword.levone” version=”1.0.0″ xmlns=”http://www.w3.org/ns/widgets” xmlns:gap=”http://phonegap.com/ns/1.0″&g……

查看详细

PhoneGap插件安装

要使用phoneGap的硬件API需要安装相应的plugin。官网已有详细介绍,这里记录和详细注释下来方便查找。

  1. 设备基本信息API(如:设备名称,系统名称等)
    cordova plugin add org.apache.cordova.device
  2. 网络和电池API
    cordova plugin add org.apache.cordova.network-informati......

查看详细

phoneGap 环境搭建及测试调用整理

昨天摸索phoneGap的安装调试,遇到一些问题,整理下来希望对大家有帮助。我用的是win7,IOS以后再整理。

整体来说三个步骤:

  1. Node.js、 PhoneGap  和 ANT的安装和配置;
  2. 使用命令进行本地测试;
  3. 封装打包其他平台;

[title style=’1′]第一步,环境的安装配置[/title]

  1. 安装node.js。
    去官网下载对应的版本,安……

查看详细

移动WEB中meta标签属性技巧

控制显示区域各种属性:

<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ name=”viewport”>

  • width                      – viewport的宽度
  • initial-scale          -……

查看详细

移动WEB前端技巧

1、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用

<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” />
<meta content=”yes……

查看详细

浏览器调试PhoneGap

phonegap可以在浏览器端调试(需要webkit支持), chrome/safari都可以

官网api里的代码:

document.addEventListener(“deviceready”, onDeviceReady, false);
function onDeviceReady() {
console.log(“===>> deviceReady”);
c……

查看详细

jquery 实时监听输入框值变化

只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了,示例代码:

$(‘#username’).bind(‘input propertychange’, function() {
$(‘#content’).html($(this).val().length + ‘ characters’);
});