hybridstart

<!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>  <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 } });