连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)
今天是很丧的一天,做什么都提不起兴趣,不知道何时才能做到道家的“无为,而无所不为”,也无法理解范仲淹的“不以物喜不以己悲”。可是再没兴趣,学习还是要继续!!!为了让自己放松,去趟博物馆,不但没有起到放松心情的作用,反而累得自己腰酸背疼。苦逼的几天,害,接下来还是干正事!
一、前提
打开我们的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(我的)里面拿过来的
接下来,我们就可以在手机上面运行试一下,点击“我的”中的“关于我们”就可以跳转到关于我们页面。
去实操一下就知道啦!
终于写完了,https://blog.csdn.net/hanhanwanghaha欢迎关注这个超级无敌可爱的人鸭,有什么问题留言私信皆可,看见必回!
如有转载,请注明出处
本文地址:https://blog.csdn.net/hanhanwanghaha/article/details/109565054
上一篇: Javascript中有哪些数据类型?
下一篇: 春分后可以吃枣核桃吗,怎么吃最好