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本身有视频播放的标签