hybridstart
Version:
A hybrid application development framework
2,653 lines • 112 kB
HTML
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>混合应用开发框架-HybridStart Documentation</title>
<meta content="HybridStart,APICloud,混合应用框架" name="Keywords">
<meta content="HybridStart 是一套基于APICloud平台的混合应用开发框架，致力于打造最优秀的混合应用开发体验。" name="Description">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta property="og:type" content="document"/>
<meta property="og:release_date" content="2017-06-25"/>
<meta property="og:title" content="HybridStart Documentation"/>
<meta property="og:description" content="HybridStart 是一套基于APICloud平台的混合应用开发框架，致力于打造最优秀的混合应用开发体验。"/>
<meta property="og:document:type" content="html"/>
<meta property="og:image" content="https://github.com/tower1229/tower1229.github.io/raw/master/asset/ico108.png"/>
<meta property="og:document:page" content="1"/>
<meta property="og:document:cost" content="免费"/>
<link href="/HybridStart/docs/favicon.ico" rel="icon">
<link href="/HybridStart/docs/css/style.css" rel="stylesheet">
<script type="text/javascript">
if(window.location.href.indexOf('https')===0){
document.write('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />');
}
</script>
<!--[if lt IE 9]><script src="/HybridStart/docs/lib/H5shiv.js"></script><![endif]-->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?f10103677155b485824f29def715eb5d";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body class="hasNav scrollbar">
<header class="doc-head">
<h1>HybridStart</h1>
<a href="https://github.com/tower1229/HybridStart" target="_blank" class="_link">Github</a>
</header>
<nav class="wrap nav scrollbar" id="nav">导航生成中...</nav>
<section class="wrap" id="overall">
<h2>概述</h2>
<h3 id="overall-intro">关于</h3>
<p>HybridStart是一款基于APICloud的混合应用前端开发框架，提供简洁的引擎能力封装、丰富的UI和插件、清晰的代码管理、简明开发模式，致力于打造最好的多webview混合应用开发体验。</p>
<h4>目录结构</h4>
<pre>
<code class="javascript">
|-- docs/ //文档(开发中移除)
|-- error/ //APP错误页
|-- res/ //APP静态资源
|-- sdk/
| |-- modules/ //js插件
| |-- font/ //字体图标
| |-- core.js //核心库
| |-- server.js //业务方法
| |-- common.js //页面公用代码
|-- loader.js //异步脚本加载器
| `-- ui.css //默认UI
|-- view/ //APP页面(内附示例，开发中移除)
|-- config.js //HybridStart配置
`-- config.xml //APICloud配置
</code>
</pre>
<h4>代码组织</h4>
<p>HybridStart 项目主要包括<strong>SDK</strong>和<strong>View</strong>两部分。</p>
<p>SDK包含核心库、插件、公用代码、UI；View包含所有APP页面，APP页面体现为一个至少包含<code>temp.html</code>、<code>style.css</code>、<code>script.js</code>三个文件的文件夹，页面文件夹在<code>view/</code>中最多嵌套两层，即<code>/view/[...]/page/</code>。</p>
<h4>开发模式</h4>
<p>HybridStart 约定APP的生命周期为 <code>`root -> index(exit) <=> page <=> page ...`</code>，启动页即<code>root</code>通常没有任何可见内容，只执行APP的状态检测、插件调用、监听、数据初始化等操作，完成后直接跳转到用户可见的首页(<code>index</code>)，首页与展示页之间任意跳转返回，但要在首页拦截返回键，使(安卓)APP无法返回启动页，而是退出APP，整个生命周期内启动页都在后台运行。</p>
<h3 id="getStart">快速开始</h3>
<ol>
<li>在APICloud平台创建新项目，添加以下模块：UIPullRefreshFlash、ajpush、bMap、mam</li>
<li>将代码检出到本地，备份config.xml中的<code>appid</code>信息并清空所有文件</li>
<li>将本项目除了<code>docs/</code>以外所有文件拷贝进来，修改新config.xml里的<code>appid</code></li>
<li>提交代码，平台打包</li>
</ol>
<p>详细过程参见<a href="http://jingyan.baidu.com/article/eb9f7b6d60e18f869264e847.html" target="_blank">如何快速开发一款混合应用？</a>。</p>
<h4>命令行工具</h4>
<p><code>npm i</code>安装依赖</p>
<p><code>npm run init</code>开启WiFi调试，默认端口<code>8686</code></p>
<p><code>npm run sync</code>增量同步，注意：<code>init</code>命令将持续占用命令行窗口，此时需要另开一个命令行窗口执行同步操作</p>
<p><code>npm run stop</code>关闭WiFi调试</p>
<p><code>npm run build</code>编译sdk/ui.less到sdk/ui.css</p>
<h4>配置</h4>
<p>config.xml包含原生层面的所有配置，详情参考<a href="http://docs.apicloud.com/Dev-Guide/app-config-manual" target="_blank">config.xml应用配置说明</a>，另外如果需要应用内升级，请一定记得修改config.xml里的scheme值，否则IOS9以上系统无法升级</p>
<pre>
<code>
<preference name="urlScheme" value="hybridstart" />
<preference name="querySchemes" value="hybridstart" />
</code>
</pre>
<p><code>config.js</code>文件是HybridStart的全局配置，所有配置信息挂载在<code>appcfg</code>对象上，包含APP开发的全部配置，也可以自行扩展其他配置。</p>
<p>默认如下：</p>
<table class="table table-bordered">
<tr>
<td>host</td>
<td>
<p>请求域名管理</p>
<table class="table">
<tr>
<td>control</td>
<td>普通api域名</td>
</tr>
<tr>
<td>source</td>
<td>静态资源域名</td>
</tr>
<tr>
<td>upload</td>
<td>上传地址</td>
</tr>
</table>
<p></p>
</td>
</tr>
<tr>
<td>set</td>
<td>
<p>APP常规设置</p>
<table class="table">
<tr>
<td>version</td>
<td>
APP版本，默认<code>"0.0.1"</code>
</td>
</tr>
<tr>
<td>outime</td>
<td>
超时时间，默认<code>10000</code>
</td>
</tr>
<tr>
<td>longtime</td>
<td>
加长超时时间，默认<code>20000</code>
</td>
</tr>
<tr>
<td>windowAnimate</td>
<td>
<p>窗口动画，默认<code>"push"</code>，可选</p>
<pre>
<code>
none //无动画效果
push //新视图将旧视图推开
movein //新视图移到旧视图上面
fade //交叉淡化过渡（不支持过渡方向）
</code>
</pre>
</td>
</tr>
<tr>
<td>animateSubType</td>
<td>
<p>窗口动画方向，默认<code>"from_right"</code>，可选</p>
<pre>
<code>
from_right //从右边开始动画
from_left //从左边开始动画
from_top //从顶部开始动画
from_bottom //从底部开始动画
</code>
</pre>
</td>
</tr>
<tr>
<td>animateDuration</td>
<td>
窗口动画效果时长，默认<code>300</code>
</td>
</tr>
<tr>
<td>safeStorage</td>
<td>
受保护的本地存储键，清理缓存时不会清除，多个值用半角逗号隔开，默认<code>"user,appInit,rights"</code>
</td>
</tr>
<tr>
<td>temporary</td>
<td>
临时本地存储键，退出APP自动清除，多个值用半角逗号隔开，默认<code>"templateCache,gps"</code>
</td>
</tr>
</table>
<p></p>
</td>
</tr>
<tr>
<td>ajax</td>
<td>
<p>ajax相关设置</p>
<table class="table">
<tr>
<td>method</td>
<td>
默认请求方式，默认<code>"get"</code>
</td>
</tr>
<tr>
<td>crypto</td>
<td>
<p>请求加密相关设置，默认</p>
<pre>
<code>
{
enable: false,
key: "abc123",
url: ""
}
</code>
</pre>
<p>默认加密算法是3DES，如果开启加密，secret值存储在<code>/res/key.xml</code>加密文件中</p>
</td>
</tr>
</table>
<p></p>
</td>
</tr>
<tr>
<td>loading</td>
<td>
<p>加载动画设置</p>
<table class="table">
<tr>
<td>text</td>
<td>
显示文字，默认<code>"正在加载"</code>
</td>
</tr>
<tr>
<td>title</td>
<td>
显示标题，默认<code>""</code>
</td>
</tr>
<tr>
<td>anim</td>
<td>
显示动画，默认<code>"fade"</code>，可选"fade/zoom"
</td>
</tr>
</table>
<p></p>
</td>
</tr>
<tr>
<td>pull</td>
<td>
<p>下拉刷新插件设置</p>
<table class="table">
<tr>
<td>bgColor</td>
<td>
下拉部分背景色，默认<code>"#C0C0C0"</code>
</td>
</tr>
<tr>
<td>loadAnimInterval</td>
<td>
图片播放间隔，默认<code>200</code>
</td>
</tr>
<tr>
<td>isScale</td>
<td>
播放下拉过程中的关键帧动画时，是否同时添加等比同步缩放效果；默认<code>true</code>
</td>
</tr>
<tr>
<td>image</td>
<td>
<p>下拉刷新相关图片设置；若不传则使用默认图标，例如：</p>
<pre>
<code>
{
pull: [
"widget://res/img/refresh/dropdown0.png",
"widget://res/img/refresh/dropdown1.png",
"widget://res/img/refresh/dropdown2.png",
"widget://res/img/refresh/dropdown3.png",
"widget://res/img/refresh/dropdown4.png",
"widget://res/img/refresh/dropdown5.png",
"widget://res/img/refresh/dropdown6.png"
],
load: [
"widget://res/img/refresh/loading0.png",
"widget://res/img/refresh/loading1.png",
"widget://res/img/refresh/loading2.png",
"widget://res/img/refresh/loading3.png",
"widget://res/img/refresh/loading4.png"
]
}
</code>
</pre>
</td>
</tr>
</table>
<p></p>
</td>
</tr>
<tr>
<td>plugin</td>
<td>
<p>插件相关设置，便于集中配置插件效果，默认</p>
<pre>
<code>
{
bdmap: {
zoomLeval: 18
}
}
</code>
</pre>
</td>
</tr>
</table>
<h3 id="download">下载</h3>
<h4>Github</h4>
直接下载：<a href="https://github.com/tower1229/HybridStart/archive/master.zip" class="btn btn-ghost btn-success">master.zip</a>
<h4>NPM</h4>
<p><code>npm i hybridstart</code></p>
<h4>体验APP</h4>
体验APP只提供安卓版本：<a href="http://app.mi.com/details?id=com.apicloud.A6997660453388" class="btn btn-ghost btn-success">小米应用商店</a> <a href="http://m.pp.cn/detail.html?appid=7657247&ch_src=pp_dev&ch=default" class="btn btn-ghost btn-success">PP助手</a>
</section>
<section class="wrap" id="SDK">
<h2>SDK</h2>
<h3 id="sdk-core">Core</h3>
<p>如没有特殊说明，<code>app</code>对象上的方法均依赖runtime，且支持安卓和IOS双平台。</p>
<nav class="modules_index" id="component_index"></nav>
<dl class="dl modules_list" id="component_list">
<dt id="app.util(工具包)">app.util</dt>
<dd>
<p>内部工具包，不依赖runtime，包括选择器及其他常用方法，大部分代码来自mui，建议使用前存为变量<code>var $ = app.util;</code></p>
<h5>方法</h5>
<table class="table">
<tr>
<td>$(selector, [context])</td>
<td>
<p>元素选择器，<code>selector</code>参数支持css选择器和原生DOM元素，用于获取DOM元素并返回元素对象，并支持以下扩展方法：</p>
<table class="table">
<tr>
<td>each</td>
<td>
<p>遍历，<code>$ele.each(callback)</code></p>
</td>
</tr>
<tr>
<td>on</td>
<td>
<p>事件绑定/委托，<code>$ele.on(eventType, [child], handle)</code></p>
</td>
</tr>
<tr>
<td>tap</td>
<td>
<p>点击事件，<code>$ele.tap([child], handle)</code></p>
</td>
</tr>
<tr>
<td>trigger</td>
<td>
<p>触发事件，<code>$ele.trigger(eventType, data)</code></p>
</td>
</tr>
<tr>
<td>data</td>
<td>
<p>设置/获取对象的dataset，<code>$ele.data(attribute, [value])</code>。取值优先取元素显性设置的"data-attribute"属性值，如果没有再获取dataset，设置值将统一设置dataset</p>
</td>
</tr>
</table>
<p></p>
</td>
</tr>
<tr>
<td>$.extend(target,source...,deepCopy)</td>
<td>
<p>合并对象，用法同jQuery</p>
</td>
</tr>
<tr>
<td>$.each(elements, callback, hasOwnProperty)</td>
<td>
<p>对象、数组遍历方法</p>
</td>
</tr>
<tr>
<td>$.type(obj)</td>
<td>
<p>返回对象类型</p>
</td>
</tr>
<tr>
<td>$.isArray(obj)</td>
<td>
<p>返回对象是否为数组格式</p>
</td>
</tr>
<tr>
<td>$.isPlainObject(obj)</td>
<td>
<p>返回对象是否为纯粹对象</p>
</td>
</tr>
<tr>
<td>$.isFunction(obj)</td>
<td>
<p>返回对象是否为函数</p>
</td>
</tr>
<tr>
<td>$.trim(string)</td>
<td>
<p>返回去除首尾空字符后的字符串</p>
</td>
</tr>
<tr>
<td>$.trigger(element, eventType, eventData)</td>
<td>
<p>触发事件</p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
var $ = app.util;
$('#view').on('touchend', '.item', function(i, e){
console.log($(e).data('uuid'));
});
</code>
</pre>
</dd>
<dt id="app.ready(runtime就绪)">app.ready(callback)</dt>
<dd>
<p>原生runtime就绪回调，显然不依赖runtime。</p>
<h5>示例</h5>
<pre>
<code>
app.ready(function(){
console.log(api.appId);
});
</code>
</pre>
</dd>
<dt id="app.exit(退出)">app.exit(silent)</dt>
<dd>
<p>退出APP，若<code>silent</code>为真值将没有确认信息直接退出。</p>
<h5>示例</h5>
<pre>
<code>
app.exit();
</code>
</pre>
</dd>
<dt id="app.subscribe(监听全局事件)">app.subscribe(eventName, callback)</dt>
<dd>
<p>接收名称为eventName的事件，并执行回调callback</p>
<h5>示例</h5>
<pre>
<code>
app.subscribe('hello', function(msg){
console.log('hello ' + msg);
});
</code>
</pre>
</dd>
<dt id="app.publish(发布全局事件)">app.publish(eventName, msg)</dt>
<dd>
<p>发布名称为eventName的事件，附带消息msg，将在接收事件回调中接收</p>
<h5>示例</h5>
<pre>
<code>
app.publish('hello', 'world!');
</code>
</pre>
</dd>
<dt id="app.on(系统事件)">app.on(event, callback)</dt>
<dd>
<p>APP系统事件监听。</p>
<h5>支持事件</h5>
<table class="table">
<tr>
<td>batterylow</td>
<td>
<p>电量低事件，返回格式</p>
<pre>
<code>
{
level:100, //电池电量（0-100）
isPlugged:true //是否连接电源
}
</code>
</pre>
</td>
</tr>
<tr>
<td>batterystatus</td>
<td>
<p>电池状态变化事件，返回格式</p>
<pre>
<code>
{
level:100, //电池电量（0-100）
isPlugged:true //是否连接电源
}
</code>
</pre>
</td>
</tr>
<tr>
<td>offline</td>
<td>
<p>监听设备断开网络的事件</p>
</td>
</tr>
<tr>
<td>online</td>
<td>
<p>监听设备连接到网络的事件</p>
</td>
</tr>
<tr>
<td>pause</td>
<td>
<p>应用进入后台事件</p>
</td>
</tr>
<tr>
<td>resume</td>
<td>
<p>应用从后台回到前台事件</p>
</td>
</tr>
<tr>
<td>shake</td>
<td>
<p>设备摇动事件</p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
app.on('pause', function(){
console.log('app进入后台');
});
</code>
</pre>
</dd>
<dt id="app.key(按键监听)">app.key(keyName, callback)</dt>
<dd>
<p>手机按键监听。</p>
<h5>支持按键</h5>
<table class="table">
<tr>
<td>keyback</td>
<td>
<p>返回键</p>
</td>
</tr>
<tr>
<td>keymenu</td>
<td>
<p>菜单键</p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
app.key('keyback', function(){
console.log('按下了返回键');
});
</code>
</pre>
</dd>
<dt id="app.off(取消监听)">app.off(keyName)</dt>
<dd>
<p>取消事件监听，支持系统事件、自定义事件以及按键监听。</p>
<h5>示例</h5>
<pre>
<code>
app.off('hello'); //取消自定义事件
app.off('keyback'); //取消按键监听
app.off('pause'); //取消内置事件
</code>
</pre>
</dd>
<dt id="app.getParam(获取参数)">app.getParam()</dt>
<dd>
<p>获取页面参数，不依赖runtime，仅支持使用<code>app</code>对象方法打开的页面。</p>
<h5>示例</h5>
<pre>
<code>
var pageParam = app.getParam();
console.log(pageParam);
</code>
</pre>
</dd>
<dt id="app.openView(打开页面)">app.openView(param, leval1, [leval2])</dt>
<dd>
<p>跳转/打开页面，leval1和leval2分别代表页面在<code>view/</code>内的两级文件夹路径，leval2选填，openView将打开路径文件夹内的<code>temp.html</code>页面，因此<code>view/</code>内最多支持两级目录。详细参数：</p>
<table class="table bordered">
<tr>
<td>param</td>
<td>
<p>当param不是对象时，将作为参数直接传递给新页面；若为对象类型可以传入更多配置，详见下文；若既不需要传参也不需要修改配置，则要传入<code>null/undefined</code>占位。</p>
</td>
</tr>
<tr>
<td>param.param</td>
<td>
<p>将传递给新页面的参数，可以在新页面内用<code>app.getParam()</code>方法同步获取到；如果所传参数是对象类型，也可以通过<code>api.pageParam</code>获取，但需等待runtime就绪，不建议使用。</p>
</td>
</tr>
<tr>
<td>param.duration</td>
<td>
<p>页面切换动画时长，单位ms，默认应用全局配置<code>appcfg.set.animateDuration</code></p>
</td>
</tr>
<tr>
<td>param.anim</td>
<td>
<p>页面切换动画类型，支持类型见<a href="#app.window.open">app.window.open()</a>，默认应用全局配置<code>appcfg.set.windowAnimate</code></p>
</td>
</tr>
<tr>
<td>param.fullPath</td>
<td>
<p>默认<code>false</code>，是否将参数leval1的值作为页面完整地址访问，可以用于访问<code>view/</code>之外的页面。</p>
</td>
</tr>
<tr>
<td>param.pop</td>
<td>
<p>默认<code>false</code>，是否以弹窗形式打开。</p>
<p>若为<code>true</code>，还可以传<code>param.top</code>和<code>param.height</code>，指示弹层的顶部位置和高度，默认都是0</p>
</td>
</tr>
<tr>
<td>param.bar</td>
<td>
<p>默认<code>false</code>，是否以带标题栏的方式打开。</p>
<p>若为<code>true</code>，还可以传<code>param.title</code>作为标题内容</p>
</td>
</tr>
<tr>
<td>param.closeself</td>
<td>
<p>默认<code>false</code>，是否跳转到新页面后关闭当前页面</p>
</td>
</tr>
<tr>
<td>param.closeback</td>
<td>
<p>默认<code>false</code>，是否跳转到新页面后关闭所有后台页面</p>
</td>
</tr>
<tr>
<td>leval1</td>
<td>
<p>目标页面在<code>view/</code>内的一级目录</p>
<p>当leval1是url时，将以web页面形式打开，此时将忽略leval2</p>
</td>
</tr>
<tr>
<td>leval2</td>
<td>
<p>目标页面在<code>view/</code>内的二级目录，若没有二级目录可以省略
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
app.openView(null,'news'); //将打开 "view/news/temp.html"
app.openView(null,'news','detail'); //将打开 "view/news/detail/temp.html"
</code>
</pre>
</dd>
<dt id="app.loading(等待提示)">app.loading</dt>
<dd>
<p>打开/关闭等待提示。</p>
<h5>方法</h5>
<table class="table bordered">
<tr>
<td>show([msg], [config])</td>
<td>
<p>显示loading，msg为等待提示文字，默认<code>appcfg.loading.text</code>。config配置如下：</p>
<table class="table">
<tr>
<td>title</td>
<td>
<p>提示标题，默认<code>appcfg.loading.title</code></p>
</td>
</tr>
<tr>
<td>anim</td>
<td>
<p>动画类型，支持"fade/zoom"，默认<code>appcfg.loading.anim</code></p>
</td>
</tr>
<tr>
<td>modal</td>
<td>
<p>默认<code>true</code>，是否模态</p>
</td>
</tr>
<tr>
<td>delay</td>
<td>
<p>延时关闭时间，单位ms，默认<code>0</code></p>
</td>
</tr>
</table>
<p></p>
</td>
</tr>
<tr>
<td>hide()</td>
<td>
<p>关闭loading</p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
app.loading.show();
setTimeout(function(){
app.loading.hide();
},2000);
</code>
</pre>
</dd>
<dt id="app.pull(下拉刷新)">app.pull</dt>
<dd>
<p>设置/复位window或frame的下拉刷新状态。</p>
<h5>方法</h5>
<table class="table bordered">
<tr>
<td>init(callback)</td>
<td>
<p>初始化下拉刷新功能，callback是触发回调，必填，其他配置见<code>appcfg.pull</code></p>
</td>
</tr>
<tr>
<td>stop()</td>
<td>
<p>停止下拉刷新效果，恢复到正常状态</p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
app.pull.init(function(){
console.log('触发下拉刷新');
setTimeout(function(){
app.pull.stop(); //复位下拉刷新状态
}, 2000);
});
</code>
</pre>
</dd>
<dt id="app.toast(提示信息)">app.toast(msg, config)</dt>
<dd>
<p>打开一个自动关闭的提示消息，config也支持传入整数，表示延时关闭毫秒数。</p>
<h5>配置</h5>
<table class="table bordered">
<tr>
<td>global</td>
<td>
<p>默认<code>false</code>，是否是全局的toast。若为false，toast将只在当前window范围可见</p>
</td>
</tr>
<tr>
<td>location</td>
<td>
<p>显示位置，默认<code>"bottom"</code>，可选"top/middle/bottom"</p>
</td>
</tr>
<tr>
<td>delay</td>
<td>
<p>延时关闭时间，默认<code>700</code>，单位ms</p>
</td>
</tr>
<tr>
<td>onclose</td>
<td>
<p>关闭回调函数，默认<code>null</code></p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
app.toast('hello toast!');
</code>
</pre>
</dd>
<dt id="app.alert(警告)">app.alert(msg, sureHandle, config)</dt>
<dd>
<p>弹出带一个按钮的对话框。msg是提示文字，sureHandle是点击回调，config配置如下：</p>
<h5>配置</h5>
<table class="table bordered">
<tr>
<td>title</td>
<td>
<p>对话框标题，默认无</p>
</td>
</tr>
<tr>
<td>buttons</td>
<td>
<p>按钮文字设置，默认<code>["确定"]</code></p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
app.alert('Are you sure?', function(){
console.log('点击确定的回调');
});
</code>
</pre>
</dd>
<dt id="app.confirm(确认)">app.confirm(msg, sureHandle, cancelHandle, config)</dt>
<dd>
<p>弹出带两个按钮的确认对话框。msg是提示文字，sureHandle是确认回调，cancelHandle是取消回调，config配置如下：</p>
<h5>配置</h5>
<table class="table bordered">
<tr>
<td>title</td>
<td>
<p>对话框标题，默认无</p>
</td>
</tr>
<tr>
<td>buttons</td>
<td>
<p>按钮文字设置，默认<code>['确定', '取消']</code></p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
app.confirm('Are you sure?', function(){
console.log('点击确定的回调');
}, function(){
console.log('点击取消的回调');
});
</code>
</pre>
</dd>
<dt id="app.prompt(输入)">app.prompt(sureHandle, cancelHandle, config)</dt>
<dd>
<p>弹出一个带两个按钮的输入框，sureHandle是确认回调，cancelHandle是取消回调，回调函数将接收用户输入内容，config配置如下：</p>
<h5>配置</h5>
<table class="table bordered">
<tr>
<td>title</td>
<td>
<p>输入框标题，默认无</p>
</td>
</tr>
<tr>
<td>title</td>
<td>
<p>输入框提示文字，默认无</p>
</td>
</tr>
<tr>
<td>text</td>
<td>
<p>输入框默认内容，默认无</p>
</td>
</tr>
<tr>
<td>type</td>
<td>
<p>输入框文字内容，默认<code>"text"</code>，可选text、password、number、email、url</p>
</td>
</tr>
<tr>
<td>buttons</td>
<td>
<p>按钮文字设置，默认<code>['确定', '取消']</code></p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
app.prompt(function(text){
console.log('输入了：' + text);
}, function(){
console.log('取消输入的回调');
});
</code>
</pre>
</dd>
<dt id="app.actionSheet(选择按钮)">app.actionSheet(config, callback)</dt>
<dd>
<p>弹出系统选择按钮框，callback接收点击按钮的序号，config配置如下：</p>
<h5>配置</h5>
<table class="table bordered">
<tr>
<td>title</td>
<td>
<p>标题，默认无</p>
</td>
</tr>
<tr>
<td>cancelTitle</td>
<td>
<p>取消按钮文字，默认<code>'取消'</code></p>
</td>
</tr>
<tr>
<td>destructiveTitle</td>
<td>
<p>唯一一个红色按钮文字，默认无</p>
</td>
</tr>
<tr>
<td>buttons</td>
<td>
<p>按钮组，必填，例如<code>['a','b','c']</code></p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
app.actionSheet({
title: '选择头像',
buttons: ['拍摄', '相册选择']
}, function(idx){
console.log('点击按钮：' + idx);
});
</code>
</pre>
</dd>
<dt id="app.storage.val(数据存/取)">app.storage.val(key, [value])</dt>
<dd>
<p>存储/读取值，支持对象类型自动转化。</p>
<h5>示例</h5>
<pre>
<code>
app.storage.val('test', {a:1});
console.log( app.storage.val('test') ) //{a:1}
</code>
</pre>
</dd>
<dt id="app.storage.remove(删除数据)">app.storage.remove(key)</dt>
<dd>
<p>删除本地存储key的值</p>
</dd>
<dt id="app.storage.leaveSpace(剩余存储空间)">app.storage.leaveSpace()</dt>
<dd>
<p>返回本地存储剩余空间，单位byte</p>
</dd>
<dt id="app.storage.clear(清空存储)">app.storage.clear(force)</dt>
<dd>
<p>清除本地存储，默认跳过<code>appcfg.set.safeStorage</code>中设置的key，除非<code>force</code>为真值。</p>
</dd>
<dt id="app.window.open(打开窗口)">app.window.open(config)</dt>
<dd>
<p>跳转/打开窗口。</p>
<h5>配置</h5>
<table class="table">
<tr>
<td>name</td>
<td>
<p>窗口名称，不传将自动生成</p>
</td>
</tr>
<tr>
<td>url</td>
<td>
<p>页面url，必须</p>
</td>
</tr>
<tr>
<td>param</td>
<td>
<p>传递给新页面的参数，可以使用<code>app.getparam()</code>方法获取</p>
</td>
</tr>
<tr>
<td>anim</td>
<td>
<p>打开窗口的动画效果，默认<code>appcfg.set.windowAnimate</code></p>
</td>
</tr>
<tr>
<td>duration</td>
<td>
<p>打开窗口动画的时长，单位ms，默认<code>appcfg.set.animateDuration</code></p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
app.window.open({
url: '../view/index/temp.html'
});
</code>
</pre>
</dd>
<dt id="app.window.close(关闭窗口)">app.window.close([winName], [config])</dt>
<dd>
<p>关闭名称为<code>winName</code>的窗口，若不传winName将关闭当前window或frame。config配置如下：</p>
<table class="table">
<tr>
<td>anim</td>
<td>
<p>关闭窗口的动画效果，默认<code>appcfg.set.windowAnimate</code></p>
</td>
</tr>
<tr>
<td>duration</td>
<td>
<p>关闭窗口动画的时长，单位ms，默认<code>appcfg.set.animateDuration</code></p>
</td>
</tr>
<tr>
<td>isFrame</td>
<td>
<p>如果winName是frame的名称，需要设置为真值，默认<code>false</code></p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
app.window.close(); //关闭当前window或Frame
</code>
</pre>
</dd>
<dt id="app.window.on(窗口事件)">app.window.on(event, callback)</dt>
<dd>
<p>窗口事件监听，手势事件支持浮动窗口。</p>
<h5>支持事件</h5>
<table class="table">
<tr>
<td>pause</td>
<td>
<p>页面退到后台事件。</p>
</td>
</tr>
<tr>
<td>resume</td>
<td>
<p>页面回到前台或初次显示事件。</p>
</td>
</tr>
<tr>
<td>scrolltobottom</td>
<td>
<p>页面滚动到底部事件。</p>
</td>
</tr>
<tr>
<td>swipleft</td>
<td>
<p>从左向右滑动事件。</p>
</td>
</tr>
<tr>
<td>swipright</td>
<td>
<p>从右向左滑动事件。</p>
</td>
</tr>
<tr>
<td>swipup</td>
<td>
<p>从上向下滑动事件。</p>
</td>
</tr>
<tr>
<td>swipdown</td>
<td>
<p>从下往上滑动事件。</p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
app.window.on('resume', function(){
console.log('页面正在前台');
});
</code>
</pre>
</dd>
<dt id="app.window.evaluate(跨页面脚本执行)">app.window.evaluate(name, [frameName], scriptContent)</dt>
<dd>
<p>在名称为name的窗口，或name窗口内名称为frameName的浮动窗口中，执行脚本scriptContent。</p>
<p>name可以为空，默认当前窗口。</p>
<h5>示例</h5>
<pre>
<code>
app.window.evaluate('member_index', 'app.window.close()');
</code>
</pre>
</dd>
<dt id="app.window.openPopover(打开Frame)">app.window.openPopover(config)</dt>
<dd>
<p>打开Frame窗口，Frame窗口的window对象上将扩展selfTop属性，值为自身距离屏幕底部距离。</p>
<h5>配置</h5>
<table class="table bordered">
<tr>
<td>name</td>
<td>
<p>Frame窗口名称，不传将自动生成</p>
</td>
</tr>
<tr>
<td>url</td>
<td>
<p>Frame窗口url，必须</p>
</td>
</tr>
<tr>
<td>param</td>
<td>
<p>传给Frame窗口的参数，可以使用<code>app.getparam()</code>方法获取，如果是对象类型也可以通过<code>api.pageParam</code>获取，但该方法需要等待runtime就绪。</p>
</td>
</tr>
<tr>
<td>left</td>
<td>
<p>Frame窗口距屏幕左边缘距离，默认<code>0</code></p>
</td>
</tr>
<tr>
<td>top</td>
<td>
<p>Frame窗口距屏幕上边缘距离，默认<code>0</code></p>
</td>
</tr>
<tr>
<td>width</td>
<td>
<p>Frame窗口宽度，默认<code>'auto'</code>，将横向充满屏幕</p>
</td>
</tr>
<tr>
<td>height</td>
<td>
<p>Frame窗口高度，默认<code>'auto'</code>，将纵向充满屏幕</p>
</td>
</tr>
<tr>
<td>bottomMargin</td>
<td>
<p>Frame窗口距离底部距离，默认<code>0</code>，不可与height同时使用</p>
</td>
</tr>
<tr>
<td>bounce</td>
<td>
<p>Frame窗口是否支持弹动效果，默认<code>false</code></p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
app.window.openPopover({
url: './content.html',
top: 40
});
</code>
</pre>
</dd>
<dt id="app.window.popoverElement(指定区域Frame)">app.window.popoverElement(config)</dt>
<dd>
<p>在指定元素区域打开浮动窗口。</p>
<h5>配置</h5>
<table class="table bordered">
<tr>
<td>id</td>
<td>
<p>指定元素的id，必须</p>
</td>
</tr>
<tr>
<td>url</td>
<td>
<p>打开浮动窗口的url，必须</p>
</td>
</tr>
<tr>
<td>name</td>
<td>
<p>指定浮动窗口的名称，默认使用id作为名称</p>
</td>
</tr>
<tr>
<td>bounce</td>
<td>
<p>浮动窗口是否支持弹动效果，默认<code>false</code></p>
</td>
</tr>
<tr>
<td>param</td>
<td>
<p>传给浮动窗口的参数，可以使用<code>app.getparam()</code>方法获取。</p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
app.window.popoverElement({
id: 'view',
url: './content.html'
});
</code>
</pre>
</dd>
<dt id="app.window.setPopover(修改Frame属性)">app.window.setPopover(config)</dt>
<dd>
<p>设置指定浮动窗口的属性。</p>
<h5>配置</h5>
<table class="table bordered">
<tr>
<td>name</td>
<td>
<p>要修改的Frame窗口名称，必须</p>
</td>
</tr>
<tr>
<td>bounces</td>
<td>
<p>Frame窗口是否有弹动效果</p>
</td>
</tr>
<tr>
<td>hidden</td>
<td>
<p>Frame窗口是否隐藏</p>
</td>
</tr>
<tr>
<td>bgColor</td>
<td>
<p>Frame窗口背景色</p>
</td>
</tr>
<tr>
<td>vScrollBarEnabled</td>
<td>
<p>Frame窗口是否显示垂直滚动条</p>
</td>
</tr>
<tr>
<td>hScrollBarEnabled</td>
<td>
<p>Frame窗口是否显示水平滚动条</p>
</td>
</tr>
<tr>
<td>scaleEnabled</td>
<td>
<p>Frame窗口是否可以缩放</p>
</td>
</tr>
<tr>
<td>rect</td>
<td>
<p>Frame窗口位置及尺寸，格式</p>
<pre>
<code>
{
x:0, //左上角x坐标
y:0, //左上角y坐标
w:320, //宽度，若传'auto'，页面从x位置开始自动充满父页面宽度
h:480 //高度，若传'auto'，页面从y位置开始自动充满父页面高度
}
</code>
</pre>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
app.window.setPopover({
name: 'pop_detail',
hidden: true
});
</code>
</pre>
</dd>
<dt id="app.window.animPopover(移动Frame)">app.window.animPopover(config)</dt>
<dd>
<p>frame窗口动画。</p>
<h5>配置</h5>
<table class="table">
<tr>
<td>delay</td>
<td>
<p>动画执行延迟时间，单位ms，默认<code>0</code></p>
</td>
</tr>
<tr>
<td>duration</td>
<td>
<p>动画时长，单位ms，默认<code>appcfg.set.animateDuration</code></p>
</td>
</tr>
<tr>
<td>curve</td>
<td>
<p>动画曲线类型，默认<code>'ease_in_out</code>，可选</p>
<pre>
<code>
ease_in_out //开始和结束时慢
ease_in //开始时慢
ease_out //结束时慢
linear //整个动画过程速率一样
</code>
</pre>
</td>
</tr>
<tr>
<td>repeatCount</td>
<td>
<p>动画重复次数，默认<code>0</code></p>
</td>
</tr>
<tr>
<td>translation</td>
<td>
<p>位置平移参数，格式</p>
<pre>
<code>
{
x: 0,
y: 0,
z: 0
}
</code>
</pre>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
app.window.animPopover({
name: 'news_detail',
translation: {
x: 320
}
});
</code>
</pre>
</dd>
<dt id="app.ajax(异步请求)">app.ajax(option)</dt>
<dd>
<p>跨域异步请求。</p>
<h5>配置</h5>
<table class="table bordered">
<tr>
<td>method</td>
<td>
<p>请求方式，默认<code>appcfg.ajax.type</code>，支持常规get,post,put,delete,head,options,trace,patch,额外增加payload</p>
</td>
</tr>
<tr>
<td>dataType</td>
<td>
<p>请求数据格式，默认<code>"json"</code></p>
</td>
</tr>
<tr>
<td>timeout</td>
<td>
<p>超时时间，默认<code>appcfg.set.outime / 1000</code>，单位s</p>
</td>
</tr>
<tr>
<td>snapshoot</td>
<td>
<p>是否开启快照缓存，默认<code>false</code></p>
</td>
</tr>
<tr>
<td>url</td>
<td>
<p>请求url</p>
</td>
</tr>
<tr>
<td>data</td>
<td>
<p>发送数据</p>
</td>
</tr>
<tr>
<td>success</td>
<td>
<p>请求成功回调，接受返回数据</p>
</td>
</tr>
<tr>
<td>error</td>
<td>
<p>请求失败回调，接收错误信息对象，若不传将使用默认错误提示</p>
</td>
</tr>
</table>
<h5>返回方法</h5>
<table class="table">
<tr>
<td>abort()</td>
<td>
<p>中止本次请求。</p>
</td>
</tr>
<tr>
<td>clearSnapshoot()</td>
<td>
<p>清除本请求地址的快照缓存。</p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
app.ajax({
url: appcfg.host.control + '/login',
data: {
...
},
success: function(res){
//
}
});
</code>
</pre>
</dd>
<dt id="app.device.os(系统信息)">app.device.os()</dt>
<dd>
<p>获取设备系统信息。返回数据格式：</p>
<pre>
<code>
{
name: "android", //系统名称
version: "6.1" //系统版本
}
</code>
</pre>
<h5>示例</h5>
<pre>
<code>
var os = app.device.os();
console.log(os);
</code>
</pre>
</dd>
<dt id="app.device.screen(屏幕信息)">app.device.screen()</dt>
<dd>
<p>获取设备屏幕信息。返回数据格式：</p>
<pre>
<code>
{
resolutionHeight: "1080", //设备高度物理像素数
resolutionWidth: "640", //设备宽度物理像素数
width:"320", //设备宽度像素数
height:"540" //设备高度像素数
}
</code>
</pre>
<h5>示例</h5>
<pre>
<code>
var screen = app.device.screen();
console.log(screen);
</code>
</pre>
</dd>
<dt id="app.device.uuid(设备唯一标识)">app.device.uuid()</dt>
<dd>
<p>返回设备唯一标识，字符串类型。</p>
<h5>示例</h5>
<pre>
<code>
var uuid = app.device.uuid();
console.log(uuid);
</code>
</pre>
</dd>
<dt id="app.device.model(设备型号)">app.device.model()</dt>
<dd>
<p>返回设备型号，字符串类型。</p>
<h5>示例</h5>
<pre>
<code>
var model = app.device.model();
console.log(model);
</code>
</pre>
</dd>
<dt id="app.device.connect(网络连接类型)">app.device.connect()</dt>
<dd>
<p>返回当前网络连接类型。支持以下类型：</p>
<pre>
<code>
unknown //未知
ethernet //以太网
wifi //wifi
2g //2G网络
3g //3G网络
4g //4G网络
none //无网络
</code>
</pre>
<h5>示例</h5>
<pre>
<code>
var connect = app.device.connect();
console.log(connect);
</code>
</pre>
</dd>
<dt id="app.device.call(拨打电话)">app.device.call(number, [propt])</dt>
<dd>
<p>拨打电话，默认直接拨打，propt为真值将弹出一个确认提示。</p>
<h5>示例</h5>
<pre>
<code>
app.device.call('10086');
</code>
</pre>
</dd>
<dt id="app.device.setWakeLock(休眠状态)">app.device.setWakeLock([keepOn])</dt>
<dd>
<p>设置设备休眠状态，keepOn为真值设备将保持常亮。</p>
<h5>示例</h5>
<pre>
<code>
app.device.setWakeLock(true);
</code>
</pre>
</dd>
<dt id="app.device.setBadge(设置角标)">app.device.setBadge(number)</dt>
<dd>
<p>设置应用角标数字。</p>
<h5>示例</h5>
<pre>
<code>
app.device.setBadge(1);
</code>
</pre>
</dd>
<dt id="app.device.install(安装应用)">app.device.install(appUri)</dt>
<dd>
<p>安装应用。</p>
<h5>示例</h5>
<pre>
<code>
var os = app.device.os();
var appUri = (os.name==='android' ? 'file://xxx.apk' : 'https://list.kuaiapp.cn/list/KuaiAppZv7.1.plist');
app.device.install(appUri);
</code>
</pre>
</dd>
</dl>
<h3 id="sdk-modules">Modules</h3>
<p>内置模块化插件列表，部分插件间存在依赖关系。</p>
<nav class="modules_index" id="modules_index"></nav>
<dl class="dl modules_list" id="modules_list">
<dt id="jQuery">jQuery</dt>
<dd>
<p>内置jQuery 3.x模块化封装。</p>
<h5>示例</h5>
<pre>
<code>
var $ = require('jquery');
console.log( $ );
</code>
</pre>
</dd>
<dt id="validform(表单验证)">validform</dt>
<dd>
<p>表单验证插件，依赖jQuery插件。来自<a href="http://refined-x.com/Flow-UI/" target="_blank">Flow-UI</a>，请求方法用<code>app.ajax()</code>代替，API及示例参考<a href="http://flow-ui.refined-x.com/docs.html#Validform(%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81)" target="_blank">Flow-UI Validform</a>。</p>
</dd>
<dt id="album(大图播放)">album</dt>
<dd>
<p>大图全屏播放插件，依赖slide\jQuery插件。来自<a href="http://refined-x.com/Flow-UI/" target="_blank">Flow-UI</a>，针对移动端微调，API及示例参考<a href="http://flow-ui.refined-x.com/docs.html#Album(%E7%9B%B8%E5%86%8C)" target="_blank">Flow-UI Album</a>。</p>
</dd>
<dt id="base(工具包)">base</dt>
<dd>
<p>辅助方法。来自<a href="http://refined-x.com/Flow-UI/" target="_blank">Flow-UI</a>，API及示例参考<a href="http://flow-ui.refined-x.com/docs.html#Base(%E5%B7%A5%E5%85%B7%E5%8C%85)" target="_blank">Flow-UI Base</a>。</p>
</dd>
<dt id="countdown(工具包)">countdown</dt>
<dd>
<p>倒计时插件。来自<a href="http://refined-x.com/Flow-UI/" target="_blank">Flow-UI</a>，API及示例参考<a href="http://flow-ui.refined-x.com/docs.html#Countdown(%E5%80%92%E8%AE%A1%E6%97%B6)" target="_blank">Flow-UI Countdown</a>。</p>
</dd>
<dt id="datepicker(日期选择器)">datepicker</dt>
<dd>
<p>日期选择器插件，封装<a href="https://github.com/AppianZ/multi-picker/tree/master/DateSelector" target="_blank">AppianZ/DateSelector</a>。</p>
</dd>
<dt id="download(下载)">download</dt>
<dd>
<p>下载插件，返回下载方法。</p>
<h5>配置</h5>
<table class="table">
<tr>
<td>path</td>
<td>
<p>下载地址，默认<code>"fs://Download/"</code></p>
</td>
</tr>
<tr>
<td>name</td>
<td>
<p>存储名称，默认无。</p>
</td>
</tr>
<tr>
<td>onCreate()</td>
<td>
<p>创建下载成功回调，默认<code>app.toast('正在下载');</code></p>
</td>
</tr>
<tr>
<td>onCreateError(err)</td>
<td>
<p>创建下载失败回调，默认<code>app.toast('创建下载失败：' + err.msg);</code></p>
</td>
</tr>
<tr>
<td>onStatus(percent)</td>
<td>
<p>下载进度变化回掉，默认<code>app.toast('正在下载:' + percent + '%');</code></p>
</td>
</tr>
<tr>
<td>success(savePath, fileSize)</td>
<td>
<p>下载完成回调，默认无</p>
</td>
</tr>
<tr>
<td>error(status)</td>
<td>
<p>下载失败回调，默认</p>
<pre>
<code>
if (status === 2) {
app.toast('下载失败');
} else {
app.toast('下载异常，status:' + status);
}
</code>
</pre>
</td>
</tr>
</table>
<h5>返回对象</h5>
<table class="table">
<tr>
<td>abort()</td>
<td>
<p>中止该下载任务。</p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
var download = require('download');
download("http://static-zt.oss-cn-qingdao.aliyuncs.com/mock/notice2.zip", {
name: 'download-test.zip',
success: function(savePath, fileSize) {
app.toast('下载完成：' + savePath);
}
});
</code>
</pre>
</dd>
<dt id="echarts(图表)">echarts</dt>
<dd>
<p>图表插件，封装<a href="http://echarts.baidu.com/index.html" target="_blank">百度Echarts</a>。</p>
</dd>
<dt id="etpl(模板引擎)">etpl</dt>
<dd>
<p>前端模板引擎，封装<a href="https://github.com/ecomfe/etpl" target="_blank">百度Etpl</a>。</p>
</dd>
<dt id="input-number(数字输入)">input-number</dt>
<dd>
<p>数字输入插件，依赖jQuery\input插件。来自<a href="http://refined-x.com/Flow-UI/" target="_blank">Flow-UI</a>，API及示例参考<a href="http://flow-ui.refined-x.com/docs.html#Input-Number(%E6%95%B0%E5%AD%97%E8%BE%93%E5%85%A5%E6%A1%86)" target="_blank">Flow-UI inputNumber</a>。</p>
</dd>
<dt id="input(输入框)">input</dt>
<dd>
<p>输入框插件，依赖jQuery插件。来自<a href="http://refined-x.com/Flow-UI/" target="_blank">Flow-UI</a>，API及示例参考<a href="http://flow-ui.refined-x.com/docs.html#Input(%E8%BE%93%E5%85%A5%E6%A1%86)" target="_blank">Flow-UI input</a>。</p>
</dd>
<dt id="lazyload(图片懒加载)">lazyload</dt>
<dd>
<p>图片懒加载jQuery插件。来自<a href="http://refined-x.com/Flow-UI/" target="_blank">Flow-UI</a>，API及示例参考<a href="http://flow-ui.refined-x.com/docs.html#Lazyload(%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD)" target="_blank">Flow-UI lazyload</a>。</p>
</dd>
<dt id="multi-picker(选择器)">multi-picker</dt>
<dd>
<p>选择器插件，封装<a href="https://github.com/AppianZ/multi-picker/tree/master/MultiPicker" target="_blank">AppianZ/MultiPicker</a>。</p>
</dd>
<dt id="option-list(左划菜单列表)">option-list</dt>
<dd>
<p>带左划菜单的列表插件，依赖jQuery\etpl插件以及默认UI。</p>
<h5>配置</h5>
<table class="table">
<tr>
<td>selector</td>
<td>
<p>列表生成容器的选择器，默认<code>"body"</code></p>
</td>
</tr>
<tr>
<td>multiShow</td>
<td>
<p>允许多个列表项同时显示菜单，默认<code>false</code></p>
</td>
</tr>
<tr>
<td>duration</td>
<td>
<p>回弹时长，字符串格式，默认<code>"300ms"</code></p>
</td>
</tr>
<tr>
<td>touchClass</td>
<td>
<p>触摸操作时添加的class，默认<code>"active"</code></p>
</td>
</tr>
</table>
<h5>返回对象</h5>
<table class="table">
<tr>
<td>data</td>
<td>
<p>返回实例数据。</p>
</td>
</tr>
<tr>
<td>add(newData, prepend)</td>
<td>
<p>向列表末尾追加元素，newData为对象格式，prepend为真值将向列表头部添加元素。</p>
</td>
</tr>
<tr>
<td>set(data)</td>
<td>
<p>重新设置列表数据，data为对象数组，格式见示例。</p>
</td>
</tr>
<tr>
<td>delete(itemIndex)</td>
<td>
<p>删除列表项</p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
var $ = app.util;
//列表数据格式
var listData = [{
item: '左滑操作列表0',
className: 'first'
}, {
item: '左滑操作列表1'
}, {
item: '左滑操作列表2'
}];
//侧滑操作列表
require.async('option-list', function(optionList) {
var demo = optionList({
selector: '#controlList',
data: listData,
buttons: [{
text: '编辑'
}, {
text: '添加'
}, {
className: 'btn-danger',
text: '删除'
}],
onClick: function(button, itemIndex, itemLength) {
var optionIndex = $(button).data('index');
switch(optionIndex){
case "0":
app.toast(demo.data[itemIndex].item);
break;
case "1":
demo.add({
item: '左滑操作列表' + demo.data.length
});
break;
case "2":
demo.delete(itemIndex);
break;
default:
console.log('optionlist:error');
}
}
});
});
</code>
</pre>
</dd>
<dt id="paging-load(分页加载)">paging-load</dt>
<dd>
<p>分页加载插件，来自<a href="http://refined-x.com/Flow-UI/" target="_blank">Flow-UI</a>，API及示例参考<a href="http://flow-ui.refined-x.com/docs.html#PagingLoad(%E5%88%86%E9%A1%B5%E5%8A%A0%E8%BD%BD)" target="_blank">Flow-UI pagingLoad</a>。</p>
</dd>
<dt id="render(单向绑定渲染)">render</dt>
<dd>
<p>单向绑定渲染器，依赖jQuery\etpl插件。来自<a href="http://refined-x.com/Flow-UI/" target="_blank">Flow-UI</a>，API及示例参考<a href="http://flow-ui.refined-x.com/docs.html#Render(%E6%B8%B2%E6%9F%93%E5%99%A8)" target="_blank">Flow-UI render</a>。</p>
</dd>
<dt id="scroll-col(横向滚动)">scroll-col</dt>
<dd>
<p>滚动插件，依赖jQuery\easing插件。来自<a href="http://refined-x.com/Flow-UI/" target="_blank">Flow-UI</a>，API及示例参考<a href="http://flow-ui.refined-x.com/docs.html#Scroll-col(%E6%A8%AA%E5%90%91%E6%BB%9A%E5%8A%A8)" target="_blank">Flow-UI scrollCol</a>。</p>
</dd>
<dt id="scroll-load(滚动加载)">scroll-load</dt>
<dd>
<p>滚动加载插件，依赖jQuery\base插件。来自<a href="http://refined-x.com/Flow-UI/" target="_blank">Flow-UI</a>，API及示例参考<a href="http://flow-ui.refined-x.com/docs.html#Scroll-load(%E6%BB%9A%E5%8A%A8%E5%8A%A0%E8%BD%BD)" target="_blank">Flow-UI scrollLoad</a>。</p>
</dd>
<dt id="slide(图片轮显)">slide</dt>
<dd>
<p>图片轮显插件，依赖jQuery\base插件。来自<a href="http://refined-x.com/Flow-UI/" target="_blank">Flow-UI</a>，API及示例参考<a href="http://flow-ui.refined-x.com/docs.html#Slide(%E5%B9%BB%E7%81%AF%E7%89%87)" target="_blank">Flow-UI slide</a>。</p>
</dd>
<dt id="upload(上传)">upload</dt>
<dd>
<p>上传插件，返回上传方法。依赖base插件。语法<code>upload(localImgPath, option)</code></p>
<h5>配置</h5>
<table class="table">
<tr>
<td>url</td>
<td>
<p>上传地址，默认无</p>
</td>
</tr>
<tr>
<td>headers</td>
<td>
<p>请求头，对象格式，默认<code>{}</code></p>
</td>
</tr>
<tr>
<td>data</td>
<td>
<p>附带参数，json格式</p>
</td>
</tr>
<tr>
<td>onCreate(upId)</td>
<td>
<p>创建上传成功回调，默认<code>app.toast('正在上传...');</code></p>
</td>
</tr>
<tr>
<td>onCreateError()</td>
<td>
<p>创建上传失败回调，默认<code>app.toast('创建上传失败');</code></p>
</td>
</tr>
<tr>
<td>onStatus(percent)</td>
<td>
<p>上传进度变化回调，默认<code>app.toast('正在上传:' + percent + '%');</code></p>
</td>
</tr>
<tr>
<td>success(remoteUrl)</td>
<td>
<p>上传成功回调，默认无。</p>
</td>
</tr>
<tr>
<td>error</td>
<td>
<p>上传失败回调，默认<code>app.toast('上传失败');</code></p>
</td>
</tr>
</table>
<h5>返回对象</h5>
<table class="table">
<tr>
<td>abort()</td>
<td>
<p>中止该上传任务。</p>
</td>
</tr>
</table>
<h5>示例</h5>
<pre>
<code>
require.async('upload', function(uploader) {
uploader('widget://res/img/avat.jpg', {
url: "http://host.refined-x.com/test/fileupload.php",
success: function(newAvat) {
console.log('上传成功：' + newAvat);
}
});
});
</code>
</pre>
</dd>
</dl>
<h3 id="sdk-ui">UI</h3>
<h4>定制主题</h4>
<p>基于less实现主题定制，less文件与<code>ui.css</code>同目录，定制主题需要修改less文件并编译成同名css文件。</p>
<h4>图标</h4>
<p>内置图标使用<a href="http://iconfont.cn/home/index" target="_blank">阿里巴巴图标库</a>创建，替换图标只需要在平台上自己创建图标项目，将下载的图标文件替换到框架<code>sdk/font/</code>文件夹中即可。</p>
<h4>组件列表</h4>
<p>UI组件示例见演示app。</p>
<nav class="modules_index" id="widgets_index"></nav>
<dl class="dl modules_list" id="widgets_list">
<dt id="grid(栅格系统)">grid</td>
<dd>
<p>12列栅格组件，来自<a href="http://refined-x.com/Flow-UI/" target="_blank">Flow-UI</a>，api及示例参见<a href="http://flow-ui.refined-x.com/docs.html#grid(%E6%A0%85%E6%A0%BC%E7%B3%BB%E7%BB%9F)" target="_blank">Flow-UI grid</a>。</p>
</dd>
<dt id="button(按钮)">button</dt>
<dd>
<p>按钮组件，来自<a href="http://refined-x.com/Flow-UI/" target="_blank">Flow-UI</a>，样式微调，api及示例参见<a href="http://flow-ui.refined-x.com/docs.html#btn(%E6%8C%89%E9%92%AE)" target="_blank">Flow-UI button</a>。</p>
</dd>
<dt id="color(色彩)">color</dt>
<dd>
<p>色彩组件，来自<a href="http://refined-x.com/Flow-UI/" target="_blank">Flow-UI</a>，去掉了辅助色(auxiliary)，api及示例参见<a href="http://flow-ui.refined-x.com/docs.html#color(%E8%89%B2%E5%BD%A9)" target="_blank">Flow-UI color</a>。</p>
</dd>
<dt id="badge(徽标)">badge</dt>
<dd>
<p>徽标组件</p>
<table class="table">
<tr>
<td>.badge</td>
<td>
<p>定义一个徽标元素</p>
</td>
</tr>
<tr>
<td>.badge-primary</td>
<td>
<p>叠加在.badge上以显示为主色调(另："success", "info", "warning", "danger")</p>
</td>
</tr>
</table>
</dd>
<dt id="list(列表)">list</dt>
<dd>
<p>列表组件。</p>
<table class="table">
<tr>
<td>.list</td>
<td>
<p>定义一个列表元素，默认内部H标签和p标签将单行显示，超出隐藏。</p>
</td>
</tr>
<tr>
<td>.item</td>
<td>
<p>在.list元素内定义一个列表项。</p>
</td>
</tr>
<tr>
<td>.item-lite</td>
<td>
<p>叠加在.item上使成为一个紧凑列表项。</p>
</td>
</tr>
<tr>
<td>.active</td>
<td>
<p>叠加在.item上显示为点击状态。</p>
</td>
</tr>
<tr>
<td>.item-text-wrap</td>
<td>
<p>叠加在.item上使文字可换行</p>
</td>
</tr>
<tr>
<td>.item-divider</td>
<td>
<p>叠加在.item上使成为带背景的分隔项。</p>
</td>
</tr>
<tr>
<td>.item-note</td>
<td>
<p>在.item内定义一个右侧备注元素。</p>
</td>
</tr>
<tr>
<td>.item-icon-left</td>
<td>
<p>叠加在.item上为左侧图标预留空间。</p>
</td>
</tr>
<tr>
<td>.item-icon-right</td>
<td>
<p>叠加在.item上为右侧图标预留空间。</p>
</td>
</tr>
<tr>
<td>.item-button-left</td>
<td>
<p>叠加在.item上为左侧按钮预留空间。</p>
</td>
</tr>
<tr>
<td>.item-button-right</td>
<td>
<p>叠加在.item上为右侧按钮预留空间。</p>
</td>
</tr>
<tr>
<td>.item-image</td>
<td>
<p>在.item内定义一个图片包裹元素，内部图片将100%填充。</p>
</td>
</tr>
<tr>
<td>.item-avatar</td>
<td>
<p>叠加在.item上为左侧头像图片预留空间。</p>
</td>
</tr>
<tr>
<td>.item-avatar-right</td>
<td>
<p>叠加在.item上为右侧头像图片预留空间。</p>
</td>
</tr>
<tr>
<td>.item-thumbnail</td>
<td>
<p>叠加在.item上为左侧缩略图片预留空间。</p>
</td>
</tr>
<tr>
<td>.item-thumbnail-right</td>
<td>
<p>叠加在.item上为右侧缩略图片预留空间。</p>
</td>
</tr>
<tr>
<td>.item-body</td>
<td>
<p>在.item内定义一个内容块，文字可以换行显示。</p>
</td>
</tr>
<tr>
<td>.item-badge</td>
<td>
<p>叠加在.item上为.badge元素在右侧预留空间。</p>
</td>
</tr>
</table>
</dd>
<dt id="card(卡片)">card</dt>
<dd>
<p>卡片组件。</p>
<table class="table">
<tr>
<td>.card</td>
<td>
<p>定义一个卡片元素，或叠加在.list上成为卡片式列表。</p>
</td>
</tr>
<tr>
<td>card-head</td>
<td>
<p>定义一个卡片头部。</p>
</td>
</tr>
<tr>
<td>card-title</td>
<td>
<p>在卡片头部内定义一个标题。</p>
</td>
</tr>
<tr>
<td>card-foot</td>
<td>
<p>定义一个卡片底部。</p>
</td>
</tr>
</table>
</dd>
<dt id="form(表单)">form</dt>
<dd>
<p>表单组件。基于.item扩展。</p>
<table class="table">
<tr>
<td>.item-input</td>
<td>
<p>叠加在.item上定义一个输入项，内部input/textarea标签将自动应用样式。</p>
</td>
</tr>
<tr>
<td>.item-stacked-label</td>
<td>
<p>叠加在.item-input上使成为一个带提示文字的输入项。</p>
</td>
</tr>
<tr>
<td>.input-label</td>
<td>
<p>在.item-stacked-label定义一个提示文字元素。</p>
</td>
</tr>
<tr>
<td>.item-checkbox</td>
<td>
<p>叠加在.item上定义一个多选元素项。</p>
</td>
</tr>
<tr>
<td>.checkbox</td>
<td>
<p>在.item-checkbox内定义一个多选状态指示符。</p>
</td>
</tr>
<tr>
<td>.checkbox-primary</td>
<td>
<p>叠加在.checkbox上使指示符应用主色调，可选颜色组件中的所有颜色。</p>
</td>
</tr>
<tr>
<td>.item-radio</td>
<td>
<p>叠加在.item上定义一个单选元素项。</p>
</td>
</tr>
<tr>
<td>.radio-primary</td>
<td>
<p>叠加在.radio上使指示符应用主色调，可选颜色组件中的所有颜色。</p>
</td>
</tr>
<tr>
<td>.item-select</td>
<td>
<p>叠加在.item上定义一个选择项，内部select元素将自动应用样式。</p>
</td>
</tr>
</table>
</dd>
<dt id="toggle(开关)">toggle</dt>
<dd>
<p>开关组件。基于.item扩展。</p>
<table class="table">
<tr>
<td>.item-toggle</td>
<td>
<p>叠加在.item上定义一个开关项。</p>
</td>
</tr>
<tr>
<td>.toggle</td>
<td>
<p>在.item-toggle内定义一个开关。</p>
</td>
</tr>
<tr>
<td>.toggle-primary</td>
<td>
<p>叠加在.toggle上使指示符应用主色调，可选颜色组件中的所有颜色。</p>
</td>
</tr>
</table>
</dd>
<dt id="range(滑块)">range</dt>
<dd>
<p>滑块组件。基于.item扩展。</p>
<table class="table">
<tr>
<td>.range</td>
<td>
<p>叠加在.item上定义一个滑块容器，内部input[type="range"]将自动应用样式。</p>
</td>
</tr>
<tr>
<td>.range-label</td>
<td>
<p>在.range内定义一个内容指示器。</p>
</td>
</tr>
</table>
</dd>
<dt id="flex-grid(Flex栅格)">flex-grid</dt>
<dd>
<p>Flex栅格组件，来自<a href="http://refined-x.com/Flow-UI/" target="_blank">Flow-UI</a>，样式微调，api及示例参见<a href="http://flow-ui.refined-x.com/docs.html#flex(flex%E6%A0%85%E6%A0%BC)" target="_blank">Flow-UI flex</a>。</p>
</dd>
<dt id="rect(比例矩形)">rect</dt>
<dd>
<p>比例矩形组件，来自<a href="http://refined-x.com/Flow-UI/" target="_blank">Flow-UI</a>，样式微调，api及示例参见<a href="http://flow-ui.refined-x.com/docs.html#rect(%E7%AD%89%E6%AF%94%E5%A1%AB%E5%85%85)" target="_blank">Flow-UI rect</a>。</p>
</dd>
<dt id="space(间距)">space</dt>
<dd>
<p>间距组件，来自<a href="http://refined-x.com/Flow-UI/" target="_blank">Flow-UI</a>，样式微调，api及示例参见<a href="http://flow-ui.refined-x.com/docs.html#space(%E9%97%B4%E8%B7%9D)" target="_blank">Flow-UI space</a>。</p>
</dd>
<dt id="tools(工具)">tools</dt>
<dd>
<p>工具类。</p>
<table class="table">
<tr>
<td>.fix</td>
<td>
<p>清除浮动。</p>
</td>
</tr>
<tr>
<td>.oh</td>
<td>
<p>超出隐藏。</p>
</td>
</tr>
<tr>
<td>.l/.r</td>
<td>
<p>左/右浮动。</p>
</td>
</tr>
<tr>
<td>.pr/.pa</td>
<td>
<p>相对/绝对定位。</p>
</td>
</tr>
<tr>
<td>.tc/.tl/.tr</td>
<td>
<p>中/左/右对齐。</p>
</td>
</tr>
<tr>
<td>.el</td>
<td>
<p>单行文字，超出显示...</p>
</td>
</tr>
<tr>
<td>.hide</td>
<td>
<p>隐藏元素。</p>
</td>
</tr>
<tr>
<td>.hidetext</td>
<td>
<p>隐藏内部文字。</p>
</td>
</tr>
<tr>
<td>.opc0</td>
<td>
<p>透明元素。</p>
</td>
</tr>
<tr>
<td>.big</td>
<td>
<p>大字号。</p>
</td>
</tr>
<tr>
<td>.small</td>
<td>
<p>小字号。</p>
</td>
</tr>
</table>
</dd>
<dt id="head(头部)">head</dt>
<dd>
<p>头部组件。</p>
<table class="table">
<tr>
<td>.head</td>
<td>
<p>定义一个头部元素。</p>
</td>
</tr>
<tr>
<td>.title</td>
<td>
<p>定义一个标题。</p>
</td>
</tr>
<tr>
<td>.btn</td>
<td>
<p>.head内.btn:first和.btn:last元素分别显示在头部左侧和右侧。</p>
</td>
</tr>
<tr>
<td>.item-input-inset</td>
<td>
<p>定义一个头部输入框。</p>
</td>
</tr>
</table>
</dd>
<dt id="foot(底部导航)">foot</dt>
<dd>
<p>底部导航组件。</p>
<table class="table">
<tr>
<td>.foot</td>
<td>
<p>定义一个底部导航容器。</p>
</td>
</tr>
<tr>
<td>.tabs</td>
<td>
<p>在.foot内定义一个导航组件。</p>
</td>
</tr>
<tr>
<td>.tabs-ion-top</td>
<td>
<p>叠加在.tabs上显示为带图标的导航。</p>
</td>
</tr>
<tr>
<td>.tabs-text</td>
<td>
<p>叠加在.tabs上显示为纯文字导航。</p>
</td>
</tr>
<tr>
<td>.tab-item</td>
<td>
<p>在.tabs内定义一个菜单项，自适应宽度。</p>
</td>
</tr>
<tr>
<td>.cur</td>
<td>
<p>叠加在.tab-item上显示为当前状态。</p>
</td>
</tr>
<tr>
<td>.active</td>
<td>
<p>叠加在.tab-item上显示为触摸状态。</p>
</td>
</tr>
</table>
</dd>
<dt id="listPlaceholder(暂无内容)">listPlaceholder</dt>
<dd>
<p>暂无内容组件。</p>
<table class="table">
<tr>
<td>.listPlaceholder</td>
<td>
<p>定义一个暂无内容元素。</p>
</td>
</tr>
<tr>
<td>._container</td>
<td>
<p>在.listPlaceholder内定义一个容器元素。</p>
</td>
</tr>
<tr>
<td>._icon</td>
<td>
<p>在._container内定义一个图片区域。</p>
</td>
</tr>
<tr>
<td>._text</td>
<td>
<p>在._container内定义一个文字区域。</p>
</td>
</tr>
</table>
</dd>
<dt id="picControl(图片上传组件)">picControl</dt>
<dd>
<p>图片上传组件，参考示例APP中的图片上传示例。</p>
<table class="table">
<tr>
<td>.picControl</td>
<td>
<p>定义一个图片上传队列组件。</p>
</td>
</tr>
<tr>
<td>.bordered</td>
<td>
<p>叠加在.picControl上显示为带边框组件。</p>
</td>
</tr>
<tr>
<td>._adder</td>
<td>
<p>在.picControl内定义一个添加图片按钮。</p>
</td>
</tr>
<tr>
<td>._pic</td>
<td>
<p>在.picControl内定义一个图片元素，内部需包含img元素。</p>
</td>
</tr>
<tr>
<td>._del</td>
<td>
<p>在._pic元素内定义一个删除按钮，内部需包含.ion图标。</p>
</td>
</tr>
<tr>
<td>._state</td>
<td>
<p>在._pic元素内定义一个上传进度元素。</p>
</td>
</tr>
</table>
</dd>
<dt id="other(辅助类)">other</dt>
<dd>
<p>辅助类。</p>
<table class="table">
<tr>
<td>img[data-src]</td>
<td>
<p>懒加载图片默认占位。</p>
</td>
</tr>
<tr>
<td>img[data-remote]</td>
<td>
<p>待缓存图片默认占位，该功能在<code>sdk/server.js</code>中。</p>
</td>
</tr>
<tr>
<td>.onKeyboard</td>
<td>
<p>打开键盘时body自动添加该类，该功能在<code>sdk/common.js</code>中。</p>
</td>
</tr>
<tr>
<td>.block-holder</td>
<td>
<p>将元素/图片修饰为占位元素。</p>
</td>
</tr>
</table>
</dd>
</dl>
</section>
<section class="wrap" id="solution">
<h2>解决方案</h2>
<h3 id="solution-speed">进场动画提速</h3>
<p>框架使用seajs作为脚本加载器，按照约定页面文件和脚本文件位于同目录下，因此页面加载js正常应该在底部这样写：</p>
<pre>
<code>
<script src="../../config.js"></script>
<script src="../../sdk/core.js" id="seajsnode"></script>
<script>
seajs.use('./script');
</script>
</code>
</pre>
<p>但实测发现APICloud引擎有一套页面加载优化机制，打开新窗口时会等待页面脚本执行完毕才启动进场动画，如果页面包含异步数据渲染还需要等待异步内容渲染完毕，以保证页面进场时是完整且稳定的，这套机制带来的问题是打开页面前会有不规则的等待时间，严重时会有卡顿的感觉。</p>
<p>想要绕过这套机制，可以在<code>apiready</code>回调中动态拼装脚本标签并插入页面，此时页面进场动画已经开始，脚本的执行就不会阻塞进场动画了。框架内置的<code>sdk/loader.js</code>专门用来实现该功能，只要页面底部引入loader.js就可以非阻塞的加载同目录下指定名称的脚本，例如：</p>
<pre>
<code>
<script src="../../../sdk/loader.js" data-script="script"></script>
</code>
</pre>
<p>使用异步脚本加载器加载的脚本可以直接调用引擎方法，不需要在<code>app.ready()</code>回调中执行。</p>
<h4>调试方法</h4>
<p>因为异步加载时机是`apiready`，导致只有在真机上脚本才能运行，给js调试带来不小的麻烦，推荐大家使用官方IDE开启WiFi调试，这样js中的console信息可以在IDE的console面板中输出，需要注意的是这种方式不支持输出对象类型，当需要输出对象时需要先用<code>JSON.stringify()</code>将对象转成字符串。</p>
<p>除了js运行中的调试信息外，异步数据的返回结果我们最常需要输出的，我们可以找到框架封装的<code>app.ajax()</code>方法，在其中处理返回数据处插入一个输出语句，就可以在IDE中输出所有异步请求的返回结果了。</p>
<pre>
<code>
//在sdk/core.js 的大约1277行
...
}else{
opt.data = {
values: opt.data
};
}
console.log(JSON.stringify(opt)) //输出请求参数
api.ajax(opt, function(res, err) {
console.log(JSON.stringify(res)) //输出请求结果
handleRes(res);
handleError(res, err);
});
...
</code>
</pre>
<h3 id="solution-crypto">请求加密</h3>
<p>开启请求加密，需要将配置文件中的<code>appcfg.ajax.crypto.enable</code>设置为true，并填写加密接口<code>appcfg.ajax.crypto.url</code>，默认使用3DES加密算法，加密密码保存在<code>res/key.xml</code>中，打包后自动加密，使用apicloud专用api获取。</p>
<h4>发送请求</h4>
<p>加密请求将集中发送到加密接口，请求数据格式为：</p>
<pre>
<code>
{
data: secureDataStr, //加密数据
sign: sign //签名
};
</code>
</pre>
<p>加密数据<code>secureDataStr</code>的生成过程为：先将原请求按如下格式组织：</p>
<pre>
<code>
{
data: opt.data,
url: opt.url
}
</code>
</pre>
<p>再经<code>JSON.stringify</code>得到原请求数据字符串，然后用3DES方式加密得到加密数据。</p>
<p>签名的生成过程为：将原请求数据字符串与加密密码拼接，取MD5值。</p>
<h4>解密数据</h4>
<p>加密接口需要返回3DES加密后的数据字符串，客户端将使用3DES算法解密，并经<code>JSON.parse</code>解析为json格式，返回给回调函数。</p>
<h3 id="solution-ajaxcatch">快照缓存</h3>
<p>为app.ajax配置<code>snapshoot:true</code>即可开启快照缓存，即把每一次成功返回的ajax结果保存为快照，下次发起相同请求（判断依据是url和参数相同）时第一时间将快照取出返回给回调函数，待真实数据返回后校验与快照是否相同（需要数据为json格式），若相同则缓存命中，会为对象格式的快照数据添加一个'snapshootEqual'属性值为'true'，不同则再次调用回调函数并传入真实数据，为了使业务中能够区分出快照，会为快照数据添加一个'snapshoot'属性值为'true'。</p>
<h4>示例</h4>
<pre>
<code>
app.ajax({
url: appcfg.host.control + '/login',
data: {
...
},
snapshoot: true,
success: function(res){
//
}
});
</code>
</pre>
<h3 id="solution-catch">图片缓存</h3>
<p>默认<code>server.js</code>中封装了<code>cacheImg()</code>方法，用于实现图片本地缓存：</p>
<pre>
<code>
/*
* cacheImg(element, callback)
* @element: 目标元素，将自身或子元素的"data-remote"属性值作为图片地址进行缓存，并自动应用到图片的src属性或普通元素的background-image样式。
* @callback: 全部缓存结束后的回调函数
*/
var $ = app.util;
var server = require('sdk/server');
server.cacheImg($('#view'), function() {
console.log('缓存成功！');
});
</code>
</pre>
<h3 id="solution-preget">数据预取</h3>
<p>数据预取通常用来在APP启动时预先获取初始化数据，当需要预取多个数据时候，就需要类似<code>Promise.all()</code>的功能，但原生的请求方法不支持返回Promise，因此<code>server.js</code>中封装了一个<code>preGet()</code>方法，用于获取多个异步数据并回调，预取的数据将存贮在LocalStorage。预取数据需要在<code>server.js</code>中自行添加。</p>
<pre>
<code>
//在server.js中配置预取请求，数组形式
preGet.prototype.preGetList = [{
key: 'websiteConfig', //预取数据存储key
url: appcfg.host.control + '/websiteConfig', //预取数据地址
data: {} //预取数据参数
}];
</code>
<code>
//数据预取
var server = require('sdk/server');
server.preGet(function(){
console.log('数据预取完成');
});
</code>
</pre>
<h3 id="solution-update">自动更新</h3>
<p>借助平台的版本管理机制实现APP自动更新，config.xml默认已配置autoUpdate，APP启动时将自动检测新版本并提示，另外server.js中封装了一个checkUpdate()方法，用于应用内手动检测更新。</p>
<pre>
<code>
var comm = require('sdk/server');
comm.checkUpdate();
</code>
</pre>
<h3 id="solution-push">消息推送</h3>
<p>框架内置基于极光推送实现的推送机制，root页面默认包含推送初始化代码，config.xml中的极光app_key需要自己申请并替换，server.js中封装了push对象，包含open()和close()两个方法，用于实现推送开关，具体实现参见<code>view/member/set/script.js</code>。</p>
</section>
<section class="wrap" id="community">
<h2>社区</h2>
<h3 id="blog">专题文章</h3>
<p><a href="http://refined-x.com/tags/HybridStart/">HybridStart专题</a></p>
<h3 id="community-qq">讨论群</h3>
<p><a href="https://jq.qq.com/?_wv=1027&k=5Jx8Wu0" target="_blank" rel="external">361917044</a></p>
</section>
<footer class="wrap oh tc">
<div class="row "> <a href="#" title="返回顶部" class="dib foot_logo gotop">
<figure></figure>
</a>
<p class="dib"> © 2016 - 3016 <a href="http://refined-x.com" title="雅X共赏的前端技术博客">前端路上</a> <a href="mailto:tower1229@gmail.com" title="mailto:雅X共赏">雅X共赏</a></p>
</div>
</footer>
<script type="text/javascript" async="async" src="//push.zhanzhang.baidu.com/push.js"></script>
<script src="/HybridStart/docs/lib/sea.js" id="seajsnode"></script>
<script>
seajs.use('js/doc');
</script>
</body>
</html>