移动web开发小结

布局

使用flex布局方案

屏幕适配

设置meta标签。

使用VW单位控制元素大小

例如：750px = 100vw； 1vw = 7.5px

iPhone X 适配

1
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { /* iPhone X 独有样式写在这里*/ }

获取设备像素比

1
2
3
4
5
6
7
8
/** 
 * 根据window.devicePixelRatio获取像素比 
 */ 
function DPR() { 
    if (window.devicePixelRatio && window.devicePixelRatio > 1) { 
        return window.devicePixelRatio; 
    } 
return 1; }

样式

个性字体引入及使用

1
2
3
4
5
6
7
8
9
@font-face{

    font-family: 'customFont';

    src: url('../fonts/customFont1.ttf');

}

.selector {font-family: customFont}

去除iOS中元素被点击时出现的阴影

1
*{-webkit-transition: -webkit-transform .3s;-o-transition: transform .3s;transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}

书写模式:竖向、从右往左

1
.write_mode_vertical{z-index: 999;margin: 0 auto;-webkit-writing-mode: vertical-rl;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;}

全屏背景图

1
body{margin: 0;width: 100%;height: 100%;background: url(../img/background.jpg) no-repeat 0 0 / 100% 100% ;font-family: customFont;display: none}

遮罩层

1
.weui-mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 1000;display: none;background: rgba(0, 0, 0, 0.6);}

弹出层

1
.absoluteCenter{position: fixed;top: 50%;bottom: auto;left: 50%;-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-transition: -webkit-transform .3s;-o-transition: transform .3s;transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-webkit-backface-visibility: hidden;backface-visibility: hidden;}

上下左右居中

1
display: -webkit-box;display: -ms-flexbox;display: flex;margin: 0 auto;width:12.9333vw;height:105.7333vw;background: url(../img/lot.png) no-repeat 0 0 / 100% ;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}

营销活动类单页H5注意事项

  • 由于是单页效果，尽量不要出现Y轴滚动条
  • 登陆功能：注意判断登陆状态，是否需要跳转，缓存用户信息等。
  • 图像处理：用户上传的照片可能是各种比例，需要注意图片展示容器与图像的匹配性
  • DOM状态较多时，每屏可考虑用div包裹元素，展示下一屏时隐藏上一屏，方便控制。

meat 标签

1
2
3
4
5
6
7
8
9
10
11
12
13
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
<meta name="description" itemprop="description" content="">
<meta itemprop="name" content="">
<meta itemprop="image" content="">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta name="full-screen" content="yes">
<meta name='x5-fullscreen' content='true' />
<meta name='360-fullscreen' content='true' />
<meta name="browsermode" content="application">
<meta content="telephone=no,email=no" name="format-detection">

按钮点击时去除阴影

1
-webkit-tap-highlight-color:transparent

隐藏滚动条

1
.content::-webkit-scrollbar{display:none}

滚动卡顿优化

1
2
overflow：scroll 滑动卡顿 ，加上
-webkit-overflow-scrolling: touch;

网页调起手机相机拍照或相册选择照片 input type=’file’

1
2
<!--如果该元素的 type 属性的值是file,accept则该属性表明了服务器端可接受的文件类型  capture="user、camera"强制指定调用摄像头-->
<input type="file" id="selectPhoto" name="file" accept="image/*" style="display:none">

注意：input type=’file’ 在所有的android webview中不兼容

