mui开发混编app--01--底部选项卡制作教程
原生底部选项卡教程
1.创建app项目
打开hb–文件–新建–移动app–输入项目名字–勾选mui项目–点击完成即可
2.修改manifest.json文件
找到项目—选择manifest.json文件–按住ctrl+f检索plus–添加如下代码
"launchwebview": {//首页webview窗口
"bottom": "0px",
"background": "#fff",
"subNViews": [//subNViews节点下配置你的tab （此处只给出一个tab配置示例）
{
"id": "tabBar",
"styles": {
"bottom": "0px",
"left": "0",
"height": "50px",
"width": "100%",
"backgroundColor": "#fff"
},
"tags": [
{
"tag": "font",
"id": "indexIcon",
"text": "\ue611",
"position": {
"top": "4px",
"left": "0",
"width": "20%",
"height": "24px"
},
"textStyles": {
"fontSrc": "_www/fonts/iconfont.ttf",
"align": "center",
"size": "24px",
"color": "#bdbdbd"
}
}, {
"tag": "font",
"id": "indexText",
"text": "铺子",
"position": {
"top": "23px",
"left": "0",
"width": "20%",
"height": "24px",
"color": "#bdbdbd"
},
"textStyles": {
"align": "center",
"size": "10px"
}
}, {
"tag": "font",
"id": "typeIcon",
"text": "\ue61d",
"position": {
"top": "4px",
"left": "20%",
"width": "20%",
"height": "24px"
},
"textStyles": {
"fontSrc": "_www/fonts/iconfont.ttf",
"align": "center",
"size": "24px",
"color": "#bdbdbd"
}
}, {
"tag": "font",
"id": "typeText",
"text": "分类",
"position": {
"top": "23px",
"left": "20%",
"width": "20%",
"height": "24px",
"color": "#bdbdbd"
},
"textStyles": {
"align": "center",
"size": "10px"
}
}, {
"tag": "font",
"id": "topicIcon",
"text": "\ue60f",
"position": {
"top": "4px",
"left": "40%",
"width": "20%",
"height": "24px"
},
"textStyles": {
"fontSrc": "_www/fonts/iconfont.ttf",
"align": "center",
"size": "24px",
"color": "#bdbdbd"
}
}, {
"tag": "font",
"id": "topicText",
"text": "社区",
"position": {
"top": "23px",
"left": "40%",
"width": "20%",
"height": "24px",
"color": "#bdbdbd"
},
"textStyles": {
"align": "center",
"size": "10px"
}
}, {
"tag": "font",
"id": "pubIcon",
"text": "\ue610",
"position": {
"top": "4px",
"left": "60%",
"width": "20%",
"height": "24px"
},
"textStyles": {
"fontSrc": "_www/fonts/iconfont.ttf",
"align": "center",
"size": "24px",
"color": "#bdbdbd"
}
}, {
"tag": "font",
"id": "pubText",
"text": "发布",
"position": {
"top": "23px",
"left": "60%",
"width": "20%",
"height": "24px",
"color": "#bdbdbd"
},
"textStyles": {
"align": "center",
"size": "10px"
}
}, {
"tag": "font",
"id": "perIcon",
"text": "\ue60e",
"position": {
"top": "4px",
"left": "80%",
"width": "20%",
"height": "24px"
},
"textStyles": {
"fontSrc": "_www/fonts/iconfont.ttf",
"align": "center",
"size": "24px",
"color": "#bdbdbd"
}
}, {
"tag": "font",
"id": "perText",
"text": "个人",
"position": {
"top": "23px",
"left": "80%",
"width": "20%",
"height": "24px",
"color": "#bdbdbd"
},
"textStyles": {
"align": "center",
"size": "10px"
}
}
]
}
]
}强行解释一波，_www/fonts/iconfont.ttf文件是来自与alibaba矢量图标库。图标制作好以后css文件李会有相应的字体代码，如上图的\ue60e,但是字体文件没有u这个字母，加上即可。你们也可以换成mui自带的字体样式。
关于这么配置的原因，请参考这篇文章
连上手机，建议安卓。苹果的话，在windows，你还需要下载ituns。点击运行。选择你的手机运行（手机打开开发者模式）
你会看见图标已经加载上去了，如下
接下来，我们要做的就是这几个事情。
- 默认第一个图标被选上，并首页显示
- 为分类，社区，发布，个人这几个模块添加页面，即首页加入这四个模块的子页面，并默认隐藏
- 点击相应图标，图标激活，页面激活，其他图标恢复，页面如果不是首页则隐藏
4. 默认第一个图标被选上，并首页显示
我们现在首页的body上写点东西吧
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>title>
<link href="css/mui.min.css" rel="stylesheet"/>
head>
<body>
<div class="mui-content">
我是首页
<p>我是首页的p标签p>
<span>我是首页的span标签span>
div>
<script src="js/mui.min.js">script>
<script type="text/javascript" charset="utf-8">
mui.init();
script>
body>
html>接着想一想我们怎么才能实现选项卡的第一个图标的显示呢，大概有以下几个步骤
- 获取选项卡
- 给选项卡的第一个区域内的所有文字改变颜色。由于使用的字体文件，图标也是字体
先做第一个，获取选项卡
var nview=plus.nativeObj.View.getViewById("tabBar")里面的id字符串为第一步配置文件的名字，该方法依然参考这篇文章
接着我们将第一个图标跟字体颜色换了
// 获取图标
var indexTag=plus.webview.currentWebview().getStyle().subNViews[0].tags[0]
// 获取字体
var indexText=plus.webview.currentWebview().getStyle().subNViews[0].tags[1]
// 设置图标与字体的颜色
indexTag.textStyles.color = "#ff366c"
indexText.textStyles.color = "#ff366c"
// 重新绘制新的样式
nview.drawText(indexTag.text, indexTag.position, indexTag.textStyles, indexTag.id);
nview.drawText(indexText.text, indexText.position, indexText.textStyles, indexText.id);好了，大功告成。图标渲染完成了。
接下来，我们为所有的图标绑定点击事件，在点击相应图标的时候图标颜色激活其他的取消激活，同时，页面进行相应的切换。因此大概分为一下几个步骤：
1.在项目下建立type.html,topic.html,add.html及person.html
2.在主页中添加这4个页面作为子页面，并隐藏起来
3.为底部图标绑定点击事件，点击第一个图标，所有子页面隐藏起来，点击第二个，分类页面显示，第二个图标激活。其余图标不激活。后面三个同上。
代码如下:
//子页面数组
var subpages = ["views/type.html", "views/topic.html", "views/add.html", "views/person.html"];
//循环添加子页面并隐藏
var subpage_style = {
top: 0,
bottom: 51
}
//兼容安卓上添加titleNView 和 设置沉浸式模式会遮盖子webview内容
if(mui.os.android) {
if(plus.navigator.isImmersedStatusbar()) {
subpage_style.top += plus.navigator.getStatusbarHeight();
}
if(self.getTitleNView()) {
subpage_style.top += 40;
}
}
for(var i = 0, len = subpages.length; i < len; i++) {
if(!plus.webview.getWebviewById(subpages[i])) {
var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
//初始化隐藏
sub.hide();
// append到当前父webview
self.append(sub);
}
}
// 绑定事件
var currIndex =0;// 中间变量(用于标记第几个图标被点击了)
var targetPage = plus.webview.currentWebview();// 中间变量,用于标记想要跳转的页面
var activePage = plus.webview.currentWebview();// 中间变量，用于标记当前激活的页面
nview.addEventListener('click', function(e) {
var clientX = e.clientX;
if(clientX > 0 && clientX <= parseInt(pageW * 0.2)) {
currIndex = 0;
} else if(clientX > parseInt(pageW * 0.2) && clientX <= parseInt(pageW * 0.4)) {
currIndex = 1;
} else if(clientX > parseInt(pageW * 0.4) && clientX <= parseInt(pageW * 0.6)) {
currIndex = 2;
} else if(clientX > parseInt(pageW * 0.6) && clientX <= parseInt(pageW * 0.8)) {
currIndex = 3;
} else {
currIndex = 4;
}
if(currIndex > 0) {
targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
} else {
targetPage = plus.webview.currentWebview();
}
if(targetPage == activePage) {
return;
}
//底部选项卡切换
toggleNview(currIndex);
// 子页面切换
changeSubpage(targetPage, activePage, aniShow);
//更新当前活跃的页面
activePage = targetPage;
});
var ACTIVE_COLOR = "#ff366c"; // 激活图标颜色
var NORMAL_COLOR = "#bdbdbd" // 默认图标颜色
// 点击发生图标的重绘
function toggleNview(currIndex) {
currIndex = currIndex * 2;
// 重绘当前tag 包括icon和text，所以执行两个重绘操作
updateSubNView(currIndex, ACTIVE_COLOR);
updateSubNView(currIndex + 1, ACTIVE_COLOR);
for(var i = 0; i < 10; i++) {
if(i !== currIndex && i !== currIndex + 1) {
updateSubNView(i, NORMAL_COLOR);
}
}
}
// 点击子页面发生变化
function updateSubNView(currIndex, color) {
var self = plus.webview.currentWebview();
var nviewEvent = plus.nativeObj.View.getViewById("tabBar");
var nviewObj = self.getStyle().subNViews[0];
var currTag = nviewObj.tags[currIndex];
nviewEvent.drawText(currTag.text, currTag.position, changeColor(currTag.textStyles, color), currTag.id);
}好了，这个样子基本上基础的架构就完成了就大功告成了
下一篇将会更新前端图片处理的问题