QApp Framework API

QApp.config( conf ) Method

描述: 配置

参数:

返回值: Object 当前配置

 QApp.config({
   // 默认的首屏 View
   indexView: 'index',
   // 默认的动画
   defaultAnimate: 'moveEnter',
   // 是否自动初始化视图
   autoInit: true,
   // 是否开启 hash router
   hashRouter: true,
   hashSupport: {
       // 是否默认全部
       all: true,
       // 白名单
       exist: [],
       // 黑名单
       except: [],
       // 是否使用 path 变换（需要服务端支持）
       usePath: false
   },
   // 是否使用 json 形式参数
   jsonParam: false,
   screen: {
       // 是否支持屏幕旋转
       rotate: false,
       // 检测屏幕大小变换
       autoResize: true
   },
   gesture: {
       // 是否开启手势
       open: true,
       // 是否开启手势控制 (在 View 切换时，禁用手势)
       ctrl: true,
       // 长按是否触发 Tap 事件
       longTap: true,
       // 自动控制元素失去焦点
       autoBlur: true
   },
   // 日志等级
   logLevel: 1
 });

QApp.ready( listener ) Method

描述: 准备完毕回调

参数:

QApp.ready(function() {
     todoSomething();
})

额外说明:

QApp.ready 不等同于 Dom Ready, 但依赖于 Dom Ready, 可以通过 QApp.addReadyDependencies 添加依赖

QApp.addReadyDependencies( defer ) Method

描述: 添加准备完毕依赖

参数:

QApp.version Property

描述: QApp 版本

类型: {String}

参考值: "*Version*"

QApp.view.define( name, options ) Method

描述: 定义视图

缩略: QApp.defineView

参数:

    QApp.defineView('view', {
       // 模板
       html: '',
       // 给视图根节点添加的样式
       classNames: ['class1', 'class2'],
       // 给视图根节点添加的属性
       attrs: {
           'data-some': 'qapp'
       },
       // 给视图根节点添加的样式
       styles: {
           'background-color': 'red'
       },
       // 给视图实例添加属性和方法
       init: {
           someValue: null,
           doSomething: function() {
           }
       },
       // 插件配置
       plugins: ['plugin1', {
           name: 'plugin2',
           options: {
           }
       }],
       // 视图生命周期事件绑定
       bindEvents: {
           'show': function() {
               // this 指向视图实例
           }
       },
       // 视图创建完成的回调
       ready: function() {
           // this 指向视图实例
       }
    });

QApp.view.undefine( name ) Method

描述: 取消定义视图

参数:

QApp.view.getOptions( name ) Method

描述: 获取视图定义的配置

参数:

返回值: Object 配置

QApp.view.create( options ) Method

描述: 创建视图实例

参数:

返回值: View 视图实例

QApp.view.show( name[, options][, callback] ) Method

描述: 显示视图

缩略: QApp.show

参数:

QApp.show('view', {
    param: {
        x: 1,
        y: 2
    },
    ani: 'actionSheet',
    onComplete: function(data) {
    }
});

额外说明:

show 主要用于视图内的组件类的内容展示，类似于PC端的弹层。 关于动画，请参看 QApp-plugin-basic

QApp.view.exists( name ) Method

描述: 查看视图是否定义

缩略: QApp.existsView

参数:

返回值: Boolean 是否存在

QApp.view.get( name, callback ) Method

描述: 获取视图实例（异步）

缩略: QApp.getView

参数:

QApp.getView('someView', function(view) {
    // view
});

QApp.view.getSync( name ) Method

描述: 获取视图实例（同步）

缩略: QApp.getViewSync

参数:

返回值: View 视图实例

View.container Property

描述: 容器

类型: {Element}

View.isReady Property

描述: 是否已经ready

类型: {Boolean}

View.isShow Property

描述: 是否显示

类型: {Boolean}

View.root Property

描述: 根节点

类型: {Element}

View.param Property

描述: 参数

类型: {Element}

View.plugins Property

描述: 插件映射

类型: {Object}

View.widgets Property

描述: 组件映射

类型: {Object}

View.extra Property

描述: 扩展配置

类型: {Object}

