stove項目總結

　　近一週開發了一個手機app，感覺明顯比之前駕輕就熟，之後如果還有類似的工作就以這個爲模板進行開發，儘量減少類似工作時間的消耗，現在把開發過程中遇到的每個點都儘量記錄下來，寫明白，以後儘量不太相同的地方重複消耗時間。
　　一、如何在圖片上顯示文字
　　項目需要顯示如下第一張圖片的效果
　　
　　網上查閱之後有三種解決辦法：第一種方法是把圖片作爲背景，上面寫文字。這種方法經過簡單嘗試之後不行，也沒有找到原因；後兩種方法利用的是html中絕對位置和相對位置的區別實現的，有一個簡單的可以運行的小例子，連接如下：待添加
　　二、與mui相配合的JavaScript庫h.js
　　h.js 致力於優化mui的dom操作及h5+的封裝，完美兼容mui，提供更高效的開發，極小的js確擁有靈活的dom操作能力。h.js 主要用於dom操作是對mui的一種彌補，完美兼容mui，加速基於h5+、mui的app項目開發。
　　和jq比較h.js更小、更輕（同樣的功能對比，h.js 只有8K!）、更高效（去除pc端兼容性判斷、100%原創底層代碼），更適合移動app開發。
　　感覺挺好用，還沒有深究，簡單記錄項目中用到的
　　

h('#abc').html("html 字符串")   //選擇ID爲abc的元素，添加內容爲html字符串
h('.njk').html("html 字符串")    //選擇class中有njk的元素，內容全部換成html字符串

更詳細的用法見參考文檔 http://www.hcoder.net/h/docs287.html

　　三、用地圖顯示位置
　　效果如上面第二張圖片，相關代碼如下：
　　

<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<div id="container"></div>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=8e0f8b48e90a7db33634edf8b6177ae4"></script>
<script type="text/javascript">
    init();
    function init(res) {
        console.log("運行到init函數內部！");
        var location1 = [];
        location1.push(116.659498);
        location1.push(39.591908);
        var map = new AMap.Map("container", {
            resizeEnable: true,
            center: location1, //地圖中心點
            zoom: 13 //地圖顯示的縮放級別
        });
        //添加點標記，並使用自己的icon
        new AMap.Marker({
            map: map,
            position: location1,
            icon: new AMap.Icon({
                size: new AMap.Size(120, 100), //圖標大小
                //image: "../images/lng1.png",
                //imageOffset: new AMap.Pixel(0, -60)
            })
        });
    }
</script>

　　四、mui ajax動態刷新界面
　　mui提供的ajax方式有四種mui.ajax(),mui.post(),mui.get(),mui.getJSON(),第一種是最正規的方式，mui.post()和mui.get()是mui.ajax()的簡化形式，最後一種是最常用的方式，項目中所有ajax訪問都用的是最後一種方式，示例代碼如下：
　　

mui.getJSON(
    'http://111.61.221.91:808/index.php/realtime',
    function(data) {
        console.log(JSON.stringify(data));
        //do sth with the data from server
    }
);

　　
　　五、HBuilder中主要的調試方式
　　console.log();

　　六、頁面定時刷新，獲取實時數據
　　核心函數：setInterval(function(){…},1000)
　　思路：調用上述函數，使客戶端每秒向服務器請求一次數據，和本地記錄的數據ID做比較，如果不同，則更新數據顯示，function(){}函數中應該嵌入的是ajax請求函數，以及數據返回之後的顯示更新。

　　七、開發過程中發現的一些JavaScript新的知識點
　　

1. shift()方法——用於把數組的第一個元素從其中刪除，並返回第一個元素的值；
2. push()方法——用於向數組末尾添加一個或多個元素，並返回新的長度；
3. join()方法——把數組中的所有元素放入一個字符串中，並用指定的分隔符分隔；
4. var date=new Date()——返回系統當前的時間，並且還有很多相關的時間函數

5. 待補充

   　　八、mui中的柵格系統
   　　與bootstrap中類似，示例代碼如下：
   　　（每行還是分爲12個單位）

<div class="mui-row">
    <div class="mui-col-xs-6 mui-text-center">水箱溫度</div>
    <div id="tank" class="mui-col-xs-6 mui-text-left">80.00 ℃</div>
</div>

　　九、PHP端（Linux服務器）每兩秒向MySQL數據庫執行一條命令的定時任務解決方案
　　用了crontab命令，過程是系統每分鐘執行crontab.sh，crontab.sh可以執行一分鐘，每兩秒調用createtable.php一次，與數據庫相關的代碼在php文件中。具體用法用到再查，因爲是夏老師幫忙做的，自己也沒有深入瞭解，最終實現的功能就是沒兩秒向數據庫中插入一條數據，並且一直不間斷。實例程序連接：待補充。。。

　　十、移動端播放視頻的問題
　　html5本身有視頻播放的標籤