Ajax
1.App与服务器间的交互
交互.png
2.JSON
语法规则:
数据在键值对中
数据由逗号隔开
花括号保存对象
方括号保存数组
{"name":"小明","age":18,"friends":[{"name":"小刚","age":19}]}
3.使用MUI提供的Ajax工具完成与服务器端的交互
mui框架基于htm5plus的XMLHttpRequest，封装了常用的Ajax函数，支持GET、POST请求方式，支持返回json、xml、html、text、script数据类型；
最常用的mui.get()、mui.getJSON()、mui.post()三个方法
4.mui.ajax()
mui.ajax({
url: "http://124.74.245.110:8088/Product/MenuList",
type: "GET",
success: function (msg) {
mui.toast(msg);
},
error: function (xhr,type,errorThrown) {
mui.toast(type);
}
})
参数:
url Type: String 请求发送的目标地址
async Type: bool 发送同步请求
data (xx:xx,xxx:xxx) 请求参数
dataType "xml":返回xml格式；"json",返回json格式；"text"：返回纯文本格式
error: 请求失败时触发的回调函数xhr:xhr实例子对象,type：错误信息,errorThrown:可捕获的异常对象)
success 请求成功时的回调函数（data:返回的数据对象，可以是json，也可以是text等）
timeout 请求的超时时间
type HTTP的请求方式，目前仅支持‘GET’和‘POST’
headers 请求头{'Content-Type':'application/json'}
完整代码:
document.getElementById("bt2").addEventListener("tap", function() {
mui.ajax('http://118.242.19.148:8688/APPpubpay/JiaofeiController/checkCompany',{
data:{
type:"2"
},
headers:{'Content-Type':'application/json'},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data){
console.log(JSON.stringify(data)); //对象转文本
mui.toast(data.code);
},
error:function(xhr,type,errorThrown){
mui.toast(type);
}
});
})
})
5. Ajax简化模式
mui.post()方法是对mui.ajax()的一个简化方法，直接使用POST请求方式向服务器发送数据、且不处理timeout和异常
使用方法： mui.post(url[,data][,success][,dataType])
//简化post
document.getElementById("bt3").addEventListener("tap",function () {
mui.post('http://120.79.223.200:8080/commons/checkVersion',{
params: JSON.stringify( {clientType:"1"} )
},function(data){
console.log(JSON.stringify(data)); //对象转文本
mui.toast(data.code);
},'json'
);
})
//简化get
document.getElementById("bt4").addEventListener('tap',function () {
mui.get('http://124.74.245.110:8088/Product/MenuList',{
//参数
},function(data){
console.log(JSON.stringify(data)); //对象转文本
mui.toast(data);
},'json'
);
})
6.上拉刷新下拉加载的启用禁止方法
mui('#pullrefresh').pullRefresh().setStopped(true); //暂时禁止滚动
mui('#pullrefresh').pullRefresh().setStopped(false); //取消暂时禁止滚动
mui('#pullrefresh').pullRefresh().disablePullupToRefresh();//禁用上拉加载
mui('#pullrefresh').pullRefresh().enablePullupToRefresh();//启用上拉加载
7.安卓双webview下拉刷新，子webview包含picker插件，picker插件下滑失效的处理办法。
mui('.mui-table-view').on('tap','li',function(){
var dtpicker = new mui.DtPicker({
"type": "time",
"customData": {
"h": [
{
value: "am",
text: "上午"
}, {
value: "pm",
text: "下午"
},
]
}
})
dtpicker.show(function(e) {
console.log(e);
})
// 暂时禁止滚动
mui('#pullrefresh').pullRefresh().setStopped(true);
})
mui('body').on('tap','.mui-backdrop',function(){
// 取消暂时禁止滚动
mui('#pullrefresh').pullRefresh().setStopped(false);
})
mui('body').on('tap','.mui-dtpicker-header',function(e){
var target = e.target;
if(target.tagName === 'BUTTON'){
// 取消暂时禁止滚动
mui('#pullrefresh').pullRefresh().setStopped(false);
}
})
8.获取APP系统权限和打开权限设置
1.获取APP系统权限:
var main = plus.android.runtimeMainActivity();
// 注意修改包名
var packageName = "io.dcloud.HBuilder";
var pm = main.getPackageManager();
var PackageManager = plus.android.importClass(pm);
// 获取当前应用所有权限
var pi = pm.getPackageInfo(packageName, PackageManager.GET_PERMISSIONS);
var permissions = plus.android.getAttribute(pi,"requestedPermissions");
if(permissions != null){
console.log("permissions:"+JSON.stringify(permissions));
}
// 判断应用是否存在某个权限
// 录音权限:android.permission.RECORD_AUDIO
// 相机权限:android.permission.CAMERA
var permission = (PackageManager.PERMISSION_GRANTED ==
pm.checkPermission("android.permission.CAMERA", packageName));
if (permission) {
plus.nativeUI.toast("有录音权限");
}else {
plus.nativeUI.toast("没有录音权限");
}
2.打开权限设置:
var main = plus.android.runtimeMainActivity();
// 注意修改包名
var packageName = "io.dcloud.HBuilder";
var Uri = plus.android.importClass("android.net.Uri");
var Settings = plus.android.importClass("android.provider.Settings");
var packageURI = Uri.parse("package:" + packageName);
var intent = plus.android.newObject("android.content.Intent", Settings.ACTION_APPLICATION_DETAILS_SETTINGS, packageURI);
main.startActivity(intent);
3.当权限被禁止时，android 6.0以下需要通过异常进行判断：
<div class="mui-content mui-content-padded">
<button id="btn1" type="button" class="mui-btn mui-btn-blue mui-btn-block">判断权限是否存在</button>
<button id="btn2" type="button" class="mui-btn mui-btn-blue mui-btn-block">打开权限设置</button>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
var r = null;
mui.plusReady(function () {
document.querySelector('#btn1').addEventListener('tap',function () {
r = plus.audio.getRecorder();
r.record({
filename:"_doc/audio/"
}, function () {
mui.toast("Audio record success!");
}, function (e) {
console.log(JSON.stringify(e));
if(e.code === 3){
mui.toast("Audio无权限，请先去设置！");
openSetting();
}
});
})
/*打开权限设置页面*/
function openSetting () {
// 注意修改包名
var packageName = "io.dcloud.HBuilder";
var main = plus.android.runtimeMainActivity();
var Uri = plus.android.importClass("android.net.Uri");
var Settings = plus.android.importClass("android.provider.Settings");
var packageURI = Uri.parse("package:" + packageName);
var intent = plus.android.newObject("android.content.Intent", Settings.ACTION_APPLICATION_DETAILS_SETTINGS, packageURI);
main.startActivity(intent);
}
// 打开权限设置
document.querySelector('#btn2').addEventListener('tap',function () {
openSetting();
})
})
</script>
4.从5+ webview跳转到android原生Activity
var main = plus.android.runtimeMainActivity();
var Intent = plus.android.importClass("android.content.Intent");
var intent = new Intent(main.getIntent());
intent.setClassName(main, "io.dcloud.Test");
intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
// 传值
// intent.putExtra("extra", "这是页面传来的值！");
main.startActivity(intent);
注意:"io.dcloud.Test“这里是需要跳转的Activity.
这里需要特别注意的是需要设置这个：
intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
5.从android原生Activity跳转到5+ webview
Button btn = (Button)findViewById(R.id.btnShow);
btn.setOnClickListener(new View.OnClickListener(){
public void onClick(View v){
Intent intent = new Intent();
intent.setComponent(new ComponentName("io.dcloud.HBuilder", "io.dcloud.PandoraEntry"));
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
getApplicationContext().startActivity(intent);
}
});
[图片上传失败...(image-d77efc-1529509263719)]
网友评论