View.prototype.renderTo Prototype Private

描述: 渲染到容器中

参数:

返回值: View 视图实例

View.prototype.renderHTML Prototype Private

描述: 渲染HTML

参数:

返回值: Deferred 异步对象

View.prototype.show Prototype

描述: 显示

参数:

返回值: View 当前视图实例

额外说明:

• 动画插件会复写此方法。
• QApp.open 和 QApp.show 会自动调用此方法

View.prototype.hide Prototype

描述: 隐藏

返回值: View 当前视图实例

额外说明:

• 动画插件会复写此方法
• QApp.open 和 QApp.show 会复写此方法

View.prototype.close Prototype

描述: 关闭

返回值: View 当前视图实例

额外说明:

• 动画插件会复写此方法
• QApp.open 和 QApp.show 会复写此方法

View.prototype.mergeParam Prototype Private

描述: Merge 参数

参数:

返回值: View 当前视图实例

View.prototype.on Prototype

描述: 绑定事件

参数:

返回值: View 当前视图实例

View.prototype.once Prototype

描述: 绑定事件（只监听一次）

参数:

返回值: View 当前视图实例

View.prototype.off Prototype

描述: 取消绑定事件

参数:

返回值: View 当前视图实例

额外说明:

listener 不给出，则取消绑定此次事件名所有绑定的回调 name 不给出，则取消所有绑定的事件

View.prototype.trigger Prototype

描述: 触发事件

参数:

返回值: View 当前视图实例

View.prototype.frontOn Prototype

描述: 绑定事件

参数:

返回值: View 当前视图实例

View.prototype.scanWidget Prototype

描述: 扫描并渲染组件

参数:

返回值:

View.prototype.showWidget( name[, el], options ) Method

描述: 显示组件

参数:

返回值: Any 组件返回的对象

var  widget = View.showWidget('searchlist', {
onComplete: function() {
      todoSomething();
}
});

额外说明:

所需参数和返回的对象由组件的适配器决定

View.prototype.destroy Prototype Private

描述: 销毁视图

返回值:

额外说明:

一般不需用户调用

View:beforeShow Event

描述: 将要开始显示

View:show Event

描述: 显示

额外说明:

业务逻辑推荐在这里开始执行，类似ajax的逻辑，会影响动画效率。 只有视图第一次显示时，才触发此事件。

View:beforeHide Event

描述: 将要开始隐藏

View:hide Event

描述: 隐藏

View:receiveData Event

描述: 接收到数据

参数:

数据形式:

view.bind('receiveData', function(data) {
   execute(data); //TODO 处理data
});

额外说明:

使用 QApp.open 时，数据回溯，建议使用此事件接收。

View:actived Event

描述: 被激活

额外说明:

视图每次展现都会触发此事件

View:deactived Event

描述: 被取消激活

View:destroy Event

描述: 销毁

额外说明:

一般用于销毁时，自动销毁用户创建的一些对象或者终止正在进行中的逻辑

QApp.router.open( name[, options][, callback] ) Method

描述: 打开视图

缩略: QApp.open

参数:

QApp.open('view', {
    param: {
        x: 1,
        y: 2
    },
    ani: 'moveEnter',
});

额外说明:

open 主要用于切换视图，类似于PC端的跳转，近似于App上的切换视图操作。

建议使用 View:receiveData 事件做监听。

关于动画，请参看 QApp-plugin-basic 由于需要和客户端相同，一般采用 moveEnter

QApp.router.back( [num][, param] ) Method

描述: 回退

参数:

QApp.router.backTo( name[, param] ) Method

描述: 回退到

参数:

返回值: Boolean 是否回退到

QApp.router.home( [param] ) Method

描述: 回退到首页

参数:

QApp.router.goto( name[, options][, param] ) Method

描述: 跳转到（如果已存在，则回退到，否则新打开）

参数:

QApp.router.exit( ) Method

描述: 退出

QApp.router.refreshParam( param ) Method

描述: 刷新参数

参数:

QApp.router.addOpenFilter( filter ) Method

描述: 添加open过滤器

参数:

QApp.router.removeOpenFilter( filter ) Method

描述: 移除open过滤器