FileReader对象读取 input file 文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
/**
     * 读取input中的文件,设置图片预览
     * @param {*} files input所选的file对象
     */
    const handleFile = (files) => {
        for (let i = 0; i < files.length; i++) {
            let file = files[i];// 获取files数组中的数据
            const imageType = /^image\//;
            
            if (!imageType.test(file.type)) {
            continue;
            }
                     
            if(window.FileReader){
                // 构建FileReader对象实例，用来读取file文件
                let reader = new FileReader();
                // onload 在读取操作完成时触发。
                reader.onload = (function() { 
                    return function(e) { 
                        let img = new Image();
                        img.src = e.target.result ;
                        $(".photoBorder").css('background-image', 'url(' + "./img/box2.png" +')' );
                        $("#fileSelect").attr("src",  e.target.result );
                        img.onload = function() {
                            if(img.width > img.height){
                                // 横拍照片，设置照片高度100%，宽度自适应
                                $("#fileSelect").css({"width":"auto" , "height":"100%", "min-width":"80.8vw"})
                            }else{
                                // 竖拍照片，设置照片宽度100%，高度自适应
                                $("#fileSelect").css({"width":"100%" , "height":"auto", "min-width":"80.8vw"})
                            }

                            // EXIF.getData(img, function() {
                            //     // iPhone不同方向拍的照片直接在网页上显示会有四种方向（方向是一个叫Orientation的数值，记录在图片的EXIF信息中，使用）：
                            //     // 1）Orientation=1 => 正常方向
                            //     // 2）Orientation=3 => 顺时针旋转了180°(处理时，顺或逆时针旋转180°即可转正)
                            //     // 3）Orientation=6 => 顺时针旋转了270°(也相当于逆时针旋转了90°，即-90°，处理时，顺时针转90°即中转正)
                            //     // 4）Orientation=8 => 顺时针旋转了90°(处理时，逆时针转90°或者顺时针旋转270°即可转正)
                            //     var orientation = EXIF.getTag(this, "Orientation");
                            //     $('#orientation').val(orientation);
                            //     if(orientation){
                            //         switch(orientation){
                            //             case 1:
                            //                 // 横拍照片，设置照片高度100%，宽度自适应
                            //                 $("#fileSelect").css({"width":"auto" , "height":"100%"})
                            //                 break;
                            //             case 6://需要顺时针90度旋转
                            //             // $("#fileSelect").rotate(90);
                            //                 // 竖拍照片，设置照片宽度100%，高度自适应
                            //                 $("#fileSelect").css({"width":"100%" , "height":"auto"})
                            //                 break;
                            //             case 8://需要逆时针90度旋转
                            //             // $("#fileSelect").rotate(-90);
                            //                 // 竖拍照片，设置照片宽度100%，高度自适应
                            //                 $("#fileSelect").css({"width":"100%" , "height":"auto"})
                            //                 break;
                            //             case 3://需要180度旋转
                            //             // $("#fileSelect").rotate(180);
                            //                 // 横拍照片，设置照片高度100%，宽度自适应
                            //                 $("#fileSelect").css({"width":"auto" , "height":"100%"})
                            //                 break;
                            //         }
                            //     }else{
                            //         $("#fileSelect").css({"width":"100%", "height":"100%"})
                            //     }
                            // });
                        };
                    }; 
                })();  
                reader.onerror = function(event) {
                    alert("File could not be read! Code " + event.target.error.code);
                }
                // 读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成（DONE），并触发 loadend 事件
                // 同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
                reader.readAsDataURL(file); 
            }else{
                alert("您的手机不支持该功能");  
            }
        }
    }
1
2
3
4
5
6
7
const selectPhotoElement = document.getElementById("selectPhoto");
    var fileList = '';
    function handleFilesPreview () {  
        fileList = this.files; /* now you can work with the file list */
        handleFile(fileList);   // 读取file,设置图片预览
    }
    selectPhotoElement.addEventListener("change", handleFilesPreview, false);  // 监听input，change时调用handleFilesPreview

注意：上传图像到后端时需要用EXIF.js读取图片信息，处理图像方向。

使用FormData对象模拟表单上传文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/**
     *
     * 使用FormData对象模拟表单上传文件
     * @param {*} key 表单key
     * @param {*} value 表单value值  在此也就是文件files
     */
    const uploadFiles = (data) => {
        // 创建一个空的FormData对象
        var formData = new FormData();
        for(let key in data){
            // 使用FormData.append来添加键/值对到表单里面
            formData.append(key ,data[key]);
        }
        $.ajax({
            url:     url_interface + 'screen/multipleScreenController/uploadAndBap',
            data:    formData,
            type:    "post",
            contentType : false,// (默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。可以明确传一个content-type
            processData : false,// (默认: true) 默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
            success: function(data, textStatus, jqXHR){
                dialog_close($weui_mask,$popups);
                if(data.success && data.code == '10003'){
                    dialog($weui_mask,$popupsSuccess);
                    if(data.obj === 0){
                        allowable = false;
                    }
                    if( data.obj < 0 ){
                        $(".times").hide()
                    }else{
                        $(".times").text(`(当前可发送${data.obj}次哦)`);
                    }                    
                }else{
                    $("#popupsFail span").text(data.msg);
                    dialog($weui_mask,$popupsFail,true);
                }
               
            },
            error:   function(err){
                dialog_close($weui_mask,$popups);
                $popups.text("上传失败，请重试");
                dialog($weui_mask,$popups);
                init();
            }
        })
    }

将H5 分享微信/QQ 需要接入微信sdk

登陆页

  1. 表单的验证

    1
    2
    <input id="phone" type="tel" placeholder="请输入手机号码" maxlength="11"
    onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />

  2. 手机号验证

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /**
     * 校验是否是手机号
     * @param value
     * @returns
     */
    function isMobile(value){
    	var reg = /^((13[0-9])|(14[5,7,9])|(15[^4])|(18[0-9])|(17[0,1,3,5,6,7,8]))\d{8}$/;
        return reg.test(value);
    }

  3. 短信验证码倒计时

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    /**
     * 短信倒计时
     * @param beginFn
     * @param updateFn
     * @param completeFn
     * @returns
     */
    var timer;
    var $btnSmsCode = $("#btn_smsCode");
    function countDown(beginFn, updateFn, completeFn) {
        var remain = 60;
        beginFn(remain);
        timer = setInterval(function () {
            if (remain-- <= 0) {
                completeFn();
            } else {
                updateFn(remain);
            }
        }, 1000);
    }

    function cdStart(remain) {
    	$btnSmsCode.removeClass("textBlue").addClass("textGray");
    	$btnSmsCode.text(remain + "s重发");
    }

    function cdUpdate(remain) {
    	$btnSmsCode.text(remain + "s重发");
    }

    function cdComplete() {
        clearInterval(timer);
        $btnSmsCode.removeClass("textGray").addClass("textBlue");
        $btnSmsCode.text("免费获取");
    }

