屏蔽元素类型
在wap2app项目中，M站需要根据运行环境，判断当前是5+引擎时，做一些调整。
Tips： wap2app项目不管是打包成ipa/apk，还是发布成流应用，都依赖HTML5 PLUS引擎，简称5+引擎。
M站需调整的元素，主要包括几个方面：
1、客户端已有增强实现，屏蔽M站原有元素
比如顶部标题栏，wap2app已启用了原生标题栏，M站就无需再显示DIV的标题栏，否则会出现双标题栏的情况。
2、屏蔽明显wap化的DOM元素
比如：ICP备案、PC/mobile切换等
3、屏蔽原生下载信息
wap2app发布成原生apk/ipa或流应用，在手机用户眼里就是App，在App中出现App的下载链接是不科学的。同时流应用中默认也不支持下载apk或跳转到Appstore。
屏蔽方案
在5+引擎下，屏蔽M站元素的方案大致有两种：
- 服务端直接不生成对应DOM节点
- 服务端通过css隐藏对应DOM节点
服务端不生成对应DOM节点
如果M站的DOM是服务端渲染的，则可以在判断是5+引擎的环境下，不输出HTML的dom结构，这样即可减少网络传输的html大小，还可以避免wap化的展现形式。
Tips： 判断5+引擎的依据：navigator.userAgent含有“Html5Plus”字符串
如下为一段php示例代码，仅在非5+引擎环境下，才生成web导航栏
<?php
$agent = $_SERVER['HTTP_USER_AGENT'];
if(strpos($agent,"Html5Plus") === false){//仅在非5+引擎环境下才显示导航栏
?>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">web导航栏</h1>
</header>
<?php
}
?>服务端隐藏DOM节点
这里以原生下载引导为例，如果原生下载banner是客户端渲染的，则可以通过JS动态隐藏下载banner，如下为示例代码：
if(navigator.userAgent.indexOf("Html5Plus") > -1){
downloadEl.style.display = "none";//隐藏下载banner
}还有一种更为通用的方式：
- 探测当前为5+引擎，则在body节点上增加一个"html5plus"的class
- 将所有需要在5+引擎环境下隐藏的元素，均增加"html5plus-hide"的class
如下为示例代码，5+引擎环境下body节点上增加一个“ html5plus”的class
if(navigator.userAgent.indexOf("Html5Plus") > -1 ){
document.body.classList.add("html5plus");
}在通用css中增加增加一段代码：
.html5plus .html5plus-hide{
display:none
}这样，所有需要在5+引擎下需隐藏的元素，均在class中增加"html5plus-hide"，既不影响普通浏览器环境的显示，在5+引擎环境下也会自动隐藏。如下是一个简单的HTML示例代码，将js、css全部放在HTML页面中了，真实项目时，迁移到通用的js、css文件即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/*5+ 引擎环境下自动隐藏无关元素*/
.html5plus .html5plus-hide {
display: none
}
</style>
</head>
<body>
<script>
if(navigator.userAgent.indexOf("Html5Plus") > -1) {
document.body.classList.add("html5plus");
}
</script>
<!--页面标题，class增加html5plus-hide类-->
<header class="mui-bar mui-bar-nav html5plus-hide">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">web导航栏</h1>
</header>
<!--页面主题内容-->
<div class="mui-content"></div>
<!--下载引导，class增加html5plus-hide类-->
<footer class="mui-bar mui-bar-nav download html5plus-hide">
<div class="logo"><img src="" /></div>
<div class="text">即点即用、流式发行</div>
<div class="btn">点击下载</div>
</footer>
</body>
</html>Tips:有些M站可以通过url加一个参数实现不显示原生下载，此时推荐使用这种url
FAQ
Q：如何移除原生导航栏
A：http://ask.dcloud.net.cn/question/50018
17 个评论
要回复文章请先登录或注册
f***@163.com
李福龙
格创网络
逗逗水
DCloud_UNI_CHB (作者)
1***@qq.com
Trust
我吃柠檬
小灬绿谷
mengxin