Hbuilder app 整理资料
Posted 亮亮1990
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Hbuilder app 整理资料相关的知识，希望对你有一定的参考价值。
mui.ajax('http://server-name/login.php',data:
username:'username',
password:'password'
,
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data)
//服务器返回响应，根据响应结果，分析是否登录成功；
...
,
error:function(xhr,type,errorThrown)
//异常处理；
console.log(type);
);
mui.post('http://server-name/login.php',
username:'username',
password:'password'
,function(data)
//服务器返回响应，根据响应结果，分析是否登录成功；
...
,'json'
);
mui.get('http://server-name/list.php',category:'news',function(data)
//获得服务器响应
...
,'json'
);
mui.post,mui.get不处理timeout和异常（若需处理异常及超时，请使用mui.ajax()方法）
mui.getJSON('http://server-name/list.php',category:'news',function(data)
//获得服务器响应
...
);
-------------------------------------------------
-------------------------------------------------
手势事件
-------------------------------------------------
分类 参数 描述
点击 tap 单击屏幕
doubletap 双击屏幕
长按 longtap 长按屏幕
hold 按住屏幕
release 离开屏幕
滑动 swipeleft 向左滑动
swiperight 向右滑动
swipeup 向上滑动
swipedown 向下滑动
拖动 dragstart 开始拖动
drag 拖动中
dragend 拖动结束
mui.init(
gestureConfig:
tap: true, //默认为true
doubletap: true, //默认为false
longtap: true, //默认为false
swipe: true, //默认为true
drag: true, //默认为true
hold:false,//默认为false，不监听
release:false//默认为false，不监听
);
注意:dragstart、drag、dragend共用drag开关，swipeleft、swiperight、swipeup、swipedown共用swipe开关
-------------------------------------------------
事件监听
-------------------------------------------------
同标准click事件一样，上述手势事件支持添加到任意DOM对象上，如下为一个示例：
elem.addEventListener("swipeleft",function()
console.log("你正在向左滑动");
);
-------------------------------------------------
预加载
-------------------------------------------------
所谓的预加载技术就是在用户尚未触发页面跳转时，提前创建目标页面，这样当用户跳转时，就可以立即进行页面切换，节省创建新页面的时间，提升app使用体验。mui提供两种方式实现页面预加载。
方式一：通过mui.init方法中的preloadPages参数进行配置
mui.init(
preloadPages:[
url:prelaod-page-url,
id:preload-page-id,
styles:,//窗口参数
extras:,//自定义扩展参数
subpages:[,]//预加载页面的子页面
]
);
该种方案使用简单、可预加载多个页面，但不会返回预加载每个页面的引用，若要获得对应webview引用，还需要通过plus.webview.getWebviewById方式获得；另外，因为mui.init是异步执行，执行完mui.init方法后立即获得对应webview引用，可能会失败，例如如下代码：
mui.init(
preloadPages:[
url:'list.html',
id:'list'
]
);
var list = plus.webview.getWebviewByid('list');//这里可能返回空；
方式二：通过mui.preload方法预加载.
var page = mui.preload(
url:new-page-url,
id:new-page-id,//默认使用当前页面的url作为id
styles:,//窗口参数
extras://自定义扩展参数
);
通过mui.preload()方法预加载，可立即返回对应webview的引用，但一次仅能预加载一个页面；若需加载多个webview，则需多次调用mui.preload()方法；
-------------------------------------------------
下拉刷新
-------------------------------------------------
主页面内容比较简单，只需要创建子页面即可：
mui.init(
subpages:[
url:pullrefresh-subpage-url,//下拉刷新内容页面地址
id:pullrefresh-subpage-id,//内容页面标志
styles:
top:subpage-top-position,//内容页面顶部位置,需根据实际页面布局计算，若使用标准mui导航，顶部默认为48px；
.....//其它参数定义
]
);
内容页面需按照如下DOM结构构建：
<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron">
</ul>
</div>
</div>
其次，通过mui.init方法中pullRefresh参数配置下拉刷新各项参数，如下：
mui.init(
pullRefresh :
container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
down :
contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
);
最后，根据具体业务编写刷新函数，需要注意的是，加载完新数据后，需要执行endPulldownToRefresh()方法；
function pullfresh-function()
//业务逻辑代码，比如通过ajax从服务器获取新数据；
......
//注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后
mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
-------------------------------------------------
输入增强
-------------------------------------------------
mui目前提供的输入增强包括：快速删除和语音输入两项功能。要删除输入框中的内容，使用输入法键盘上的删除按键，只能逐个删除字符，mui提供了快速删除能力，只需要在对应input控件上添加.mui-input-clear类，当input控件中有内容时，右侧会有一个删除图标，点击会清空当前input的内容；另外，为了方便快速输入，mui集成了HTML5+的语音输入，只需要在对应input控件上添加.mui-input-speech类，就会在该控件右侧显示一个语音输入的图标，点击会启用科大讯飞语音输入界面。
-------------------------------------------------
开关事件
-------------------------------------------------
mui提供了开关控件样式，点击滑动两种手势都可以对开关控件进行操作，在开关控件进行切换时，会触发toggle事件,通过事件的detail.isActive属性可以判断当前开关状态。可通过监听toggle事件，在开关切换时执行特定业务逻辑。如下为使用示例：
document.getElementById("mySwitch").addEventListener("toggle",function(event)
if(event.detail.isActive)
console.log("你启动了开关");
else
console.log("你关闭了开关");
)
若要获得当前开关状态，可通过判断当前开关控件是否包含.mui-active类来实现，若包含，则为打开状态，否则即为关闭状态；如下为代码示例：
var isActive = document.getElementById("mySwitch").classList.contains("mui-active");
if(isActive)
console.log("打开状态");
else
console.log("关闭状态");
若使用js打开、关闭开关控件，可使用switch插件的toggle()方法，如下为示例代码：
mui("#mySwitch").switch().toggle();
-------------------------------------------------
监听自定义事件
-------------------------------------------------
window.addEventListener('customEvent',function(event)
//通过event.detail可获得传递过来的参数内容
....
);
-------------------------------------------------
触发自定义事件
-------------------------------------------------
通过mui.fire方法可触发目标窗口的自定义事件：
mui.fire(targetPage,'customEvent',
//自定义事件参数
);
示例：假设如下场景：从新闻列表页面进入新闻详情页面，新闻详情页面为共用页面，通过传递新闻ID通知详情页面需要显示具体哪个新闻，详情页面再动态向服务器请求数据，mui要实现类似需求可通过如下步骤实现：
在列表页面中预加载详情页面（假设为detail.html）
列表页面在点击新闻标题时，首先，获得该新闻id，触发详情页面的newsId事件，并将新闻id作为事件参数传递过去；然后再打开详情页面；
详情页面监听newsId自定义事件
列表页面代码如下：
//初始化预加载详情页面
mui.init(
preloadPages:[
id:'detail.html',
url:'detail.html'
]
);
var detailPage = null;
//添加列表项的点击事件
mui('.mui-content').on('tap', 'a', function(e)
var id = this.getAttribute('id');
//获得详情页面
if(!detailPage)
detailPage = plus.webview.getWebviewById('detail.html');
//触发详情页面的newsId事件
mui.fire(detailPage,'newsId',
id:id
);
//打开详情页面
mui.openWindow(
id:'detail.html'
);
);
详情页面代码如下：
//添加newId自定义事件监听
window.addEventListener('newsId',function(event)
//获得事件参数
var id = event.detail.id;
//根据id向服务器请求新闻详情
.....
);
-------------------------------------------------
图片轮播
-------------------------------------------------
mui框架内置了图片轮播插件，通过该插件封装的JS API，用户可以设定是否自动轮播及轮播周期，如下为代码示例：
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider(
interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
);
-----------------
(function(mui)
var detailPage = null;
detailPage = mui.preload(
id: 'zgManage.html',
url: 'zgManage.html'
)
//添加列表项的点击事件
mui('.mui-content').on('tap', '.item-id', function(e)
var id = this.getAttribute('id');
//获得详情页面
console.log('====' + id)
/*if (!detailPage)
detailPage = plus.webview.getWebviewById('zgManage.html');
*/
//触发详情页面的newsId事件
mui.fire(detailPage, 'xxx',
id: id
);
//打开详情页面
mui.openWindow(
id: 'zgManage.html',
// url: 'zgManage.html'
);
);
)(mui);
================================
mui.back = function()
//首次按键，提示‘再按一次退出应用’
if(!first)
first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function()
first = null;
,1000);
else
if(new Date().getTime()-first<1000)
plus.runtime.quit();
alert(e.keyType+"\\n"+e.keyCode);
return false;
===================================================
plus.device.dial( number, confirm )启动的是拨打电话的界面，并不会直接拨出电话。
直接拨出电话的nativeJs代码：
var Uri = plus.android.importClass("android.net.Uri");
var Intent = plus.android.importClass("android.content.Intent");
var number = new Uri.parse("tel:4001109999");
var callIntent = new Intent(Intent.ACTION_CALL, number);//这步是关键，ACTION_CALL而不是ACTION_DIAL
plus.android.runtimeMainActivity().startActivity(callIntent);
========================================================
mui.plusReady(function()
//首页返回键处理
//处理逻辑：1秒内，连续两次按返回键，则退出应用；
var first = null;
plus.key.addEventListener('backbutton', function()
//首次按键，提示‘再按一次退出应用’
if (!first)
first = new Date().getTime();
mui.toast('再按一次退出应用');
setTimeout(function()
first = null;
, 1000);
else
if (new Date().getTime() - first < 1000)
plus.runtime.quit();
, false);
);
========================================================
plusReady仅说明plus准备好了。
mui.ready是指dom准备好了。
两种方案：
1.把你的代码放到你的html代码后边执行。
2.把dom相关代码放到ready里边。
上拉刷新,加载出第二页后。再执行 下拉刷新，我此时获取的的是 第一页的数据。可是在上拉时 就不能执行上拉
========================================================
http://dcloudio.github.io/mui/javascript/
http://ask.dcloud.net.cn/question/8866
http://www.html5plus.org/doc/zh_cn/device.html#plus.device.uuid --获取设备唯一编号
plus.device.uuid;
http://ask.dcloud.net.cn/article/122 -------布局规则
http://www.html5plus.org/doc/zh_cn/webview.html
http://ask.dcloud.net.cn/article/182 ----------App资源在线升级更新
http://www.html5plus.org/doc/zh_cn/maps.html ----地图定位功能
http://ask.dcloud.net.cn/article/29 ----地图定位功能
http://ask.dcloud.net.cn/article/38 ------离线打包
http://ask.dcloud.net.cn/question/2673 ----------
http://www.dcloud.io/docs/api/zh_cn/navigator.shtml -----API
RQCsC8ebKBmIQIiXBmX1v7lf ios端
OsWGjhLVqiGjwiK6r8lB3urS Android端 WSlgzefYAXM1GzG05t7rNWIZ
以上是关于Hbuilder app 整理资料的主要内容，如果未能解决你的问题，请参考以下文章