移动端H5嵌入到APP的学习

H5嵌入到APP，不仅在ios和安卓上有兼容性，在ios上因为版本也会有兼容性，因此遇到了不少坑；功能点也比较多，借助了插件来实现

使用Page Visibility 监听页面是否处于激活(可见)状态

应用在当某个页面处于激活状态时，执行一些操作，或者是数据需要更新，重新请求接口

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
#  当页面处于激活时刷新页面
Listener(){
	var hidden = "hidden";
	var that = this;
	# 各个浏览器属性兼容
	if (hidden in document)
		document.addEventListener("visibilitychange", onchange);
	else if ((hidden = "mozHidden") in document)
		document.addEventListener("mozvisibilitychange", onchange);
	else if ((hidden = "webkitHidden") in document)
		document.addEventListener("webkitvisibilitychange", onchange);
	else if ((hidden = "msHidden") in document)
		document.addEventListener("msvisibilitychange", onchange);

	else if ("onfocusin" in document)
		document.onfocusin = document.onfocusout = onchange;

	else
		window.onpageshow = window.onpagehide = window.onfocus = window.onblur = onchange;

	# 主要功能代码
	# 网页状态改变事件
	function onchange(evt) {
		if(document[hidden]){
			document.title = "普洱茶";
		}else{
			document.title = "普洱茶";
			that.getCart();
			that.loadAjax(1);
			that.indexmode();
		}
	}

	if (document[hidden] !== undefined)
		onchange({
			type: document[hidden] ? "blur" : "focus"
		});
},

vue使用echarts

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
# 使用npm安装vue  在项目目录下执行
npm install vue
# 引入
import ECharts from 'echarts';
Vue.prototype.$echarts = ECharts;

# 基于准备好的dom元素，在初始化echarts时不同
# 这里获取元素使用的document.getElementById('')  ,如果换成jquery获取会报错
var warehousingChart = that.$echarts.init(document.getElementById('warehousingChart'));
# 其他用法是一致的
var option_warehousing = {
	#  图表到div容器上下左右留白
	grid: {
		x: 0,
		y: 20,
		x2: 0,
		y2: 50,
	},
	xAxis: {
		type: 'category',
		data: [1, 2, 3, 4, 5, 6, 7, 8],
		nameTextStyle: {
			# 名称的样式
			color: '#a6b3b8',
			fontSize: '12px'
		},
		axisLine: {
			show: false
		},
		axisTick: {
			show: false
		},
		axisLabel: { 
			# 坐标轴刻度标签，刻度标签与轴线之间的距离
			margin: 10, 
		},
	},
	yAxis: {
		type: 'value',
		axisLine: {
			show: false
		},
		axisTick: {
			show: false
		},
		axisLabel: {
			show: false
		},
		splitLine: {
			show: true,
			lineStyle: {
				color: '#f5f5f5'
			}
		}
	},
	series: [{
		data: [200, 400, 401, 534, 290, 330, 320, 600],
		type: 'line',
		# 折线条的颜色
		color: ['#33b5d0'],  
		smooth: true,
		# 折线拐点的样式
		itemStyle: {  
			normal: {
				# 折线拐点的颜色
				color: '#33b5d0',  
			}
		},
		# 线条的样式
		lineStyle: {  
			normal: {
				# 折线颜色
				color: '#33b5d0',  
			}
		},
		// markPoint: {
		// 	data: [{
		// 			type: 'max',
		// 			name: '最大值'
		// 		}
		// 	]
		// },
		# 区域填充样式
		areaStyle: { 
			normal: {
				# 线性渐变
				color: that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
					# 0% 处的颜色
					offset: 0, color: 'red' 
				}, {
					# 100% 处的颜色
					offset: 1, color: 'blue' 
				}])
			}
		},
	}]
};
#  使用刚指定的配置项和数据显示图表。
warehousingChart.setOption(option_warehousing);

使用PinchZoom实现swiper轮播图片的两指缩放

可以参考 http://manuelstofer.github.io/pinchzoom/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# PinchZoom 可能依赖固定的jQuery版本  所以使用js引入
<script src="http://mat1.gtimg.com/city/youpin/yn/hyBase.js"></script>
<script src="http://www.ihuyue.cn/2018Yeartest/test/zoom.js"></script>
# 引入swiper
var Swiper = require('swiper/dist/js/swiper.min.js');