APP下载引导页面

  1. 需要根据user agent 判断用户设备

  2. 根据ua进行跳转应用宝or App store 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 判断访问终端跳转到不同的下载商店

    function device_type(){

        var u = navigator.userAgent;

        var _isAndroid = u.indexOf('Android') > -1 ; // android终端

        var _isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端

        if(_isAndroid){

            window.location.href="http://a.app.qq.com/o/simple.jsp?pkgname=com.octvision.liuzhou.park";

        }else if(_isIOS){

            window.location.href="https://itunes.apple.com/cn/app/id1231405289?mt=8";

        }

    }

HTML5新特性之摇一摇 shake.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**摇一摇,触发签筒动画 */
//create a new instance of shake.js.
var myShakeEvent = new Shake({
    threshold: 15,
    timeout: 1000
});
// start listening to device motion
myShakeEvent.start();
// register a shake event
window.addEventListener('shake', shakeEventDidOccur, false);
// shake event callback
function shakeEventDidOccur() {
    showGif();
    // stop listening for shake events
    window.removeEventListener('shake', shakeEventDidOccur, false);
    //To stop listening to device motion
    myShakeEvent.stop();
}

HTML5新特性之存储 localStorage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 进入页面时调用此方法保存URL,存储当前页面的pathname到localstorage
function storageURL() { 
	localStorage.setItem('url', window.location.href);
}

// 读取存储的pathname,登录成功时调用此方法。若storage中无保存的URL，默认跳转到许愿树页面
function getURL() { 
    var url = localStorage.getItem('url');
    if(url){
    	return url;
    }else{
    	return '../wishTree/tree.html';
    } 
}

网页转图片 下载并保存 ——html2canvas.js

思路是：

1.先用html2canvas将网页转成图片。注意可以额外设置 scale 控制canvas的高清度。

2.再构造一个带图片下载链接 的a标签，调用saveFile方法就通过js 触发该标签点击事件，触发下载。

需要注意的是，在微信中无法调用下载方法，在iOS浏览器中下载图片会变成打开图片的新标签页，需提示用户自行长按图片保存。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**下载图片:构造一个 带图片下载链接 的a标签，调用saveFile方法就通过js 触发该标签点击事件，触发下载。*/
function saveFile(data, filename) {
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;

    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    save_link.dispatchEvent(event);
}

/**点击保存图片按钮 */
$(".check_lot .save").on('click', function () {
    // The function returns a Promise containing the <canvas> element. Simply add a promise fullfillment handler to the promise using then:
    html2canvas(document.querySelector("body"), { scale: 3 }).then(function (canvas) {
        //此时已经获取到canvas
        //获取userAgent
        var ua = navigator.userAgent.toLowerCase();
        var isWeixin = ua.indexOf('micromessenger') != -1;
        //如果是微信浏览器,弹出层提示长按图片保存
        if (isWeixin) {
            var imgUri = canvas.toDataURL("image/png");
            $(".gallery img").attr("src", imgUri);
            dialog($weui_mask, $(".gallery"));
        }
        //如果不是微信浏览器（iOS浏览器也不能下载，而是新标签页打开了图片）
        else {
            var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
            window.location.href = imgUri; // 下载图片
            saveFile(canvas.toDataURL("image/png"), 'lot');
    	}
    });
});

canvas使用注意点

  1. 设置canvas的大小

    1
    2
    3
    4
    5
    6
    7
    8
    //窗口尺寸改变响应（修改canvas大小）
    function resizeCanvas() {
        $("#canvas").attr("width", $(window).get(0).innerWidth);
        $("#canvas").attr("height", $(window).get(0).innerHeight * 0.25);
    };

    //添加窗口尺寸改变响应监听
    $(window).resize(resizeCanvas);

根据设备像素比渲染对应大小的图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function DPR() {
    if (window.devicePixelRatio && window.devicePixelRatio > 1) {
    return window.devicePixelRatio;
    }
    return 1;
}

// 将传入值转为整数
function parseValue(value) {
    return parseInt(value, 10);
};
// 绘制canvas
async function drawCanvas(selector) {
    // 获取想要转换的 DOM 节点
    const dom = document.querySelector(selector);
    const box = window.getComputedStyle(dom);
    // DOM 节点计算后宽高
    const width = parseValue(box.width);
    const height = parseValue(box.height);
    // 获取像素比
    const scaleBy = DPR();
    // 创建自定义 canvas 元素
    const canvas = document.createElement('canvas');
    // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
    canvas.width = width * scaleBy;
    canvas.height = height * scaleBy;
    // 设定 canvas css宽高为 DOM 节点宽高
    canvas.style.width = `${width}px`;
    canvas.style.height = `${height}px`;
    // 获取画笔
    const context = canvas.getContext('2d');
    // 将所有绘制内容放大像素比倍
    context.scale(scaleBy, scaleBy);
    // 将自定义 canvas 作为配置项传入，开始绘制
    return await html2canvas(dom, {canvas});
}

