移动端webview模板

javascript
  目录
  1. 1. 移动端webview模板
    1. 1.1. css
    2. 1.2. js来控制rem大小代码
    3. 1.3. html页面内容

移动端的页面平时偶尔会有需求需要做，特别是webview嵌入的页面居多，由于是有时候做，有时候不做，所以，需求来的时候从新写页面还是有点麻烦，所以把之前写的记录一下，下次直接copy就好了。

移动端webview模板

css

一些css初始化的内容

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
@charset "utf-8";
/* CSS Document */
body,ul,ol,p,h1,h2,h3,h4,h5,dl,dd,form,input,textarea,
td,th,button,strong,em,select,video,canvas{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{ font-weight:normal;}
li{list-style:none;vertical-align:top;}
table{ border-collapse:collapse;}
textarea{resize:none;overflow:auto;}
img{ border:none; vertical-align:middle; width:100%;}
em,i{ font-style:normal;}
a{ text-decoration:none;}
a,input{
    -webkit-appearance: none;/*屏蔽阴影*/
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    /*ios android去除自带阴影的样式*/
}
a, img {
    /* 禁止长按链接与图片弹出菜单 */
    -webkit-touch-callout: none;
}
html, body {
    /* 禁止选中文本(如无文本选中需求,此为必选项) */
    -webkit-user-select: none;  
    user-select: none;
	 background:#f5f5f5;
	 overflow-x:hidden;
}

js来控制rem大小代码

js来修改html的font-size大小

1
2
3
4
5
6
7
8
9
10
11
12
(function (doc, win) {
	var docEl = doc.documentElement,
	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	recalc = function () {
	  var clientWidth = docEl.clientWidth;
	  if (!clientWidth) return;
	  docEl.style.fontSize = clientWidth/20 + 'px';
	};
	if (!doc.addEventListener) return;
	win.addEventListener(resizeEvt, recalc, false);
	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

html页面内容

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta content="email=no" name="format-detection" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="../js/jquery.min.js"></script>
<script src="../js/config.js"></script>
</head>
<body>
    <div class="content">

    </div>
</body>
<script>
    // 判断ios android
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    
    var goodsId = window.location.search.split('=')[1] 
    var reqUrl = BASEURL +'/goods/shopProduct/findSpuDescsBySpuId/' + goodsId;
    $.ajax({
        method: 'POST',
        url: reqUrl,
        headers: {
              'client-token': 'eyJhbGciOiJIUzUxMiJ9.eyJ1aWQiOiIxMjMiLCJjZXJ0Tm8iOiI0NTYifQ.xTR4SG0z3Nuf-siW34XtVgqNPr9PRpPb8XFKY6Hrj_Qg8kl9C0AeVFcQ8NnguQ-SrlHHcv5M16SkjVYX3PKweg'
        },
        data: {goodsId: goodsId},
        dataType: 'json',
        success: function(res){
            if(res.code === '0000') {
                var innerContent = res.data;
                var bodyContent = $.parseHTML(innerContent);
                $('.content').append(bodyContent);
                if(isiOS) {
                    var imgNum = $('img').size(), loadCount=0;
                    $('img').on('load', function(ev) {
                        loadCount++;
                        if(loadCount === imgNum){
                            // 获取到页面高度返给ios端
                            var bodyHeight = $('body').height() + 25;
                            // 调取ios注入的方法
                            window.webkit.messageHandlers.jsCallNative.postMessage({height: bodyHeight});
                        }
                    });
                    
                }
            }
        },
        error: function() {},
    });
</script>
</html>

这个webview页面相对麻烦些，需求是在ios页面的固定位置显示webview内容，并不是新开一个新页面来整个显示webview内容，这样ios需要获取h5页面的高，而页面的内容又是h5页面通过ajax获取回来的，所以，ajax请求成功后，将内容插入到页面中，如果有图片的话，等待图片全部加载之后再计算页面的高，返给ios。这时，ios提供了一个函数注入到h5页面里了，我们直接调用就可以，代码中就是这个函数window.webkit.messageHandlers.jsCallNative.postMessage();

  • 补充点这方面的知识2019/2/2
    1
    2
    3
    4
    5
    6
    7
    8
    9
    if(isiOS) { // 如果是ios的话
    	window.webkit.messageHandlers.iosCallback.postMessage(null); // 我告诉ios端可以调我提供的callAppFnInfo函数，它会把值给我传过来。
    	function callAppFnInfo(info) {
            alert(info);
        }
    }else { // android环境
    	var da = window.WebViewInterface.getId(); // 直接调取android提供的方法，它可以直接返回值
    	alert(da);
    }
  基础知识