mui app在线更新

• 一参考资料
• 二代码
  • HTML代码
  • CSS代码
  • JS代码
  • 接口代码

一、参考资料

• http://ask.dcloud.net.cn/article/182

二、代码

1. HTML代码

<div class="mui-content">
    <div class="mui-scroll">
        <div class="login-img">
            <img src="data:images/icon.png" width="20%" />
            <p id="version">当前应用版本:</p>
        </div>
    </div>

     <ul class="mui-table-view check" id="check">
        <li class="mui-table-view-cell">
            <div class="updateProDiv">更新进度:
                <progress value="" max="" id="proDownFile"></progress>
                <span class="persent"></span>
            </div>
            <a href="#" id="update" class="mui-navigate-right">检查更新</a>
        </li>
    </ul>

    </div>

2. CSS代码

#version{margin-top:20px;font-size: 18px;}
.check{margin-top: 58%;}
.check li{padding: 16px 11px;}
.check a{font-size: 20px;}
.check p{font-size: 18px;margin-top: 5px;}
progress {border-radius: 2px;border-left: 1px #ccc solid;border-right: 1px #ccc solid;border-top: 1px #aaa solid;background-color: #eee;}
progress::-webkit-progress-bar {background-color: #d7d7d7;}
progress::-webkit-progress-value {background-color: #aadd6a;}
.updateProDiv {display: none;}

3. JS代码

<script src="js/jquery-1.8.3.min.js"></script>
<script>
    var wgtVer=null;
    function plusReady(){ // 获取本地应用资源版本号
        plus.runtime.getProperty(plus.runtime.appid,function(inf){
            wgtVer=inf.version;
            version.innerHTML = '当前应用版本：'+wgtVer;
        });
    }
    if(window.plus){
        plusReady();
    }else{
        document.addEventListener('plusready',plusReady,false);
    }

    var ver;
    //休眠方法
    function sleep(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
            now = new Date();
            if (now.getTime() > exitTime)
                return;
        }
    }
    mui('.mui-table-view-cell').on('click', '#update', function() {
        plus.runtime.getProperty(plus.runtime.appid, function(inf) {
            ver = inf.version;
            console.log("当前应用版本：" + ver);
            var url= app.baseurl+'index.php/api/other/version';
            var client;
            if(mui.os.ios) {client='ios';}
            else{client='android';}
            mui.ajax(url,{
                data:{
                    version: ver,
                    client:client
                },
                dataType:'json',
                type:'POST',
                timeout:10000,
                success:function(data){
                    if(data.status==1){
                        var btnArray = ['是', '否'];
                        mui.confirm('最新version是：' + data.version+',是否更新', '发现最新版本', btnArray, function(z) {
                            if (z.index == 0) {
                                console.log('确定');
                                $('.updateProDiv').css('display', 'block');
                                $('#update').css('display', 'none');
                                var dtask = plus.downloader.createDownload(data.url, {}, function(d, status) {
                                    if (status == 200) {
                                        clearInterval(i);
                                        $('.persent').html("100%");
                                        plus.nativeUI.toast("正在准备环境，请稍后！");
                                        sleep(1000);
                                        var path = d.filename;//_downloads yijietong.apk
                                        console.log(d.filename);
                                        $('#update').css('display', 'block');
                                        $('.updateProDiv').css('display', 'none');
                                        plus.runtime.install(path); // 安装下载的apk文件
                                    } else {
                                        alert('Download failed:' + status);
                                    }
                                });
                                dtask.start();
                                var i = setInterval(function() {
                                    var totalSize = dtask.totalSize;
                                    var downloadedSize = dtask.downloadedSize;
                                    $('#proDownFile').attr('value', downloadedSize);
                                    $('#proDownFile').attr('max', totalSize);
                                    console.log(dtask.downloadedSize);
                                    console.log(dtask.totalSize);
                                }, 100); //1000为1秒钟
                            } else {
                                console.log('不确定');
                                return;
                            }
                        });
                    }
                    else{
                        alert(data.message);
                    }
                },
                error: function(xhr, type, errerThrown) {
                    mui.toast('网络异常,请稍候再试');
                }
            });

        });
    });
</script>

3. 接口代码

    public function version(){
        $data = $_POST;
        $m_version=M('versions');
        $ret=$m_version->find();
        if($ret['version']==$data['version']){
                $this->ajaxReturn(array('status'=>0,'message'=>'当前版本已经是最新版！'));
        }
        else
        {
            $ret_data['status']=1;
            $ret_data['version']=$ret['version'];
            if($data['client']=='android'){
                $ret_data['url']=sp_get_asset_upload_path('apk/yijietong.apk',true);

            }
            else{ $ret_data['url']=sp_get_asset_upload_path('apk/yijietong.apk',true);}
            $this->ajaxReturn($ret_data);
        }
    }