Swiper 使用注意点

  1. 当Swiper中的元素是动态添加时，会导致Swiper停止自动切换。

    解决方法是：

    • 配置swiper属性：observer: true, observeParents: true

    • 在拼接完成并使用mySwiper.appendSlide(swData)添加到dom后，mySwiper.autoplay.start();

  2. 当Swiper中的元素过多，需要回收时。

    1
    2
    3
    4
    5
    on: {
        slideChangeTransitionEnd: function(){// 滚动后删除
        	mySwiper.removeSlide(this.activeIndex -1)
        },
    }

修复input被键盘遮挡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//输入法键盘挡住输入框的 bug 
    if (/Android/gi.test(navigator.userAgent)) {
        window.addEventListener('resize', function () {
            if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
                window.setTimeout(function () {
                document.activeElement.scrollIntoViewIfNeeded();
                }, 0);
            }
        })
    }

    $("#message").on('focus',function(){
        var _this = this;
        setTimeout(function(){
            _this.scrollIntoViewIfNeeded();
        },200);
    })

判断访问终端跳转到不同的下载商店

1
2
3
4
5
6
7
8
9
10
11
// 判断访问终端跳转到不同的下载商店
    function device_type(){
        var u = navigator.userAgent;
        var _isAndroid = u.indexOf('Android') > -1 ; // android终端
        var _isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
        if(_isAndroid){
            window.location.href="http://a.app.qq.com/o/simple.jsp?pkgname=com.octvision.liuzhou.park";
        }else if(_isIOS){
            window.location.href="https://itunes.apple.com/cn/app/id1231405289?mt=8";
        }
    }

百度地图接入

百度地图web版有许多API,其中分为PC 3.0版和移动优化版 Lite，区别是移动版API少一些，并且两个版本不可同时引用，在使用之前需要考虑。

那么如何使用百度地图API呢？可以先参考官网的案例（示例demo），再查询更具体的技术文档（类参考），技术文档写得可能比较抽象，不清楚则结合百度搜索。

基本用法 地图初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!--地图容器-->
<div id="container"></div>

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你申请的ak"></script>

<script>
    
// 地图初始化的坐标点
const CSYS = {
    longitude: 100,
    latitude: 24
}

/**
 * 地图初始化 指定坐标
 * @param {*} CSYS 指定的坐标位置
 */
const initMap = (CSYS) => {
    const point = new BMap.Point(CSYS.longitude, CSYS.latitude);
    map = new BMap.Map("container");
    map.centerAndZoom(point, 19);
    map.enableScrollWheelZoom(); //滚轮放大缩小
}

initMap(CSYS)
    
</script>

工具函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/**
 * 根据轨迹坐标 移动地图
 * @param {*} rawData 原始数据
 */
const loadMap = (rawData) => {
    // 画面移动到起点和终点的中间           
    const centerPoint = new BMap.Point((Number(rawData[0].longitude) + Number(rawData[rawData.length - 1].longitude)) / 2, (Number(rawData[0].latitude) + Number(rawData[rawData.length - 1].latitude)) / 2);
    
    // 画面移动到轨迹最新的点
    const centerPoint = new BMap.Point( Number(rawData[0].longitude) , Number(rawData[0].latitude) );
    map.panTo(centerPoint);
}


var PointArray = []; // 坐标数据集。由原始数据集中批量创建Point 以指定的经度和纬度创建一个地理点坐标 存入PointArray
/**
 * 根据原始数据生成百度坐标点point数据集
 * @param {*} rawData 原始数据
 */
const generatePointArray = (rawData) => {
    for (let item of rawData) {
        let point = new BMap.Point(item.longitude, item.latitude)
        PointArray.push(point)
    }

    // 数据倒序 (因原始数据是最新数据在数组最前，而绘制轨迹希望从最早绘制到最新)
    PointArray = PointArray.reverse()
}


/**
     * 异步方法
     * 调用百度webAPI,请求转换后的坐标数据。
     * 回调函数: generatePoint() 生成坐标点
     *          cacheGPS 缓存坐标点数据,关闭页面时会清除缓存。
     * @param {*} tabid     所点击的tab的id,由compose()传入
     * @param {*} pointsGPS 按要求组装的数据集
     * @param {*} datas     景点原始数据集,由compose()传入
     */
    function convert(tabid, pointsGPS, datas) {
        $.ajax({
            type: "GET",
            dataType: "jsonp",
            jsonp: "callback", //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
            jsonpCallback: "convertGPS",
            url: `https://api.map.baidu.com/geoconv/v1/?coords=${pointsGPS}&from=1&to=5&ak=GE5RaGEURnsgAaOcGSM0LaH9EqdNbFW9`,
            success: function (data, textStatus, jqXHR) {
                if (data.status === 0 && data.result.length > 0) {
                    const newData = combine(tabid, data.result, datas); // 因标点绑定的弹窗需要数据因此提前合并以供generatePoint()使用
                    generatePoint(tabid,newData);
                    cacheGPS(tabid, newData);
                }
            },
            error: function (err) {
                alert("网络错误，请重试")
            }
        })
    }

利用GPS数据集绘制轨迹

绘制轨迹的原理是利用百度地图API的绘制线条api——polyline来实现，多个点之间利用线条连接即视为轨迹。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
let maker; // 播放时显示的maker

/**
 * 循环调用本函数，每次调用时绘制线并设置maker的position
 */
