2018-06-18

作者: 手中的风信子 | 来源:发表于2018-06-20 23:41 被阅读19次

2018-06-18
【技术栈】【ant】技术栈拆分及比重
【端阳赋】
【端阳赋】昋世民
日精进打卡（第346天）
《英语可以这样教》读书笔记
通过成就他人成就自己
2018-06-18
足球即时比分将会直播巴西和瑞士之间的较量
践行精进日记118天

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)]