今天是很丧的一天，做什么都提不起兴趣，不知道何时才能做到道家的“无为，而无所不为”，也无法理解范仲淹的“不以物喜不以己悲”。可是再没兴趣，学习还是要继续！！！为了让自己放松，去趟博物馆，不但没有起到放松心情的作用，反而累得自己腰酸背疼。苦逼的几天，害，接下来还是干正事！

https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
如有转载，请注明出处（如不注明，盗者必究）

一、前提

打开我们的HBuilder

回顾一下我们前面的知识，详细点击这里

为了借助MUI框架，我们需要建一个模板文件哈哈哈

在这里插入图片描述

二、模板文件的创建

新建一个移动App
在这里插入图片描述
自己命名，这里选择Hello mui项目

这样模板就建好了，先放这里

三、实现底部选项卡的功能

在hello.mui模板（新建mui项目：例如我这里是MUI_model）中找到examples文件夹下的tab-webview-main.html ，并且复制到自己的项目中（比如我自己的项目为one），改名为main（也可以改名为其他的哈哈哈）

在这里插入图片描述

3.1打开main代码

去掉../
因为这里的项目不用跳出上一级文件夹
在这里插入图片描述

看到这里，我们可以看到这些href的链接，要链接到底部选项卡的页面，接下来我们可以创建页面了。
在这里插入图片描述

3.2创建底部选项卡页面

新建index(原来有的可以不用新建) prolist car my

以index.html为栗子
虽然步骤很简单，但是还是要剪出来，新建html文件
在这里插入图片描述
切记这里点击含mui的html文件，后面几个新建一样的，类似的操作就好啦！

文件建好以后，项目就是现在这个样子

3.3实现底部选项卡功能

更改href的路径

将底部选项卡的href修改为如下图，而且span标签里面的文字也可以自己设置
在这里插入图片描述
此时47行的代码也要更着修改奥！

3.4实现切换功能（此文重点）

以my.html为例，实现切换

我们在body里面来编写一段代码

(快捷键)
mb 回车选择mbody
ml 回车

然后自己再填写相应的文字
my.html

<!doctype html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.min.css" rel="stylesheet" /></head><body><script src="js/mui.min.js"></script><script type="text/javascript">mui.init()</script><div class="mui-content"><ul class="mui-table-view"><li class="mui-table-view-cell"><a class="mui-navigate-right">我的订单</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right">修改密码</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right">反馈意见</a></li><li class="mui-table-view-cell" id='btnaboutUs'><a class="mui-navigate-right">关于我们</a></li></ul></div></body></html>

实现功能：实现点击关于我们，就返回关于我们的这一页

我们就是这一行去设置id（因为后面我们要调用它）
在这里插入图片描述
去js拿这个id

打开新页面

参考代码来源：https://dev.dcloud.net.cn/mui/window/
在这里插入图片描述