function drawPolyline() {
    var point = PointArray[index];
    if (index > 0) {
        map.addOverlay(new BMap.Polyline([PointArray[index - 1], point], {
            strokeColor: "red",
            strokeWeight: 3,
            strokeOpacity: 1
        }));
    }

    maker.setPosition(point);
    index++;
    //if (followChk.checked) {
    //map.panTo(point);
    //}
    if (index < PointArray.length) {
        timer = window.setTimeout("drawPolyline(" + index + ")", 5);
    } else {
        $(".search").attr("disabled", false);
        $(".showMaker input").attr("disabled", false);
        maker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    }
}


/**
 * 绘制轨迹 先将原始数据生成坐标系，再进行绘制
 * @param {*} rawData 数据集
 */
const drawLine = (rawData) => {

    // 移动地图
    loadMap(rawData)

    // 生成坐标数据集
    generatePointArray(rawData)

    // 坐标数据集大于0才可以绘制
    if (PointArray.length > 0) {
        index = 0;
        map.clearOverlays();
        maker = new BMap.Marker(PointArray[0]);
        map.addOverlay(maker); // 添加覆盖物 即标点 
        //$(".search").attr("disabled", "true");
        //$(".showMaker input").attr("disabled", "true");
        drawPolyline()
    } else {
        alert("数据加载中，请稍后再试。")
    }
}

/**
 * 绘制静态轨迹
 * 
 */
const drawStaticLine = () => {
    //创建折线，即轨迹
    var polyline = new BMap.Polyline(PointArray, {
        strokeColor: "red",
        strokeWeight: 3,
        strokeOpacity: 1,
        //icons: [draw_line_direction(10)]
    });

    map.addOverlay(polyline); // 添加覆盖物 即折线

    // 添加最新的
    var maker = new BMap.Marker(PointArray[PointArray.length - 1]);
    map.addOverlay(maker); // 添加覆盖物 即标点 
    maker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
 
}

循环添加轨迹点到地图上

1
2
3
4
5
6
7
// 添加轨迹点
for (let item of rawData) {
    var point = new BMap.Point(Number(item.longitude), Number(item.latitude));
    var pointMaker = new BMap.Marker(point);
    map.addOverlay(pointMaker); // 把标点增加到地图上
    addClickHandler(item, pointMaker); //标点绑定事件
}

标点绑定点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
 *
 * 监听标点绑定的事件
 * @param {*} item 每个标点的坐标
 * @param {*} marker 每个标点的实例
 */
function addClickHandler(item, marker) {
    marker.addEventListener("click", function (e) {
        openInfo(item, e)
    });
}

/**
 *
 * 点击标点后的弹窗
 * @param {*} content 标点坐标
 * @param {*} e
 */
function openInfo(content, e) {
    const p = e.target;
    // console.log("marker的位置是" + p.getPosition().lng + "," + p.getPosition().lat);    
    const point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);

    // 拼接弹窗dom
    const contents = "时间: " + content.createDate

    const infoWindow = new BMap.InfoWindow(contents); // 创建信息窗口对象 
    map.openInfoWindow(infoWindow, point); //开启信息窗口
}

使用drivingroute绘制动态行车guiji

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
$(function($) {
    // 地图初始化
    let latitude = 22.541768;
    let longitude = 113.947338;

    var map = new BMap.Map("container"); 
    var point = new BMap.Point(longitude,latitude); 
    map.centerAndZoom(point, 19);  

    const start = new BMap.Point(113.946601,22.541055); 
    const end   = new BMap.Point(113.948106,22.54143); 
    var myIcon = new BMap.Icon("./img/car.png", new BMap.Size(52, 26), {    //小车图片
		//offset: new BMap.Size(0, -5),    //相当于CSS精灵
		imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。
    });

    var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});    //驾车实例

    driving2.search(start, end);    //显示一条公交线路

    function run(){
        var driving = new BMap.DrivingRoute(map);    //驾车实例
		driving.search(start, end);
		driving.setSearchCompleteCallback(function(){
			var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
			var paths = pts.length;    //获得有几个点

			var carMk = new BMap.Marker(pts[0],{icon:myIcon});
			map.addOverlay(carMk);
			i=0;
			function resetMkPoint(i){
				carMk.setPosition(pts[i]);
				if(i < paths){
					setTimeout(function(){
						i++;
						resetMkPoint(i);
					},100);
				}
			}
			setTimeout(function(){
				resetMkPoint(5);
			},100)

		});
    }

    run()
});

地图贴图

给百度地图贴上覆盖物——瓦片贴图，首先需要选取一个中心点，然后使用瓦片切图工具将贴图切碎成10-22级的贴图放到文件夹中。

1
2
3
4
5
6
7
8
9
10
11
// 地图覆盖贴图
    var tileLayer = new BMap.TileLayer({isTransparentPng: true});   // 创建地图层实例    
    // 告诉API取图规则,设置图块路径  tileCoord为图块的编号信息，zoom为图块的级别
    // 使用者需要告知API特定编号和级别所对应的图块的地址
	tileLayer.getTilesUrl = function(tileCoord, zoom) { 
		var x = tileCoord.x;
		var y = tileCoord.y;
		return './img/tiles/' + zoom + '/' + x + '_' + y + '.png';  //根据当前坐标，选取合适的瓦片图
    }
    map.enableScrollWheelZoom(true);
    map.addTileLayer(tileLayer);

