移動混合開發之android文件管理demo

時間 2019-12-13

標籤移動混合開發 android 文件管理 demo 欄目無線简体版

原文原文鏈接

框架採用cordova，android編譯環境爲android studio.系統爲mac，cordova 環境搭建參考網址：http://cordova.apache.org/docs/en/5.0.0/cordova/plugins/pluginapis.html#Plugin%20APIsjavascript

1.index.htmlcss

<!DOCTYPE html>
<!--
 Licensed to the Apache Software Foundation (ASF) under one
 or more contributor license agreements.  See the NOTICE file
 distributed with this work for additional information
 regarding copyright ownership.  The ASF licenses this file
 to you under the Apache License, Version 2.0 (the
 "License"); you may not use this file except in compliance
 with the License.  You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing,
 software distributed under the License is distributed on an
 "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
<html>
<head>
    <!--
     Customize this policy to fit your own app's needs. For more guidance, see:
     https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
     Some notes:
     * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
     * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
     * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
     * Enable inline JS: add 'unsafe-inline' to default-src
     -->
    <meta http-equiv="Content-Security-Policy"
          content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta charset="utf-8">
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css"><br>
    <!----引入jQuery----!>
    <!--引入滑動第三方庫,讓列表滑動-->
    <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="js/iscroll-lite.js"></script>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <title>Hello World</title>
</head>
<body>
<div id="log"></div>
<div class="head">
    瀏覽器
</div>
<!--自定義佈局,沒有使用第三方框架-->
<div class="content">
    <div class="nav">
        <div id="current-dir"></div>
        <div id="upper">上一級</div>
    </div>
    <div class="list" id="file-list">
        <ul >
            <li class="t">
                <div class="file-icon"></div>
                <div class="file-name">This is file name1</div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

2.index.jshtml

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
var app = {
    // Application Constructor
    initialize: function () {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function () {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function () {
        //       app.receivedEvent('deviceready');
        $(function () {
            myDeviceReady();
        });
    },
    // Update DOM on a Received Event
    receivedEvent: function (id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');
        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();
var myscroll = null;

function myDeviceReady() {
    var size = $(window).width() / 18
    //設計字體寬度
    $('html').css('font-size', size);
    myscroll = new IScroll("#file-list");
    //打開文件夾
    window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory, function (entry) {
        openEntry(entry);
    }, function () {
        alert('fail');
    });
}

/*<li>
 <div class="file-icon"></div>
 <div class="file-name">This is file name1</div>
 </li>*/

function openEntry(entry) {
    //使用克隆方式時,從新更新頁面不能用,$('#file-list ul ).html(");
    $('#file-list ul li.item').remove();
    $('#current-dir').text("當前目錄:" + entry.name);
    $('#upper').bindtouch(
        function () {
            entry.getParent(function (entry) {
                openEntry(entry);
            }, function () {
                alert('get Parent Error');
            });
        }
    );

    entry.createReader().readEntries(function (entries) {
            sortEntrise(entries);
            for (var i = 0; i < entries.length; i++) {
                var entry = entries[i];
                //採用克隆方式,比較方便
                var jObjectLi = $('.t').clone().removeClass('t').addClass('item');
                jObjectLi.find('.file-name').text(entry.name);
                jObjectLi.data('entry', entry);
                $('.list ul').append(jObjectLi);
                jObjectLi.bindtouch(function () {
                    var liEntry = $(this).data('entry');
                    if (!liEntry.isFile) {
                        openEntry(liEntry);
                    }
                });
            }
            myscroll.refresh();
        },
        function (error) {
            alert(error);
        });
}

//將文件和文件夾分離
function sortEntrise(entries) {
    entries.sort(function (a, b) {
        if (a.isFile && !b.isFile) {
            return 1;
        } else if (!a.isFile && b.isFile) {
            return -1;
        } else {
            return a.name < b.name;
        }
    })
}

//擴展爲jQuery自定義函數

$.fn.bindtouch = function (cb) {
    attachMyEvent($(this), cb);
};


var timeID = null;

function attachMyEvent(sr, cb) {
    //click事件反應時間爲300毫秒,所以取消click採用手動
    //手指按下,若手指移動,則觸發取消
    sr.unbind();
    clearTimeout(timeID);
    var point_one = {};
    var point_two = {};
    sr.on('touchstart', function (event) {
        var me = $(this)
        me.data('touch', true);
        var touch = event.originalEvent.targetTouches[0];
        point_one.x = touch.pageX;
        point_one.y = touch.pageY;
        //設計timeID若是點下時滑動就不用觸發
        timeID = setTimeout(function () {
            me.addClass('touchInside');
        }, 100);
    });

    sr.on('touchend', function () {
        clearTimeout(timeID);
        var me = $(this);
        if (me.data('touch') == true) {
            //改變回調函數的this指針爲sr
            //觸發回調函數
            cb.bind(this)();
        }
        me.removeClass('touchInside')
        me.data('touch', false);
    });

    sr.on('touchmove', function (event) {
        var me = $(this);
        var touch = event.originalEvent.targetTouches[0];
        point_two.x = touch.pageX;
        point_two.y = touch.pageY;
        if (me.data('touch')) {
            //華爲手機測試,沒有滑動也會觸發touchmove,因此加測滑動距離,來判斷是否滑動
            var distane = getPointsDistance(point_one, point_two);
            console.log(distane);
            $('#log').text(distane);
            if (distane > 4) {
                me.data('touch', false);
                clearTimeout(timeID);
                me.removeClass('touchInside')
            }
        }

        // alert(2);
    });
}
//計算兩點之間距離
function getPointsDistance(p1, p2) {
    var xDistance = Math.abs(p1.x - p2.x);
    var yDistance = Math.abs(p1.y - p2.y);
    var distance = Math.sqrt(xDistance * xDistance + yDistance * yDistance);
    return distance;
}

3.index.cssjava

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

.head{
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:2rem;
    line-height: 2rem;
    background-color:orange;
    padding-left:.3rem;
    color: white;
    text-align: center;
}

.content{
    position:absolute;
    top:2rem;
    bottom:0;
    left:0;
    right:0
}
.content .nav{
    position: absolute;
    top: 0;
    height: 1.5rem;
    left: 0;
    right: 0;
    background: #efefef;
}

.content .list{
    position: absolute;
    top: 1.5rem;
    left: 0;
    right: 0;
    bottom: 0;
    background: #adadad;
    overflow: hidden;
}

.content ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.content ul li{
    position: relative;
    height: 4rem;
    line-height: 2rem;
    padding-left: .5rem ;
    border-bottom: 1px solid gray;
    background: white;
}
.content ul li.touchInside{
    background: #efefef;
}
.content ul li .file-icon{
    position: absolute;
    background: url("../img/file.png") no-repeat center;
    background-size: 1.2rem 1.2rem;
    width: 1.2rem;
    height: 1.2rem;
    left: 1rem;
    top:.3rem;
}
.content ul li .file-name{
    position: absolute;
    line-height: 2rem;
    left: 3.2rem;
}

.t{
    display: none;
}
#upper{
	position: absolute;
	right: 15px;
	top: 5px;
	color: blue;
}

#log{
    width: 200px;
    height: 30px;
    color: red;
    float: right;
}

　在html編寫以前，先在終端下載好cordova-file插件，同時注意開起真機設備的或模擬器的文件存儲權限，具體路徑爲：設置-->應用管理->高級 ->應用權限->存儲, 這個要千萬注意，否則打不開sdk內容。jquery