参数:

QApp.router.addBackFilter( filter ) Method

描述: 添加back过滤器

参数:

QApp.router.removeBackFilter( filter ) Method

描述: 移除back过滤器

参数:

QApp.router.getCurViewName( ) Method

描述: 获取当前视图名称

返回值: String

QApp.router.getPreViewName( ) Method

描述: 获取前一个视图名称

返回值: String

QApp.util.ready( callback ) Method

描述: Ready

参数:

    QApp.util.ready(function(){});

QApp.util.builder( html ) Method

描述: 节点构造

参数:

QApp.util.appendNodes( node, elements ) Method

描述: 节点添加

参数:

 // 为 el 添加子节点
 var el = document.getElementById('demo'),
     nodes = [document.createTextNode("1"), document.createTextNode("2")];
 QApp.util.appendNodes(el, nodes);
 QApp.util.appendNodes(el, nodes);

QApp.util.insertElement( node, element[, where] ) Method

描述: 节点插入

参数:

返回值: Element

 var node = document.getElementById('demo'),
     el = document.createElement('p');
 el.innerHTML = 'text';
 QApp.util.insertElement(node, el, 'beforebegin'); // 将node开始前插入el
 QApp.util.insertElement(node, el, 'afterbegin'); // 将node开始后插入el
 QApp.util.insertElement(node, el, 'beforeend'); // 将node结束前插入el
 QApp.util.insertElement(node, el, 'afterend'); // 将node结束后插入el
 QApp.util.insertElement(node, el); // 缺省默认为'beforeend'

QApp.util.removeNode( node ) Method

描述: 删除节点

参数:

 var el = document.getElementById('demo');
 QApp.util.removeNode(el);

QApp.util.attr( node, attrName ) Method

描述: 获取或设置节点属性值

参数:

返回值: String

 var el = document.getElementById('demo'),
     attrKey = 'id', // 属性名
     attrVal1 = 'new-value', // 属性值
     attrVal2 = 'other-value',
     attr = { // 属性对象
        'id': 'new-value'
     };
 QApp.util.attr(el, attrKey, attrVal1); // 增加属性
 QApp.util.attr(el, attrKey, attrVal2); // 修改属性
 QApp.util.attr(el, attrKey, null);     // 删除属性
 QApp.util.attr(el, attr);              // 利用object方式修改属性

QApp.util.css( node, property[, value] ) Method

描述: 获取或设置节点样式

参数:

返回值: String

 var el = document.getElementById('demo'),
     attr1 = 'background-color',
     value1 = 'red',
     attr2 = 'borderColor',
     value2 = 'blue',
     attr3 = 'translateY',
     value3 = '20px',
     obj = {
         "translateX": "20px",
         "scaleX": 2
     };
 QApp.util.css(el, attr1, value1); // 增加行内样式属性
 QApp.util.css(el, attr2, value2); // 增加行内样式属性
 QApp.util.css(el, attr2, value2); // 增加行内样式属性
 QApp.util.css(el, attr3, value3); // 增加行内样式属性
 QApp.util.css(el, obj); // 增加行内样式属性
 QApp.util.css(el, attr2, null); // 删除行内样式属性
 QApp.util.css(el, attr1, value2); // 更改行内样式属性
 QApp.util.css(el, attr1); // 查找行内样式属性

QApp.util.removeStyle( node, names ) Method

描述: 删除样式

参数:

  var el = document.getElementById('demo');
  el.style.display = 'none';
  QApp.util.removeStyle(el, 'display');

QApp.util.fixEvent( event ) Method

描述: 事件修复

参数:

返回值: Event

 var el = document.getElementById('demo'),
     type = 'click',//事件类型
     useCapture = false;//是否冒泡
 QApp.util.addEvent(el, type, function(e){
    var event = QApp.util.fixEvent(e);//事件修复
 }, useCapture);

QApp.util.addEvent( node, type, listener[, useCapture] ) Method

描述: 事件绑定

参数:

// 监听 el 的 click 事件
var el = document.getElementById('demo'),
   type = 'click', //事件类型
   fn = function(){}, //回调函数
   useCapture = false; //是否冒泡