隐藏百度地图标示 （须注意法务风险）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/** 隐藏百度地图信息窗口左侧阴影图片 **/
img[src="http://api0.map.bdimg.com/images/iws3.png"] {
    display: none;
}

/** 隐藏百度地图版权信息,左下角图片 **/
img[src="http://api0.map.bdimg.com/images/copyright_logo.png"] {
    display: none;
}

/** 隐藏百度地图版权信息,文字信息 **/
.BMap_cpyCtrl {
    display: none;
}

.BMap_mask {
    top: 5% !important;
    left: 5% !important;
    position: fixed !important;
    background:url(${ctxStatic}/images/13.png) no-repeat !important;
    zoom: 0.11 !important;
}

.anchorBL {
    display: none;
}

扫描二维码

  • 前端扫描二维码——GitHub项目
  • 调用微信JS SDK ，仅限于在微信中使用
  • 在webview中调用native app进行扫码

摇一摇

使用shake.js监听手机摇一摇事件

代码段

弹出层 遮罩层 可以封装成一个小组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var $weui_mask = $(".weui-mask");
var $dialog = $(".dialog");
var $rulesInfo = $(".rulesInfo");

/**
*

- 显示弹出层
- @param {*} maskLayer 遮罩层
- @param {*} popLayer 需要显示在遮罩层之上的弹出层
  */
  function dialog(maskLayer, popLayer) {
      maskLayer.fadeIn(200);
      popLayer.fadeIn(200);
      maskLayer.on('click', function () {
      	dialog_close(maskLayer, popLayer);
      });
  }

/**
*

- 关闭弹出层
- @param {*} maskLayer 遮罩层
- @param {*} popLayer 需要显示在遮罩层之上的弹出层
  */
  function dialog_close(maskLayer, popLayer) {
      maskLayer.fadeOut(200);
      popLayer.fadeOut(200);
      // //恢复页面初始状态
      // $(".lots").fadeIn(200);
      // $(".mylotslist ul").empty();
      // $(".lots_gif , .getlots , .check_lot , .mylotslist , .gallery").hide();
      // $(".index").fadeIn(200);
  }

ajax可以封装成一个公共方法，传入请求url、携带数据、回调函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/**
*

- 封装的POST请求类
- @param {*} url 请求地址
- @param {*} data 请求携带数据
- @param {*} callback 请求成功后需要执行的回调函数
  */
  function GetDataByPost(url, data, callback) {
      $.ajax({
      url: url,
      data: data,
      type: "post",
      success: function success(data, textStatus, jqXHR) {
          var sessionStatus = jqXHR.getResponseHeader("sessionstatus");
          if (sessionStatus == "timeout") {
          	location.href = "../login/login.html";
          } else {
          	callback(data);
          }
      },
      error: function error(err) {
          $dialog.text(err);
          dialog($weui_mask, $dialog);
          }
      });
  }

/**调用 */
    function getLot() {
        var url = url_interface + "/octDrawController.do?saveUserDraw";
        var data = "";
        var callback = function callback(data) {
            if (data.obj) {
                $(".lot_name").text(data.obj.octDraw.name);
                $(".lot_name").data("id", data.obj.id);
                $(".getlots").fadeIn(2000);
            } else {
                // 没抽到签
                $dialog.text(data.msg);
                dialog($weui_mask, $dialog);
            }
        };
        GetDataByPost(url, data, callback);
    }

时间类型 2018-09-20 这种类型的时间转为年月日后，在iOS为变成NaN

解决办法是将时间 - 转为 /

1
2
3
4
5
6
7
8
9
10
11
/**
*

- 格式化为自己需要的日期格式：xxxx年xx月x日
- @param {*} time 时间
- @returns 年月日
  */
  function dateFormat(time) {
  	var timestamp = new Date(time.replace(/\-/g, "/"));
  	return timestamp.getFullYear() + "年" + (timestamp.getMonth() + 1) + "月" + timestamp.getDate() + "日";
  }

字符串转换为日期对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * 字符串转换为日期对象
 * @param dateStr
 * @returns
 */
function strToDate(dateStr) {
    var datenew = dateStr;
    var reCat = /(\d{1,4})/gm;
    if(datenew==null||datenew==''){
    	return null;
    }
    var t = datenew.match(reCat);
    t[1] = t[1] - 1;
    eval('var d = new Date(' + t.join(',') + ');');
    return d;
}

将时间切割为: 天,时,分,秒; 用于倒计时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
 * 将时间切割为: 天,时,分,秒; 用于倒计时
 * @param millisecond
 * @returns
 */
function splitTime(millisecond) {
    var second = millisecond / 1000; // 秒
    var d = Math.floor(second / 60 / 60 / 24),
        h = Math.floor(second / 60 / 60 % 24),
        m = Math.floor(second / 60 % 60),
        s = Math.floor(second % 60);
    return {
        d: d < 10 ? '0' + d : d,
        h: h < 10 ? '0' + h : h,
        m: m < 10 ? '0' + m : m,
        s: s < 10 ? '0' + s : s
    };
}

