Technical summary

1, Real name authentication page (RealNameAuthentication.html)

1. The camera takes pictures of the mask, and the front end is not easy to realize
Solution: solved with native code. After entering the shooting interface, js calls the following functions (this function contains the network request)

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

2, PICC insurance purchase page (PersonalInsurancePay.html)

1. If the page opened through the payment link is not paid, it cannot return to the PICC insurance purchase page
Solution: open the page with native navigation bar (click the button of navigation bar to return)

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

2. The response time of payment interface callback is too long (about one minute), and the user experience is very poor
Solution: use polling mode, set up a timer, pay the link page to load the call after completion of the completion of the timer, every 2s query the payment status of a policy (Note: when the page closes the last payment state query and then close the timer).

// Set a timer and click the payment button to poll the payment status
function pollingCheckPay() {
    setTimeout(function() {
     getInfoOfPolicy(gGetInfor.policy_number,checkPayCallback);
    }, 2000);
}

3, Some pits in mui

1. The effect of the prompt box is not good. It should be that 'div' is not added at the end of the code

 //Maybe that's what you wrote
 mui.alert(msg, "Tips", ['determine'], function() {})

 //Add 'div' to have style. This parameter refers to whether to use h5 drawn dialog box
 mui.alert(msg, "Tips", ['determine'], function() {},'div')

2. Use the confirm box of MUI

mui.confirm(getConfirmMsg(val), "Please confirm your identity information", ["Incorrect information", 'confirm'], function(e) {
                                if (e.index === 0) {
                                    take_photo(ruid);
                                } else if (e.index === 1) {
                                    mui.showLoading("Loading..", "div");
                                    infoConfirm("id_card", ruid, buid);
                                }
                            }, "div")

3.mui preloaded target page, unavailable Openwindow parameters

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

4. Adaptation

Due to the adaptation to Android 4.4(Android 4.4 is the mobile operating system released by Google on November 1, 2013), Moreover, webview before 6.0 does not support ES6, so es5 is used for pure native development.

Project harvest

1. It is important to communicate with the members of the development team immediately. The efficiency of communication will determine their understanding of the project and the efficiency of development. Good communication can speed up the development and reduce the amount of code changes;
2. The preparation work before project development is very important. At the beginning, the whole page process is not sorted out clearly, resulting in low efficiency and weak development at the beginning. We should remind everyone to hold a meeting at the beginning to clarify the logic between pages;
3. Mixed development. At the beginning, it is unclear about the connection with other people's tasks related to their own tasks (such as photo page). At the beginning, it is necessary to ask what people related to their tasks are doing and what they are probably responsible for;
4. It is very important to focus on testing and launching. There may be some problems on your own page. When you want to test, you should focus on testing. If you block the test process, you should comment your own problem code, or cut off your own problematic functions first, so that the whole project process can test and launch normally;