在my.html的body中输入下面这个代码，这个代码的意思是拿到"关于我们"的Id,因为我们在my.html中设置了关于我们的id为btnAboutUs，addEventListener(“tap”,function()为点击事件，这串代码实现的功能就是点击关于我们，就会出现关于我们页面的信息

		<script src="js/mui.min.js"></script><script type="text/javascript">mui.init()document.getElementById("btnAboutUs").addEventListener("tap", function() {var webview = mui.openWindow({url: 'aboutUs.html',extras: {name: 'wangtiantian', //扩展参数time: '2020-11-9'}});//				console.log("123")  用来调试代码})</script>

完整的就应该是

<!doctype html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.min.css" rel="stylesheet" /></head><body><div class="mui-content"><ul class="mui-table-view"><li class="mui-table-view-cell"><a class="mui-navigate-right">我的订单</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right">修改密码</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right">反馈意见</a></li><li class="mui-table-view-cell" id='btnAboutUs'><a class="mui-navigate-right">关于我们</a></li></ul></div><script src="js/mui.min.js"></script><script type="text/javascript">mui.init()document.getElementById("btnAboutUs").addEventListener("tap", function() {var webview = mui.openWindow({url: 'aboutUs.html',extras: {name: 'wangtiantian', //扩展参数time: '2020-11-9'}});//				console.log("123")  用来调试代码})</script></body></html>

这边我们新建一个aboutUs.html（关于我们的页面）
在这里插入图片描述
我们在body里面随便写点东西，例如mh回车，mb回车（选择mbody），在div里面span回车

<!doctype html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.min.css" rel="stylesheet" /></head><body><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">我们都是可爱的小朋友哟！</h1></header><div class="mui-content">欢迎关注这个超级无敌可爱的人鸭！<span id="authorBox"></span></div><script src="js/mui.min.js"></script><script type="text/javascript">mui.init()</script></body></html>

可以修改一下页面入口
在这里插入图片描述
这时候我们可以手机运行一下试试
点击红框内的东东

看运行结果：
(把手机开着)
在这里插入图片描述
从上图我们可以看到index页面有多余的东西
于是我们去到Index页面
将标题和底部选项卡都删了，于是就可以得到下面的代码
index.html

<!DOCTYPE html>
<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><script src="js/mui.min.js"></script><link href="css/mui.min.css" rel="stylesheet" /><script type="text/javascript" charset="utf-8">mui.init();</script></head><body><div id="slider" class="mui-slider" ><div class="mui-slider-group mui-slider-loop"><!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) --><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="http://placehold.it/400x300"></a></div><!-- 第一张 --><div class="mui-slider-item"><a href="#"><img src="http://placehold.it/400x300"></a></div><!-- 第二张 --><div class="mui-slider-item"><a href="#"><img src="http://placehold.it/400x300"></a></div><!-- 第三张 --><div class="mui-slider-item"><a href="#"><img src="http://placehold.it/400x300"></a></div><!-- 第四张 --><div class="mui-slider-item"><a href="#"><img src="http://placehold.it/400x300"></a></div><!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) --><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="http://placehold.it/400x300"></a></div></div><div class="mui-slider-indicator"><div class="mui-indicator mui-active"></div><div class="mui-indicator"></div><div class="mui-indicator"></div><div class="mui-indicator"></div></div></div><ul class="mui-table-view mui-grid-view mui-grid-9"><li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"><span class="mui-icon mui-icon-home"></span><div class="mui-media-body">Home</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"><span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span><div class="mui-media-body">Email</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"><span class="mui-icon mui-icon-chatbubble"></span><div class="mui-media-body">Chat</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"><span class="mui-icon mui-icon-location"></span><div class="mui-media-body">Location</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"><span class="mui-icon mui-icon-search"></span><div class="mui-media-body">Search</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"><span class="mui-icon mui-icon-phone"></span><div class="mui-media-body">Phone</div></a></li></ul></body></html>

再次运行我们的app，index看起来就舒服了。

怎么实现点击“我的”中的“关于我们”就跳转到关于我们页面？

还记得我们刚刚在my.html中写的这个点击事件？在前面的打开新页面中有介绍！

在这里插入图片描述

在aboutUs.html中输入这段代码，我们可以根据span的id=authorBox，把拿到的参数传到上面的div中的span里面去。
在这里插入图片描述
这里需要注意一点的是参数是从my.html（我的）里面拿过来的

接下来，我们就可以在手机上面运行试一下，点击“我的”中的“关于我们”就可以跳转到关于我们页面。

去实操一下就知道啦！

四、扩展

这边再扩展几个：如何给标题改背景颜色：
和写前端是一样的
例如：
第16行的<a class="mui-navigate-right" style="background-color: pink;">

<!doctype html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.min.css" rel="stylesheet" /></head><body><div class="mui-content"><ul class="mui-table-view"><li class="mui-table-view-cell"><a class="mui-navigate-right" style="background-color: pink;">我的订单</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right">修改密码</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right">反馈意见</a></li><li class="mui-table-view-cell" id='btnAboutUs'><a class="mui-navigate-right">关于我们</a></li></ul></div><script src="js/mui.min.js"></script><script type="text/javascript">mui.init()document.getElementById("btnAboutUs").addEventListener("tap", function() {var webview = mui.openWindow({url: 'aboutUs.html',extras: {name: 'wangtiantian', //扩展参数time: '2020-11-9'}});//				console.log("123")  用来调试代码})</script></body></html>