HTML5 移動Web App閱讀器-4(頁面基本結構開發)

俠客島的含笑發表於2017-04-18
HTMLWebAPP

任務：
上下邊欄：絕對定位或者fixed.相對獨立，所以可以放到一個相對獨立過程中去。
然後就是內容區：標題，內容，操作條 。
引用normailze.css，zepto.min.js，jquery.base64.js，jquery.jsonp.js
Zepto是為現代智慧手機瀏覽器推出的Javascript 框架, 有和jQuery相似的語法，不過更小

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
  • width – // viewport 的寬度 （範圍從 200 到 10,000，預設為 980 畫素）
  • height – // viewport 的高度 （範圍從 223 到 10,000 ）
  • initial-scale – // 初始的縮放比例 （範圍從 > 0 到 10）
  • minimum-scale – // 允許使用者縮放到的最小比例
  • maximum-scale – // 允許使用者縮放到的最大比例
  • user-scalable – // 使用者是否可以手動縮放 (no，yes)
<meta name="format-detection" content="telephone=no">
格式識別

忽略頁面中的數字識別為電話號碼
- 使裝置瀏覽網頁時對數字不啟用電話功能（不同裝置解釋不同，iTouch 點選數字為存入聯絡人，iPhone 為撥打電話），忽略將頁面中的數字識別為電話號碼。
- 若需要啟用電話功能將 telephone=yes 即可，若在頁面上面有 Google Maps, iTunes 和 YouTube 的連結會在ios裝置上開啟相應的程式元件。
- 結構和樣式都是從大局觀開始，然後再摳細節
- 如果想要好看，還是需要靠自己一點一點的量（位置，顏色）

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
        <meta name="format-detection" content="telephone=no">
        <meta name="author" contect="hanxiao, 15132445252@163.com" />
        <link rel="stylesheet" href="css/normailze.css">
        <link rel="stylesheet" href="css/base.css">
    </head>
    <body>
        <div id="root" class="container">
            <div id="fiction_chapter_title"></div>
            <div id="fiction_contaniner" class="m-read-content">
                <h4>Lorem ipsum dolor sit amet</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga earum cumque totam voluptas quia, ipsa repellat. Libero eaque, vitae accusantium, fugit autem natus voluptatem qui, enim, nulla animi ea.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga earum cumque totam voluptas quia, ipsa repellat. Libero eaque, vitae accusantium, fugit autem natus voluptatem qui, enim, nulla animi ea.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga earum cumque totam voluptas quia, ipsa repellat. Libero eaque, vitae accusantium, fugit autem natus voluptatem qui, enim, nulla animi ea.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga earum cumque totam voluptas quia, ipsa repellat. Libero eaque, vitae accusantium, fugit autem natus voluptatem qui, enim, nulla animi ea.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga earum cumque totam voluptas quia, ipsa repellat. Libero eaque, vitae accusantium, fugit autem natus voluptatem qui, enim, nulla animi ea.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga earum cumque totam voluptas quia, ipsa repellat. Libero eaque, vitae accusantium, fugit autem natus voluptatem qui, enim, nulla animi ea.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga earum cumque totam voluptas quia, ipsa repellat. Libero eaque, vitae accusantium, fugit autem natus voluptatem qui, enim, nulla animi ea.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis fuga earum cumque totam voluptas quia, ipsa repellat. Libero eaque, vitae accusantium, fugit autem natus voluptatem qui, enim, nulla animi ea.</p>
            </div>
            <div class="m-button-bar"></div>
            <ul class="u-tab">
                <li id="prev_button">上一章</li>
                <li id="next_button">下一章</li>
            </ul>
        </div>

css
文字排版，間距；按鈕樣式；容器（背景）

  • css的邏輯通常是從1開始的。
  • CSS中”overflow:scroll”預設是左右，上下都滾動；如果左右沒有超出內容時，用overflow:auto;
    如果左右有超出內容，用overflow-x: hidden;
  • 先設定圖片路徑，再設定大小才會生效background-size:contain; 自適應
    主題結構
html{
    width: 100%;
    height: 100%;
    overflow-x:hidden;

}
body{
    text-align: left;
    width: 100%;
    overflow: hidden;
    background-color: #e9dfc7;
    margin:0;
}

.m-read-content{
    font-size: 14px;
    color:#555;
    line-height: 31px;
    padding: 15px;
    margin:0 0 1em 0;
}

.m-read-content h4{
    margin:0; 
    font-size: 20px;
    color:#736357;
    border-bottom:1px solid #736357;
    letter-spacing: 2px;

}

.m-read-content p{
    text-indent:2em;
    margin:0.5em 0;
    line-height: 24px;
}

.m-button-bar{
    width:70%;
    max-width: 800px;
    padding: 5px;
    margin: 0 auto;
}
.u-tab{
    height:34px;
    margin-top: 0;
    margin-bottom: 20px;
    line-height: 34px;
    border-radius: 8px;
    border:1px solid #858382;
    font-size: 12px;
    background: #000;
    opacity:0.9;
    padding: 0;
}

.u-tab li{
    display: inline-block;
    width:49%;
    text-align: center;
    color:#fff;
}

.u-tab li:nth-child(1){
    border-right: 1px solid #858382;
}

具體css就不說了。
互動操作
- 返回操作
- 設定字號和背景，同時記憶設定好的內容
- 翻頁操作，從伺服器獲得資料
先宣告一個閉包，在裡面定義事情不會影響到全域性的一些事情。
第一步互動：事件繫結，資料儲存，通用方法封裝

  • localStorage是key:value的形式，所以key很容易有重疊，覆蓋掉，所以我們可以在key前面加一個字首。
window.jQuery = $;



// 封裝localStorage儲存
(function(){
    var Util = (function(){
        var prefix = 'html5_reader_';
        var StorageGetter = function(key){
            return localStorage.getItem(prefix + key);
        }
        var StorageSetter = function(key,val){
            return localStorage.setItem(prefix + key,val);
        }
        return {
            StorageGetter:StorageGetter,
            StorageSetter:StorageSetter
        }
    })();
    function main(){
        //todo 整個專案的入口函式
    }
    // 資料層
    function ReaderModel(){
        //todo 實現和閱讀器相關的資料互動方法
    }

    //初始化
    function ReaderBaseFrame(){
        //todo 渲染基本的UI結構
    }

    function EventHanlder(){
        //todo 互動的事件繫結
    }

    main();
})();
  1. 測試在呼叫時測試；
  2. 問題：為什麼我們用click事件，不用touch或者zepto tap事件？
    答：在安卓4.0之前，用click事件會有300毫秒的延時；不過這也太老了吧。而且在pc端click事件是支援的，但是tap是不支援的，需要開啟模擬器哦。判斷是移動端還是pc端，就稍微比較麻煩了。
  3. class命名規則，帶-的用來操作css，帶_的用來操作js;也可以加字首，還是看個人喜好。
  4. 注意效能，效能差都是一步一步累計出來的，而且是指數增長

相關文章