一、添加原生标题栏

添加原生标题栏可以参照 《wap2app(六)-- wap2app的原生标题头无法隐藏》,具体如下:

1.打开 sitemap.json文件 --> page配置下的"webviewId"为“common”的整个内容配置删除或注释,这时候会页面的原生标题就会出现,是带原生标题、网页标题的双标题页面。

效果:

2.原生标题默认灰色背景,黑色字体,需要根据业务需求进行修改标题样式:

sitemap.json文件 --> global-->webviewParameter 下将 titleNView:false改为如下代码修改全局标题样式:

"titleNView": {//启用原生导航条
"backgroundColor": "#fff",//导航栏背景色
"titleColor": "#333"//标题颜色为黑色
},

global代码:

"global": {
"webviewParameter": {
"titleNView": {//启用原生导航条
"backgroundColor": "#fff",//导航栏背景色
"titleColor": "#333"//标题颜色
},
"statusbar": {
//系统状态栏样式(前景色)
"style": "dark"
},
"appendCss": "",
"appendJs": ""
},
"easyConfig": {
"quit": {
"toast": {
"showFeedback": false //不显示“反馈意见”链接,默认为true
}
},
"open":{
"animation":{//窗口切换动画配置
"type":"none"//窗口动画类型
},
"waiting":true // 禁用waiting,打开page1页面时,不显示waiting等待框
}
}
},

效果上图,但原生标题是白色背景,黑色字体。

3.由于网页本身是有标题的,还需要在网站中对app的网页标题进行隐藏处理,只显示app的原生标题,具体根据网站的业务逻辑处理,

if(navigator.userAgent.indexOf("Html5Plus") > -1){
$("header").css('cssText','display:none !important');
}

效果如下,对于app中的页面只有原生标题:

另外,global是对全局页面的标题进行样式设置,如果有页面需要单独设置的,可以在page下进行单独配置,例如配置如下页面:

{
"webviewId":"myIndex",
"matchUrls":[
{
"href":"http://10.10.10.145/hdsj/trunk/user/feedback"
}
],
"webviewParameter": {
"titleNView": {//首页启用原生导航条
"backgroundColor": "#3478f6",//导航栏背景色
"titleColor": "#fff",//标题颜色为白色
"titleText":"我的页面"
},
"statusbar": {
//系统状态栏样式(前景色)
"style": "dark"
},
"appendCss": "",
"appendJs": ""
}
}

修改了标题背景色和字体颜色,效果如下:

二、添加原生底部导航

1.在client_index.html文件中,将如下两行代码的注释取消:

<!--使用本地选项卡时,将如下两行代码注释取消-->
<link rel="stylesheet" type="text/css" href="__wap2apptabbar.css" />
<script src="__wap2apptabbar.js" type="text/javascript" charset="utf-8"></script>

并在当前文件配置选项卡的内容、图标、选中图标:

var global_url = "xxxx.com";
new TabBar({
list: [{
url: global_url,
text: "首页",
iconPath: 'image/bottom/huodong1.png',
selectedIconPath: 'image/bottom/huodong2.png'
}, {
url: global_url + "card/",
text: "集市",
iconPath: 'image/bottom/shiji1.png',
selectedIconPath: 'image/bottom/shiji2.png'
}, {
url: global_url + "user/edit_shop",
text: "名片",
iconPath: 'image/bottom/mingpian1.png',
selectedIconPath: 'image/bottom/mingpian2.png'
}, {
url: global_url + "user",
text: "我的",
iconPath: 'image/bottom/wode1.png',
selectedIconPath: 'image/bottom/wode2.png'
}]
});

默认选项卡选中字体的颜色是红色的,还需要修改样式成需要的颜色:

client_index.html 添加样式:

.tab-item {
color: #969696;
}
.tab-item.active {
color: #3478f6;
}

2.还需要在sitemap.json文件中再配置一下。在首页配置下,添加选项卡的配置:

在sitemap.json -->pages-->webviewParameter 添加配置代码(根据项目业务,添加相关内容)

