【分享】网址打包webapp最简完美demo

狂梦

本帖最后由狂梦于 2020-11-4 02:30 编辑

直接上核心代码，一个完整demo。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>webapp</title>
<style media="screen">
/*去掉状态栏默认留白边*/
body {
padding: 0;
margin: 0;
}
/*状态栏背景色*/
header {
background: linear-gradient(to right, #7dcaff 0%, #1a5194 100%);
}
/*为了让状态栏颜色能呈现出来，让他有高度，但内容不显示*/
header>span {
opacity: 0;
}
</style>
</head>
<body class="wrap">
<header>
<span>webapp</span>
</header>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
apiready = function() {
api.parseTapmode(); //让点击反应更快不延时
$api.fixStatusBar($api.dom('header')); //为传入的DOM元素增加适当的上内边距，避免header与状态栏重叠
api.setStatusBarStyle({ //设置状态栏字体颜色
style: 'light' // dark/light
});
$api.fixTabBar($api.dom('footer')); //适配iOS X底部横杠留出空间
api.setWinAttr({ //设置 window 属性
hideHomeIndicator: true //适配iOS X底部横杠不触摸时隐藏
});
api.openFrame({
name: 'web_frm',
url: 'http://**.**',
rect: {
x: 0,
y: $api.offset($api.dom('header')).h,
w: api.winWidth,
h: api.winHeight - $api.offset($api.dom('header')).h
},
bounces: false, //不可以弹动
pageParam: {}, //页面参数，在新页面通过 api.pageParam 获取
bgColor: '#666',
vScrollBarEnabled: true,
hScrollBarEnabled: true,
scaleEnabled: false, //页面是否可以缩放
allowEdit: true,
progress: {
type: "page"
},
});
};
</script>
</html>

复制代码

YonBIP社区

感谢分享

幻梦互联

谢谢分享

51kk

感谢分享。