rem页面适配 

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
/* rem适配 */
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth >= 750) {
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    recalc();
})(document, window);

/* rem适配 */
(function (doc, win) {
    var jw = $(window).width();
    var jh = $(window).height();
    var wRem;
    if (0.6 < (jw / jh) && (jw / jh) < 0.63) {
        wRem = 750;
    } else if ((jw / jh) > 0.63) {
        wRem = 830;
    } else if ((jw / jh) < 0.6) {
        wRem = 710;
    }
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth >= wRem) {
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / wRem) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    recalc();
})(document, window);

展开全文 >>

textarea文本域换行展示 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 提交的时候把文本域中的换行替换为<br/>标签 */
function setLineFeed(str) {
    if (typeof str === 'string') {
        var str1 = str.replace(/\r{0,}\n/g, '<br/>').replace(/\s/g, '&nbsp;')
        return str1;
    } else {
        return '';
    }
}

/* 回显的时候在textarea里面把<br/>标签的换成换行 */
function getLineFeed(str) {
    if (typeof str === 'string') {
        var str1 = str.replace(/<br\/>/g, '\n').replace(/\&nbsp\;/g, ' ')
        return str1;
    } else {
        return '';
    }
}

展开全文 >>

textarea高度自适应 

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
/* textarea高度自适应 */
$(function () {
    $.fn.autoHeight = function () {
        function autoHeight(elem) {
            elem.style.height = 'auto';
            elem.scrollTop = 0; //防抖动
            elem.style.height = elem.scrollHeight + 'px';
        }
        this.each(function () {
            autoHeight(this);
            $(this).on('keyup', function () {
                autoHeight(this);
            });
        });
    }
    $('textarea[autoHeight]').autoHeight();
});

function aHeight() {
    $.fn.autoHeight = function () {
        function autoHeight(elem) {
            elem.style.height = 'auto';
            elem.scrollTop = 0; //防抖动
            elem.style.height = elem.scrollHeight + 'px';
        }
        this.each(function () {
            autoHeight(this);
            $(this).on('keyup', function () {
                autoHeight(this);
            });
        });
    }
    $('textarea[autoHeight]').autoHeight();
}

展开全文 >>

vue页面cid传递 

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
/* 获取url参数 */
function GetUrlParam(paraName) {
  var url = document.location.toString();
  var arrObj = url.split("?");
  if (arrObj.length > 1) {
      var arrPara = arrObj[1].split("&");
      var arr;
      for (var i = 0; i < arrPara.length; i++) {
          arr = arrPara[i].split("=");
          if (arr != null && arr[0] == paraName) {
              return arr[1];
          }
      }
      return "";
  }
  else {
      return "";
  }
}

if(location.href.indexOf("cid") > -1){
  sessionStorage.setItem("cid", GetUrlParam("cid"));
}

/* vue路由守卫 */
router.beforeEach(async (to, from, next) => {
  from.query.cid = sessionStorage.getItem("cid");
  to.query.cid = sessionStorage.getItem("cid");
  console.log(from,to);
  next();
});

展开全文 >>