"tabBar": {//选项卡配置,仅首页支持
"height": "50px",//选项卡高度,默认为50px
"list": [
{
"url": "http://x.x.x.x/index/" //tab1页面地址
}, {
"url": "http://x.x.x.x/index/find" //tab2页面地址
}, {
"url": "http://x.x.x.x/index/cart/" //tab3页面地址
}, {
"url": "http://x.x.x.x/index/user" //tab3页面地址
}
]
}

整个pages的完整配置代码:

"pages": [
{
"webviewId": "__W2A__android.xxx.com",//首页
"matchUrls": [
{
"href": "http://x.x.x.x/index/"
}, {
"href": "http://x.x.x.x/index"
}
],
"webviewParameter": {
"titleNView": false,
"statusbar": {
//状态条背景色,
//首页不使用原生导航条,颜色值建议和global->webviewParameter->titleNView->backgroundColor颜色值保持一致
//若首页启用了原生导航条,则建议将首页的statusbar配置为false,这样状态条可以和原生导航条背景色保持一致;
"background": "#f7f7f7"
},
"tabBar": {//选项卡配置,仅首页支持
"height": "50px",//选项卡高度,默认为50px
"list": [
{
"url": "http://x.x.x.x/index/" //tab1页面地址
}, {
"url": "http://x.x.x.x/index/find" //tab2页面地址
}, {
"url": "http://x.x.x.x/index/cart/" //tab3页面地址
}, {
"url": "http://x.x.x.x/index/user" //tab3页面地址
}
]
} }
}
]

运行之后效果如下:

三、填坑

以上,添加原生头部和原生底部选项卡,本地运行调试都是正常,但是打包之后,下载安装,首次进入(从引导页点击“立即体验”进入项目)时不显示原生头部和原生底部,

引导页点击“点击立即体验”的代码如下:

document.getElementById("start").addEventListener("tap", function() {
/**
* 向本地存储中设置launchFlag的值,即启动标识;
* http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.setItem
*/
plus.storage.setItem("launchFlag", "true");
mui.openWindow({
url: "http://x.x.x.x/index",
id: "main",
extras: {
mark: "gudie" //同样,这里也只是个标识,实际开发中并不用;
}
});
});

会发现这里使用mui.openWindow重新打开了首页,这里的首页没有做底部/头部的配置,如果在点击“立即体验”时只关闭引导页的页面而不是重新跳转,即可避免这个问题,解决代码如下:

document.getElementById("start").addEventListener("tap", function() {
/**
* 向本地存储中设置launchFlag的值,即启动标识;
* http://www.html5plus.org/doc/zh_cn/storage.html#plus.storage.setItem
*/
plus.storage.setItem("launchFlag", "true");
plus.webview.currentWebview().close();
});

其中,

plus.webview.currentWebview().close();

关闭当前引导页。

添加底部原生选项卡可参考官方地址:http://ask.dcloud.net.cn/article/12878

转载时请注明出处及相应链接,本文永久地址:https://www.cnblogs.com/wangxiaoling/p/10072292.html,文章标题备注转载,如:xxx【转载】,谢谢!