产生随机数

1
2
3
4
5
6
7
8
9
10
11
/**
 * 产生随机数
 * @param numAry
 * @returns
 */
function randomNum(numAry){
	var random = Math.floor(Math.random() * numAry.length);
    var res = numAry[random];
    
    return res;
}

获取URL参数

1
2
3
4
5
6
7
8
9
10
11
12
13
/**
 * 获取URL参数值
 * @param name
 * @returns
 */
function GetQueryString(name){
	var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	if(r != null){
		return	unescape(r[2]); 
	}
	return null;
}
1
2
3
4
5
// 从播放器获取大屏播放时长、大屏编码参数 
const url_string = window.location.href;
const url        = new URL(url_string);
const noticeTime = url.searchParams.get("noticeTime");
const screenCode = url.searchParams.get("screenCode");

展开全文 >>

欢迎使用Markdown编辑器写博客

本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：

  • Markdown和扩展Markdown简洁的语法
  • 代码块高亮
  • 图片链接和图片上传
  • LaTex数学公式
  • UML序列图和流程图
  • 离线写博客
  • 导入导出Markdown文件
  • 丰富的快捷键

快捷键

  • 加粗 Ctrl + B
  • 斜体 Ctrl + I
  • 引用 Ctrl + Q
  • 插入链接 Ctrl + L
  • 插入代码 Ctrl + K
  • 插入图片 Ctrl + G
  • 提升标题 Ctrl + H
  • 有序列表 Ctrl + O
  • 无序列表 Ctrl + U
  • 横线 Ctrl + R
  • 撤销 Ctrl + Z
  • 重做 Ctrl + Y

Markdown及扩展

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]

使用简单的符号标识不同的标题，将某些文字标记为粗体或者斜体，创建一个链接等，详细语法参考帮助？。

本编辑器支持 Markdown Extra , 　扩展了很多好用的功能。具体请参考Github.

表格

Markdown　Extra　表格语法：

项目 价格
Computer $1600
Phone $12
Pipe $1

可以使用冒号来定义对齐方式：

项目 价格 数量
Computer 1600 元 5
Phone 12 元 12
Pipe 1 元 234

###定义列表

Markdown　Extra　定义列表语法：
项目１
项目２
: 定义 A
: 定义 B

项目３
: 定义 C

: 定义 D

> 定义D内容

代码块

代码块语法遵循标准markdown代码，例如：

1
2
3
4
5
6
7
8
9
10
@requires_authorization
def somefunc(param1='', param2=0):
    '''A docstring'''
    if param1 > param2: # interesting
        print 'Greater'
    return (param2 - param1 + 1) or None
class SomeClass:
    pass
>>> message = '''interpreter
... prompt'''

###脚注
生成一个脚注[^footnote].
[^footnote]: 这里是 脚注 的 内容.

目录

用 [TOC]来生成目录：

[TOC]

数学公式

使用MathJax渲染LaTex 数学公式，详见math.stackexchange.com.

  • 行内公式，数学公式为：$\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$。
  • 块级公式：

$$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

更多LaTex语法请参考 这儿.

UML 图:

可以渲染序列图：

1
2
3
张三->李四: 嘿，小四儿, 写博客了没?
Note right of 李四: 李四愣了一下，说：
李四-->张三: 忙得吐血，哪有时间写。

或者流程图：

1
2
3
4
5
6
7
8
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？

st->op->cond
cond(yes)->e
cond(no)->op
  • 关于 序列图 语法，参考 这儿,
  • 关于 流程图 语法，参考 这儿.

离线写博客

即使用户在没有网络的情况下，也可以通过本编辑器离线写博客（直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。

用户写博客的过程中，内容实时保存在浏览器缓存中，在用户关闭浏览器或者其它异常情况下，内容不会丢失。用户再次打开浏览器时，会显示上次用户正在编辑的没有发表的内容。

博客发表后，本地缓存将被删除。　

用户可以选择 把正在写的博客保存到服务器草稿箱，即使换浏览器或者清除缓存，内容也不会丢失。

注意：虽然浏览器存储大部分时候都比较可靠，但为了您的数据安全，在联网后，请务必及时发表或者保存到服务器草稿箱。

##浏览器兼容

  1. 目前，本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。
  2. IE９以下不支持
  3. IE９，１０，１１存在以下问题
    1. 不支持离线功能
    2. IE9不支持文件导入导出
    3. IE10不支持拖拽文件导入

展开全文 >>

《深入浅出React和Redux》读书笔记

著作权归该书作者所有。本读书笔记仅供个人记录学习使用，如若侵权，请通知到我，我将立即删除全部内容。

React新的前端思维

HTML = DOM 树

jQuery不好吗？

前不久，Github从代码中移除了jQuery代码。

j 就是js、Query 就是查找，这种思维模式写页面就是查找页面DOM节点，对他进行一些操作，异步获取数据拼接字符串插入DOM，也就是DOM操作，很容易写成面条式的代码，而且频繁操作dom会导致性能低下，页面状态比较多时难以管理和维护。