jquery页面ajax请求接口 

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
var settings = {
  "url": "",
  "method": "POST",
  "timeout": 0,
  "headers": {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  "data": {
    "redirect": ""
  }
};

$.ajax(settings).done(function (response) {
  console.log(response);
});

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "",
  "method": "POST",
  "headers": {
    "content-type": "application/x-www-form-urlencoded",
    "cache-control": "no-cache",
    "postman-token": "fa4ea953-cdc9-ef8e-725e-03aa23531c76"
  },
  "data": {
    "mobile": "13333332222",
    "code": "133333",
    "name": "张三",
    "province": "上海",
    "city": "上海"
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

展开全文 >>

js页面跳转顶部底部 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 页面跳转顶部/底部 */
function goToWhere(where) {
    var me = this;
    me.site = [];
    me.sleep = me.sleep ? me.sleep : 16;
    me.fx = me.fx ? me.fx : 6;
    clearInterval(me.interval);
    var dh = document.documentElement.scrollHeight || document.body.scrollHeight;
    var height = !!where ? dh : 0;
    me.interval = setInterval(function () {
        var top = document.documentElement.scrollTop || document.body.scrollTop;
        var speed = (height - top) / me.fx;
        if (speed === me.site[0]) {
            window.scrollTo(0, height);
            clearInterval(me.interval);
        }
        window.scrollBy(0, speed);
        me.site.unshift(speed);
    }, me.sleep);
}

goToWhere(0);  //顶部
goToWhere(1);  //底部

展开全文 >>

loading加载 

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
html:
<div class="loading">
<div class="loadingMain">
    <div class="load_progress_bar abs">
        <div class="bar_1 abs"></div>
        <div class="bar_2 abs"></div>
        <div class="load_clock abs animated infinite tada">
            <img src="images/clock.png" class="whImg" alt="">
        </div>
        <div class="loading_txt"></div>
    </div>
</div>
<div id="img_wrapper" style="display: none;" class="img_wrapper"></div>
</div>

css:
.loading{position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-color: #1b3486;z-index: 99;}
.loadingMain{width: 100%;height: 100%;}
.load_progress_bar{width: 65%;height: 1.1%;top: 40%;left: 0;right: 0;margin: 0 auto;}
.bar_1{background-color: #fff;width: 100%;height: 100%;left: 0;top: 0;border-radius: 5px;}
.bar_2{background-color: #d31145;width: 0;height: 100%;left: 0;top: 0;border-radius: 5px;}
.loading_txt{text-align: center;color: #fff;margin-top: 10%;font-weight: bold;font-size: 0.3rem;}
.load_clock{width: 15%;left: 0;right: 0;margin: 0 auto;margin-top: -30%;}

js:
var loadImgforFirstEntry = {
	wrapper: null, // 临时图片存放dom
	progress_bar: null, // 进度条dom
	rat: null, // 显示百分数的dom
	imgCount: 0, // 图片总数
	loadedCount: 0, // 已加载完成数
	init: function () {
	    this.wrapper = $('#img_wrapper')
	    this.progress_bar = $('.bar_2')
	    this.rat = $('.loading_txt')
	    this.bind()
	},
	bind:function(){
		this.getImg();
	},
	getImg: function(){
		var _this = this
		$('body *').each(function(i){
			var oThis = $(this),
				src = '',
				backgroundImage = oThis.css('backgroundImage').replace('url(', '').replace(')', '')
			if (oThis[0].tagName == 'IMG' && oThis.attr('src')) {
			    src = oThis.attr('src')
			} else if (backgroundImage != 'none') {
			    src = backgroundImage
			}
			if(!src){return true}
			_this.imgCount++
			_this.wrapper.append('<img src=' + src + ' onload="loadImgforFirstEntry.loaded(this)" onerror="loadImgforFirstEntry.error(this)" />')
			src = ''
		})
	},
	error: function (e) {
		this.loadedCount++
	    this.done()
	},
	loaded: function (el) {
		if($(el)[0].complete){
			this.loadedCount++
			this.done()
		}
	},
	done: function(){
		var _this = this,
			count = parseInt(_this.imgCount);
		if (_this.loadedCount >= count) {
			_this.loadEnd();
		} else {
            var percent = parseInt(100 * _this.loadedCount / count);
            _this.rat.html(percent + '%') // 数字
            _this.progress_bar.css('width', (percent) + '%') // 进度条
        }
	},
	loadEnd: function(){
		this.rat.html(100 + '%') // 数字
		this.progress_bar.css('width', '100%') // 进度条
		$(".container").css("opacity", 1);
		myContainer.update();
		this.wrapper.remove()
		$(".loading").hide();
	}
}

loadImgforFirstEntry.init();

加载JSON写法：

html:
<!--加载进度显示-->
<div class="loading">
	<div class="loadingMain">
		<img src="images/loading_logo.png" class="abs loading_logo" alt="">
		<img src="images/loading_img.gif" class="abs loading_img" alt="">
		<div class="load_progress_bar abs">
			<div class="bar_1 abs">
				<img src="images/loading_decor1.png" class="whImg" alt="">
			</div>
			<div class="bar_2 abs">
				<img src="images/loading_decor2.png" class="whImg" alt="">
			</div>
			<div class="loading_txt"></div>
		</div>
	</div>
</div>

css:
/* loading */
.loading{position: fixed;left: 0;top: 0;width: 100%;height: 100%;background: #0e52b4;background-size: cover;z-index: 99;display: none;}
.loadingMain{width: 100%;height: 100%;}
.loading_logo{width: 24%;left: 4%;top: 3%;}
.loading_img{width: 30%;top: 23%;left: 0;right: 0;margin: 0 auto;}
.load_progress_bar{width: 50%;height: 1%;top: 50%;left: 0;right: 0;margin: 0 auto;}
.bar_1{width: 100%;height: 100%;left: 0;top: 0;}
.bar_2{width: 0%;height: 100%;left: 0;top: 0;}
.loading_txt{text-align: center;color: #fff;margin-top: 8%;font-weight: bold;font-size: 0.3rem;}

js:
/* 加载loading */
$(function () {
    $(".loading").show();
    function loadRes(datas, index) {
        function loadSuccess() {
            var curLoading = Math.floor((index + 1) / datas.length * 100);
            $('.loading_txt').html(curLoading + '%');
            $('.bar_2').css({ 'width': curLoading + '%' });
            if (index < datas.length - 1) {
                loadRes(datas, (index + 1));
            } else if (index == datas.length - 1) {
                var hideLoad = setTimeout(function () {
                    loadImg();
                    $(".container").css("opacity", "1");
                    $(".loading").hide();
                    clearTimeout(hideLoad);
                }, 100);
            }
        }
        if (datas[index].type == 'image') {
            var image = new Image();
            image.src = cdnBaseUrl + datas[index].src;
            image.onload = function () {
                loadSuccess();
            }
            image.onerror = function () {
                alert('文件' + datas[index] + '加载失败');
            };
        }
    }
    $.ajax({
        type: 'GET',
        url: cdnBaseUrl + 'js/index.json',
        dataType: 'json',
        success: function (data) {
            var i = 0;
            loadRes(data['index'], i);
        }
    });
    function loadImg() {
        function loadRes1(datas, index) {
            function loadSuccess1() {
                if (index < datas.length - 1) {
                    loadRes1(datas, (index + 1));
                }
            }
            if (datas[index].type == 'image') {
                var image = new Image();
                image.src = cdnBaseUrl + datas[index].src;
                image.onload = function () {
                    loadSuccess1();
                }
                image.onerror = function () {
                    alert('文件' + datas[index] + '加载失败');
                };
            }
        }
        $.ajax({
            type: 'GET',
            url: cdnBaseUrl + 'js/img.json',
            dataType: 'json',
            success: function (data) {
                var i = 0;
                loadRes1(data['index'], i);
            }
        });
    }
});

展开全文 >>

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
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
81
82
83
84
85
86
1.引入coco3gNativeUser.js

let c3_navtive_user = {};
(function(owner) {
  owner.temp = {};
  //右上角按钮及事件
  owner.__defineSetter__("right_button_item", function(item) {
    this._right_button_item = item;
  });
  owner.__defineGetter__("right_button_item", function(item) {
    return this._right_button_item;
  });
  if (!owner.doActionSync) {
    owner.doActionSync = function() {
      alert("客户端尚未实现该方法");
    };
  }
  owner.doActionAnsy = function(action, param, callback) {
    var temp = owner.temp;
    if (!param) {
      param = {};
    }
    var callbackTag = "callback_" + new Date().getTime();
    temp[callbackTag] = callback;
    param.callbackTag = callbackTag;
    var path = "http://coco3g-app/" + action + "?";
    for (var p in param) {
      path += p + "=" + param[p] + "&";
    }
    window.location.href = path;
    return callbackTag;
  };
  owner.doActionJson = function(action, param, callback) {
    var temp = owner.temp;
    var callbackTag = "callback_" + new Date().getTime();
    temp[callbackTag] = callback;
    jsondata = {};
    jsondata.callback = callbackTag;
    jsondata.data = param;
    var path = "http://coco3g-app/" + action + "?" + JSON.stringify(jsondata);
    window.location.href = path;
    return callbackTag;
  };
  owner.doActionFunc = function(action, param, callback) {
    var temp = owner.temp;
    var callbackTag = "callback_" + new Date().getTime();
    temp[callbackTag] = callback;

    if (!param) {
      param = {};
    }
    if ("undefined" == typeof CocoObj) {
      window.webkit.messageHandlers.XJJsToOC.postMessage({
        protocol: action,
        data: param,
        callback: callbackTag
      });
    } else {
      var paramstring = JSON.stringify({
        protocol: action,
        data: param,
        callback: callbackTag
      });
      javascript: CocoObj.XJJsToOC(paramstring);
    }
  };
  owner.callback = function(callbackTag, result) {
    // console.log("result1", callbackTag)
    var callbackFun = owner.temp[callbackTag];
    // console.log("result2", result);
    if (callbackFun) {
      callbackFun(result);
    }
    // delete owner.temp[callbackTag];
  };
})(c3_navtive_user);

2.调用方法
var protocol = "personalSave";  //方法名
var parameter = {  //参数
    "page": 1,
}
c3_navtive_user.doActionFunc(protocol, parameter, function (data) { 
    var data = JSON.parse(data);
    console.log(data);
 });

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家