QApp.util.addEvent(el, type, fn, useCapture);

QApp.util.removeEvent( node, type, listener ) Method

描述: 解除绑定事件

参数:

 var el = document.getElementById('demo'),
     type = 'click',
     fn = function(){},
     useCapture = false;
 QApp.util.addEvent(el, type, fn, useCapture);
 QApp.util.removeEvent(el, type, fn);

QApp.util.dispatchEvent( node, type, args ) Method

描述: 事件触发

参数:

QApp.util.addClass( node, className ) Method

描述: 添加类名

参数:

//  为 el 新增一个 className 为 new-class
var el = document.getElementById('demo');
QApp.util.addClass(el, 'new-class');

QApp.util.removeClass( node, className ) Method

描述: 移除元素指定类名

参数:

 var el = document.getElementById('demo');
 QApp.util.removeClass(el, 'color');

QApp.util.createStyle( cssText ) Method

描述: 动态创建样式

参数:

QApp.util.contains( a, b ) Method

描述: 包含判定

参数:

返回值: Boolean

QApp.util.focus( element ) Method

描述: 节点聚焦

参数:

QApp.util.blur( [container] ) Method

描述: 指定节点内的焦点元素失焦

参数:

QApp.util.size( any ) Method

描述: 获取元素的尺寸

参数:

QApp.util.position( el ) Method

描述: 获取位置

参数:

返回值: Object top 和 left 两个数值

QApp.util.dataSet( node ) Method

描述: 获取节点自定义数据

参数:

返回值: Object

QApp.util.animate( el, props[, duration][, ease][, delay] ) Method

描述: 动画

参数:

返回值: Deferred

// 修改 ele 的 transform 属性，实现动画（推荐）
var ele_transform = document.createElement("div");
QApp.util.animate(ele_transform, {transform: "translate(50%, 0)"}, 500);

// 修改 ele 的 left，实现动画
var ele_left = document.createElement("div");
QApp.util.animate(ele_left, {left: "50%", position: "absolute"}, 500);

QApp.util.is( obj, match ) Method

描述: 类型判断

参数:

返回值: String|Boolean

QApp.util.extend( deep, target ) Method

描述: 扩展

参数:

返回值: Object

var obj1, obj2, obj3, //定义变量
    deep; //定义一个布尔值
QApp.util.extend(true, {}, obj1, obj2, obj3); //深拷贝，obj1, obj2, obj3的属性重新生成后放到{}上

var obj1, obj2, obj3,//定义变量
    deep;//定义一个布尔值
QApp.util.extend(obj1, obj2, obj3); //浅拷贝，obj2，obj3的属性被复制到obj1上

QApp.util.each( obj, fn ) Method

描述: 遍历对象

参数:

var people = {name: 'xiaoming'};
function fn(key, item){};
QApp.util.each(obj, fn); //遍历对象，执行函数fn

QApp.util.makeArray( iteration ) Method

描述: 数组化

参数:

返回值: Array|Boolean false

    //定义一个类数组对象
    var likeArray = {
        0: param1,
        1: param2,
        2: param3,
        length: 3
    };

    QApp.util.makeArray(likeArray); //返回一个数组，值为(length-1)下标逆序下标数组

QApp.util.delay( func[, delay] ) Method

描述: 延时封装

参数:

返回值: Number

 var time = 1000;
 function fn(){}
 QApp.util.delay(fn, time); // 延迟1s执行函数

QApp.util.associate( arrVal, arrKey ) Method

描述: 数组映射对象

参数:

返回值: Object

    //对象属性值数组
    var arrValues = [val1, val2, val3];
    //对象属性名数组
    var arrKeys = [key1, key2, key3];

    QApp.util.associate(arrValues, arrKeys); // {key1: val1, key2: val2, key3: val3}

QApp.util.mapping( obj, arrKey ) Method

描述: 对象映射数组

参数:

返回值: Array

 var obj = {
     key1: value1,
     key2: value2,
     key3: value3
 };
 //想要输出对象值的属性数组
 var arrKeys = [key1, key3];

 QApp.util.mapping(obj, arrKeys);//返回[value1, value3]

