公交年检_mui项目小结

技术总结

一、实名认证页面（RealNameAuthentication.html）

1.相机拍照蒙层，前端不易实现
解决：用原生代码来解决的。进入拍摄界面，js所调用函数如下（该函数包含网络请求）

function idCardPut(ruid, okCallback, failCallback, errorCallback) {
    var success = function(result) {
        var response = JSON.parse(result);
        if (response.meta.code === 0 && okCallback) {
            okCallback(response.meta, response.data)
        } else if (failCallback) {
            failCallback(response.meta, response.data)
        }
    }

    var failed = function(msg) {
        if (errorCallback)
            errorCallback(msg);
    }
    var callbackId = plus.bridge.callbackId(success, failed);
    plus.bridge.exec('ApiClient', 'idCardPut', [callbackId, '/user/auth/idcard/upload', '', ruid]);
}

二、人保购险页面（PersonalInsurancePay.html）

1.通过支付链接所打开的页面，若未支付，无法返回到人保购险页面
解决：打开带原生导航栏的页面（点击导航栏的按钮可返回）

    payWebview = mui.openWindow({
        id: 'pay_page',
        url: 'LoadingPage.html',
        styles: {
            titleNView: {
                style: 'transparent',
                backgroundColor: '#FFFFFF',
                titleText: '保单支付',
                titleColor: '#000000',
                autoBackButton: true,
            }
        }
    });

2.支付接口回调的响应时间太长（大概一分钟），采用此方法用户体验很差
解决：采用轮询的方式，设置一个定时器，支付链接页面加载完成后调用该定时器，每隔2s查询一次保单的支付状态（注：页面关闭时进行完最后一次支付状态的查询再关闭定时器）

// 设置一个定时器，点击支付按钮后，轮询支付情况
function pollingCheckPay() {
    setTimeout(function() {
     getInfoOfPolicy(gGetInfor.policy_number,checkPayCallback);
    }, 2000);
}

三、mui的一些坑

1.提示框的效果不行，应该是代码最后没加上’div’

 //可能你是这样写的
 mui.alert(msg, "提示", ['确定'], function() {})

 //加上'div'才有样式，该参数是指是否使用h5绘制的对话框
 mui.alert(msg, "提示", ['确定'], function() {},'div')

2.mui的确认框confirm使用

mui.confirm(getConfirmMsg(val), "请确认身份信息", ["信息有误", '确认'], function(e) {
                                if (e.index === 0) {
                                    take_photo(ruid);
                                } else if (e.index === 1) {
                                    mui.showLoading("正在加载..", "div");
                                    infoConfirm("id_card", ruid, buid);
                                }
                            }, "div")

3.mui预加载的目标页面，不可用mui.openWindow传参

mui.init({
    preloadPages: [{
        id: 'PersonalInfo',
        url: 'PersonalInfo.html',
    }]
});
mui.openWindow({
    id: 'PersonalInfo',
    url: 'PersonalInfo.html',
    extras:{
        name:'小明'
    }
});

4.适配

由于要适配至安卓4.4(Android 4.4是谷歌于2013年11月1日发布的手机操作系统。)，且6.0之前版本的webview不支持ES6，故使用es5纯原生开发。

项目收获

1.即时和开发团队成员沟通很重要，沟通的效率会决定自己对项目的理解，以及开发的效率，好的沟通可以加快开发的速度且可减少代码更改量；
2.项目开发前的准备工作很重要，一开始未梳理清楚整个页面流程，导致一开始效率较低，且开发乏力，应一开始就提醒大家开个会，理清楚页面间逻辑;
3.混合开发，一开始不清楚和涉及自己任务的其他人的任务的衔接（如拍照页面)，一开始该问和自己任务相关的人到底在做什么，大概负责的内容是什么;
4.以测试和上线为中心很重要，自己的页面可能还有点问题，在要测试的时候应以测试为中心，若阻挡测试流程，应注释掉自己的问题代码，或先砍掉自己的有问题的功能，以便整个项目流程能够正常测试和正常上线；