# 定义轮播图的固定页
var index = index || 0;
window.swiper = new Swiper('.swiper-container-quality', {
	autoplay: false,
	loop: false,
	pagination: '.swiper-pagination-quality',
	# 点击展示轮播图的某一张
	initialSlide: index      
});
$(function () {
	# 使用  html在img元素外包一层.zoom-container
	$('.quality-detail-box .zoom-container').each(function () {
		new RTP.PinchZoom($(this), {});
	});
	setTimeout(function () {
		$('.pinch-zoom-container').height('100%');
	}, 0)
});

下拉刷新，展示json文件的动画

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
#  加载动画  使用BodyMovin实现json动画
#  遇到的问题，path如果写的是本地的相对路径，会报错，将json文件上传到cdn，再使用就可以了，也要注意跨域问题
animationFun(id) {
	var that = this;
	loadingAanimation = BodyMovin.loadAnimation({
		container: document.getElementById(id),  //Required
		path: 'http://mat1.gtimg.com/city/youpin/yn/loading_gray.json',
		renderer: 'svg', // Required 这个一般都是svg 
		loop: true, // Optional参数是否循环加载动画 
		autoplay: false, // Optional 是否自动播放动画
		name: "Hello World", // Name for future reference. Optional.
	})
},
#  显示json动画的回掉函数
showLoadingAnimate() {
	var that = this;
	if (!that.isIos()) {
		loadingAanimation.play();
	}
},
#  隐藏json动画的回掉函数
	hideLoadingAnimate() {
	var that = this;
	loadingAanimation.stop();
},

# 下拉刷新
touchStart(e) {
	var that = this;
	that.isTouchIng = true;
	that.showLoadingAnimate();
	that._startPos = e.touches[0].pageY;
	that._transitionHeight = 0;
},
touchMove(e) {
	var that = this;
	that._transitionHeight = e.touches[0].pageY - that._startPos;
	if (that._transitionHeight > 0 && that._transitionHeight <= that.targetNum && $(window).scrollTop() <= 0) {
		$('.l-refresh').height(that._transitionHeight + 'px');
		if (that.shufflingList.length > 1) {
		bannerSwiper.stopAutoplay();
		}
		that.flag = true;
	} else if (that._transitionHeight > that.targetNum && $(window).scrollTop() <= 0) {
		$('.l-refresh').height(that.targetNum + 'px');
	}
},
touchEnd(e) {
	var that = this;
	that.isTouchIng = false;
	$('.l-refresh').animate({ 'height': '0' }, '1000');
	if (that.flag) {
		if(!that.isTouchEnd){
			that.isTouchEnd = true;
			setTimeout(() => {
				that.isTouchEnd = false;
			}, 1000);
			if (Math.abs(that._transitionHeight) > 20) {
				that.loadAjax(1);
			}
		}
	}
},
# html
<div class="vue-wrap l-pull" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">
# 遇到的bug
最开始想到的办法是在下拉的元素上使用   transform:translateY(x)  然后让动画展示出来 在安卓上是很好实现，没有问题的，但是在ios上问题就比较多，比较严重的是下拉时会出现双重页面，以为是transform的浏览器兼容性，然后就把解决浏览器兼容性的前缀加上，依然没有解决，代码也改了几遍，最后才尝试不用transform，改用别的方法，让动画元素高度增加，这样就没有重页面了

小知识

  • 一个项目中全局同时使用zepto 和 jquery 会冲，事件 tap 跟 click 、touchstart可能都会有问题 如果是移动端使用zepto尽量是tap事件
  • 引入的轮播图swiper插件，与首页的下拉刷新冲突，当下拉的时候该轮播图数据会刷新，这时候轮播图的播放就会乱，要重置轮播图，在刷新的时候可以将该轮播图数据置空，数据请求成功后在初始化轮播图
  • 在安卓手机上设置line-height可能不会居中，解决：使用js判断是ios还是安卓，分别写样式
  • vue渲染的数据，如果用jq操作dom，可能触发事件的时候找不到改元素，这时候元素可能还没渲染成功，需要在接口请求成功后再执行对应渲染数据的方法，可以将方法放在setTimeOut里执行
  • input调起数字键盘 < input type=”number” pattern=”\d*”> 安卓手机可以切换 ：android 数字键盘本就带这些按钮，js是不能控制键盘上显示什么内容的，只能通过正则表达式或自己的方法来实现输入的内容
  • 让textarea文本域的高度根据内容自适应：写一个div，让该div的样式跟文本域的一样，然后实时的把textarea的内容赋值给div，获取div的高赋值给textarea，div需要隐藏在textarea下面
  • Html页面纯数字或者纯字母不能换行的解决办法：在HTML中标签中的数字和字母默认是不换行的，如果要将他们换行，需要设置CSS属性： word-break:break-all;word-wrap:break-word;
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

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