UI = render( data )

扭转思维，数据驱动页面。

React是声明式，并不直接操作DOM，你要达成什么效果，办什么事，告诉那个人，他自己去办好，不需要你主动去做。React只关心渲染，不关心如何渲染。

UI界面呈现什么，取决于输入数据。React使用虚拟DOM，不直接操作DOM，变动时，对比虚拟DOM差异，修改真实DOM最小化。

如何设计高质量的React组件

就和一个人最好一次只专注做一件事一样，一个组件只做一件事。

高内聚：把逻辑紧密相关的内容放在一个数组中，CSS、JS、JSX放在一起。

低耦合：不同组件之间的依赖关系尽量弱化，每个组件尽量独立。

差劲的程序员操心代码，优秀的程序员操心数据结构和它们之间的关系。——Linus

设计一个组件的时候，对外用prop，内部用state。

prop用于定义外部接口，state用于记录内部状态。

组件不应该改变prop的值，而state存在的目的就是让组件来改变。

组件的声明周期

装载过程 Mount

  1. constructor ：也就是ES6中每个类的构造函数，要创建组件类的实例，当然会调用对应的构造函数。（无状态组件不需要定义构造函数）

    目的：初始化state、绑定成员函数的this环境

  2. getInitialState 和 getDefaultProps ：在ES6的方法定义的React组件中不会用到

  3. render ：render函数并不做实际的渲染动作，他只是返回一个JSX描述的结构，最终由React来操作渲染过程。

    render函数应该是纯函数，完全根据this.prop和sthis.state来决定返回的结果，而且不要产生副作用，如在render函数中调用this.setState是错误的。因为一个纯函数不应该引起状态的改变。

  4. componentWillMount 和 componentDidMount 前者在render函数之前被调用，后者在调用render函数之后被调用。componentWillMount 可以在服务器端调用，这在同构时将会有用。

    注意：render函数被调用完之后，componentDidMount函数并不是立即被调用，componentDidMount被调用的时候，render函数返回的东西已经引发了渲染，组件已经被装到了DOM树上。

    之前说过，render函数本身并不直接往DOM树上渲染或者装载内容，它只是返回一个JSX表示的对象，然后由Reacr库来根据返回对象决定如何渲染。而React库要把所有组件返回的结果综合起来，才知道该如何产生对应的DOM修改。

    React和其他UI库配合时，例如jQuery，需要利用componentDidMount函数，当它被执行时，React组件对应的DOM已经处在，所有事件处理函数已经设置好，这时候就可以调用jQuery，让jQuery在宜家绘制的DOM基础上使用。

更新过程 Update

组件随着用户操作改变内容，当props或state被修改时，引发组件更新状态。

并不是所有的更新过程都会执行全部函数

  1. componentWillReceiveProps(nextProps) ：只有父组件的render函数被调用，在render函数里被选入的子组件就会经历更新过程，不管父组件传给子组件的props有没有改变，都会触发子组件的该函数。

    通过this.setState方法触发的更新过程不会调用该函数。因为该函数适合根据参数nextProps来计算是否要更新内部状态state，而更新组件内部状态的方法也就是this.setState，此时如果setState导致该函数再次被调用就会死循环。

  2. shouldComponentUpdate ：决定一个组件什么时候不需要渲染，该函数返回一个布尔值，告诉React这个组件在这次更新过程中是否要继续。在更新过程中，React先调用该函数，如果返回true，则继续更新，就饿下来调用render，反正得到false就会停止更新，也不会引发后续的渲染。该函数可以大幅提高React组件的性能——如果发现没必要重新渲染，就不用渲染。

    shouldComponentUpdate的参数就是接下来的props和state值。根据这两个参数判断true和false。

    1
    2
    3
    4
    5
    shouldComponentUpdate ( nextProps , nextState ){
    	// 当caption改变时才返回true。当它的值没变化时，或组件内部状态没改变时，不会调用render函数，没有必要重新绘制
    	return ( nextProps.caption !== this.props.caption ) || ( nextState.count !== this.state.count )

    }

  3. componentWillUpdate 和 componentDidUpdate 。

    如果组件的shouldComponentUpdate函数返回true，React接下来会调用对应组件的componentWillUpdate 、render、componentDidUpdate 。这一对函数在使用服务器端渲染时都可以被执行。

    上述说到可以利用componentDidMount函数执行其他UI库的代码，当React组件被更新时，原有内容被重新绘制，此时需要在componentDidUpdate函数再次调用jQuery代码。

卸载过程 Unmount

componentWillUnmount ：当React组件要从DOM树中删除掉之前，对应的componentWillUnmount函数会被调用，所以这个函数适合做一些清理性的工作。

Flux 和 Redux 架构

Flux和MVC对比发现，dispatcher相当于MCV的controller，store相当于model，view还是view，多出来的action可以看作是用户请求。

在Flux理念中，要改变界面，必须改变Stroe中的状态，如要改变Store中的状态，必须派发一个action对象，这就是规矩。Store只有get方法，没有set方法，所以杜绝了直接修改其内部状态，而view也只能通过get方法获取store的状态，无法直接修改状态。这种现实禁止了数据流混乱的可能。

展开全文 >>