wap2app(十)--wap2app 添加原生底部导航,添加原生标题栏,填坑的更多相关文章

  1. wap2app(八)-- iphoneX 底部导航的兼容问题

    iphoneX 没有home键,用其打开应用时,iphoneX的底部和应用底部导航重叠,不兼容. 解决办法: 打开manifest.json文件,在“plus”下加入以下代码(安全区域): " ...

  2. 添加底部导航栏tabbar

    效果图: 如果要添加底部导航栏,最少2个,最多5个. app.json { "pages": [ "pages/index/index", "page ...

  3. ionic3 动态设置tabs页面底部导航栏隐藏,并显示输入框添加评论

    1.先上原始效果图:                                        2.完成后效果                                2.实现思路: ion ...

  4. 【前端】Vue2全家桶案例《看漫画》之一、添加四个导航页

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/vue_vux_app_1.html 项目github地址:https://github.com/shamoyuu/ ...

  5. 《PHP制作个人博客》之四:分类添加及前端导航数据用php动态调取

    大家好,今天我们接着上一节的全栈营销个人博客制作,上一节我们把博客的模板给加载运行起来.今天我们主要讲解后台模板分类的添加,后台导航的添加,及前台导航的动态调用.一个好的博客,导航很重要,导航就像你网 ...

  6. sencha touch 自定义cardpanel控件 模仿改进NavigationView 灵活添加按钮组,导航栏,自由隐藏返回按钮(废弃 仅参考)

    最新版本我将会放在:http://www.cnblogs.com/mlzs/p/3382229.html这里的示例里面,这里不会再做更新 代码: /* *模仿且改进NavigationView *返回 ...

  7. WordPress 添加面包屑导航

    所谓面包屑,就是类似这种:首页 > 公司简介 > 发展历史 展示网站树型结构,并让网站访问者随时知道自己所处的位置,方便返回上几级. 将下面的代码添加到主题的 functions.php ...

  8. 第27讲 UI组件之 ScrollView与底部动态添加数据

    第27讲 UI组件之 ScrollView与底部动态添加数据 1. ScrollView(滚动视图) ScrollView(滚动视图)是实现滚动的一个控件,只需要将需要滚动的控件添加到ScrollVi ...

  9. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

随机推荐

  1. 访问iis出现500.21错误

    上图是错误的界面 刚开始接手了一个项目,然后想发布到iis上访问使用效果,结果出现了上面的问题,最开始以为是  .net Framework版本的问题,每个版本都试过了,结果问题并没有完全解决. 下面 ...

  2. DDD实战进阶第一波(十三):开发一般业务的大健康行业直销系统(订单上下文领域逻辑)

    前一篇文章主要讲了订单上下文的POCO模型,其中订单与订单项中有大量的值对象.这篇文章主要讲讲这些值对象以及订单项.订单相关的领域逻辑. 1.ProductSKUs值对象领域逻辑:ProductSKU ...

  3. mysql 开发进阶篇系列 18 MySQL Server(innodb_buffer_pool_size)

    从这篇开始,讲innodb存储引擎中,对于几个重要的服务器参数配置.这些参数以innodb_xx 开头. 1. innodb_buffer_pool_size的设置 这个参数定义了innodb存储引擎 ...

  4. k8s~术语解释

    文章参考:https://www.kubernetes.org.cn 简介 Kubernetes是一个开源的,用于管理云平台中多个主机上的容器化的应用,Kubernetes的目标是让部署容器化的应用简 ...

  5. 在 Windows 上可以用 Docker 吗?

    作者:陈计节 个人博客:https://blog.jijiechen.com/post/docker-on-windows/ Docker,或者准确一点说,容器技术,在近几年里几乎成为了应用分发和集群 ...

  6. 流式大数据计算实践(1)----Hadoop单机模式

    一.前言 1.从今天开始进行流式大数据计算的实践之路,需要完成一个车辆实时热力图 2.技术选型:HBase作为数据仓库,Storm作为流式计算框架,ECharts作为热力图的展示 3.计划使用两台虚拟 ...

  7. jdk 8 的内存参数修改

    jdk内存实际是jvm内存,jvm有一个运行时数据区,其实就是对这一部分的大小分配.运行时数据区通常包括这几个部分:程序计数器(Program Counter Register).Java栈(VM S ...

  8. 03_SQL server数据类型

    SQL server数据类型 String类型: 数据类型: 描述 存储 char(n) 固定长度的字符串.最多 8,000 个字符.定义类型为char(5),那么就表示该类型可以存储5个字符,即使存 ...

  9. Python中的序列操作

    官方手册:https://docs.python.org/3.7/library/stdtypes.html#sequence-types-list-tuple-range 序列简介 序列是指按照位置 ...

  10. javascript 小实例,求和的方法sumFn

    新年第一记,从这里开始,先来个简单的!去年的知识梳理留下了很多尾巴,原因有很多(知识储量不足,懒了,项目多...) lg:都是借口~   好吧,我承认,这都是借口,今年一定把尾巴清干净! 下面要写的是 ...