常用总结

HTML

  • IOS点击会闪一下
1
*{-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}
  • 手机端禁止长按复制粘贴出现
1
2
3
4
5
6
7
8
9
10
11
*{
    -webkit-touch-callout:none; 
    -webkit-user-select:none; 
    -khtml-user-select:none; 
    -moz-user-select:none;
    -ms-user-select:none; 
    user-select:none;
}
input,textarea {
    -webkit-user-select:auto; 
}
  • placeholder样式
1
2
3
4
5
6
<textarea name="answer" placeholder="请输入您的意见" id="opinion"></textarea>
// <textarea></textarea>中间不能有空格，否则会失效
#opinion::-webkit-input-placeholder{
  font-family: "SimHei","SimSun";
  color: #6B7387;
}

另一个版本的media查询

media

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Another useful media feature is device-aspect-ratio.
Note that the iPhone 5 does not have a 16:9 aspect ratio. It is in fact 40:71.
iPhone < 5:
@media screen and (device-aspect-ratio: 2/3) {}
iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}
iPhone 6:
@media screen and (device-aspect-ratio: 375/667) {}
iPhone 6 Plus:
@media screen and (device-aspect-ratio: 16/9) {}
iPad:
@media screen and (device-aspect-ratio: 3/4) {}

链接放上 CSS media query

如图：

通用Fetch

Fetch

1
import 'whatwg-fetch';
  • commonParam
1
2
3
4
5
6
7
8
9
export function param(data){
    let url = '';
    for(var k in data){
        let value = data[k] !== undefined ? data[k] : '';
        url += '&' + k + '=' + encodeURIComponent(value);
    }
    return url ? url.substring(1) : '';     //substring(1),返回1到length的字符串
}
  • GET
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
export function get(base,url,params) {
    url = base + url
    /*get拼接*/
    if(params){
        let dataStr = '';
        Object.keys(params).forEach(key => {
            dataStr += key + '=' + params[key] + '&'
        });
        if(dataStr !== ''){
            dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
            url = url + '?' + dataStr
        }
    }
    
    //如果用楼上的commonParam
    //url += (url.indexOf('?') < 0 ? '?' : '&') + param(params)
    return fetch(url)
        .then(function(response) {
            if(response.status === 200){
                return response.json();
                //return Promise.resolve(response)  //res直接resolve也可以，见下图
            }else{
                Toast.info(response.status+'  '+response.statusText, 1);
                return false;
            }
        }, function(error) {
            console.log(error)
        })
    };

response:

Promise.resolve(response.data):

  • POST
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
export function post (base,url,data) {
    url = base + url
    let dataStr = '';
    if(data){
        Object.keys(data).forEach(key => {
            dataStr += key + '=' + data[key] + '&'
        });
        if(dataStr !== ''){
            dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
        }
    }
    
    return fetch(url,{
            method:'POST',
            headers:{
                    //"Content-Type": "application/json",
                    "Content-Type": "application/x-www-form-urlencoded"     /*这种格式下需要进行楼上的dataStr*/
                },
            //body:JSON.stringify(data)
            body:dataStr,                               /*这种格式下需要进行楼上的dataStr*/
        }).then(function(response) {
            if(response.status === 200){
                return response.json()
            }else{
                Toast.info(response.status+'  '+response.statusText);
                return false;
            }
        }, function(error) {
        console.log(error)
        })
    };
  • UPLOADIMG
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export function uploadImage(base,url,params){
    return new Promise(function (resolve, reject) {
        /*以FormData格式上传*/
        let formData = new FormData();
        for (var key in params){                        /*多个上传*/
            formData.append("imgs", params[key]);       /*imgs与后台约定，有的是files*/
        }
        // formData.append("img",file)                  /*单个上传*/
        
        fetch(base + url, {
            method: 'POST',
            body: formData,
        }).then((response) => response.json())
            .then((responseData)=> {
                resolve(responseData);
            })
            .catch((err)=> {
                Toast.fail(err);
                reject(err);
            });
        });
    }
  • JSONP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import originJsonp from 'jsonp'
export function jsonp(url,data,option){
    url += (url.indexOf('?') < 0 ? '?' : '&') + param(data);
    return new Promise((resolve,reject)=>{
        originJsonp(url,option,(err,data) => {
            if(!err){
                resolve(data)
            }else{
                reject(err)
            }
        })
    })
}
//使用直接return jsonp(各种参数)
▲ ▼