QApp.util.getUniqueID( ) Method

描述: 获取唯一id

返回值: Number

var variable = QApp.util.getUniqueID; //获取到唯一id

QApp.util.getZIndex( ) Method

描述: 获取自增 z-index

返回值: Number z-index

    QApp.util.getZIndex();//获取自增z-index，最小值是1001

QApp.util.camelCase( str ) Method

描述: 驼峰化

参数:

返回值: String

var str = "div-element"; // 定义一个通过 "-" 或 "/" 分割的变量
QApp.util.camelCase(str);   // 返回divElement

QApp.util.dasherize( str ) Method

描述: 连接化

参数:

返回值: String

   // 声明一个值为驼峰形式的字符串
   var str = "divElement";
   QApp.util.dasherize(str);  // 返回以 "-" 连接的字符串，div-element

QApp.util.empty( obj ) Method

描述: 清空对象

参数:

    //定义一个对象
    var programmer = {
        name: "missy",
        age: 22
    };
    QApp.util.empty(programmer);//无返回值，对象属性值将被清空。programmer {name:null, age:null}

QApp.util.isNull( obj ) Method

描述: 对象判空

参数:

返回值: Boolean

QApp.util.jsonToQuery( json[, isEncode] ) Method

描述: json数据转换成查询字符串

参数:

返回值: String

QApp.util.queryToJson( data[, isDecode] ) Method

描述: 查询字符串转换成json数据

参数:

返回值: Object

QApp.util.queue( list, keys, dynamic ) Method

描述: 异步串行

参数:

返回值: Deferred

QApp.util.parallel( list[, keys] ) Method

描述: 异步并行

参数:

返回值: Deferred

QApp.util.apply( callback, view, args ) Method

描述: 将函数应用于view

参数:

返回值: Any

QApp.util.getCallback( args ) Method

描述: 获取回调函数

参数:

返回值: Function

QApp.sniff Property

描述: 环境嗅探

类型: {Object}

参考值: {os: 'ios', ios: true, android: false, iphone: true, ipad: false, ipod: false, imobile: true, osVersion: '8.1.2', osVersionN: 8, pixelRatio: 2, retina: true, pc: false}

QApp.plugin.add( name, options[, adapter] ) Method

描述: 增加插件

缩略: QApp.addPlugin

参数:

QApp.addPlugin('some', someOpt, function(view, opt) {
  view.someAttr = someValue;
  return SomeObject;
});

额外说明:

plugin 可以通过监听生命周期事件来进行相关行为，也可以复写或增加视图的方法。

QApp.plugin.exists( name ) Method

描述: 检测插件是否存在

参数:

返回值: Boolean 是否存在

QApp.plugin.get( name ) Method

描述: 获取插件当前配置

参数:

返回值: Object 当前配置

QApp.plugin.setOpt( name, options ) Method

描述: 设置插件当前配置

参数:

额外说明:

以 extend 的方式

QApp.plugin.getGlobal( ) Method

描述: 获取全局插件列表

缩略: QApp.configPlugin

返回值: Array 全局插件列表

QApp.plugin.setGlobal( gPlugins ) Method

描述: 设置全局插件

缩略: QApp.setGlobalPlugins

参数:

额外说明:

内部逻辑是 concat 操作

QApp.widget.add( name, adapter[, isEvent] ) Method

描述: 添加组件

缩略: QApp.addWidget

参数:

QApp.addWidget('some', function(element, opt, view) {
  todoSomething();
})

额外说明:

isEvent 是 true 或者是 事件名 (tap) 时为触发式组件，反之为渲染式组件

QApp.widget.exists( name ) Method

描述: 检查组件是否存在

参数:

返回值: Boolean 是否存在

QApp.widget.get( name ) Method

描述: 获取组件当前配置

参数:

返回值: Object 当前组件配置

QApp.widget.show( name[, el], options[, view] ) Method

描述: 显示组件

缩略: QApp.showWidget

参数:

返回值: Any 组件返回的对象

var  widget = QApp.showWidget('searchlist', {
onComplete: function() {
      todoSomething();
}
});

额外说明:

所需参数和返回的对象由组件的适配器决定