欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)

程序员文章站 2022-03-07 21:43:02
今天是很丧的一天,做什么都提不起兴趣,不知道何时才能做到道家的“无为,而无所不为”,也无法理解范仲淹的“不以物喜不以己悲”。可是再没兴趣,学习还是要继续!!!为了让自己放松,去趟博物馆,不但没有起到放松心情的作用,反而累得自己腰酸背疼。苦逼的几天,害,接下来还是干正事!一、前提打开我们的HBuilder回顾一下我们前面的知识,详细点击这里为了借助MUI框架,我们需要建一个模板文件二、模板文件的创建新建一个移动App自己命名,这里选择Hello mui项目这样模板就建好了,先放这里三、...

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

一、前提

打开我们的HBuilder

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

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

连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)

二、模板文件的创建

新建一个移动App
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)
自己命名,这里选择Hello mui项目
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)
这样模板就建好了,先放这里
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)

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

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

连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)

3.1打开main代码

去掉../
因为这里的项目不用跳出上一级文件夹
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)

看到这里,我们可以看到这些href的链接,要链接到底部选项卡的页面,接下来我们可以创建页面了。
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)

3.2创建底部选项卡页面

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

以index.html为栗子
虽然步骤很简单,但是还是要剪出来,新建html文件
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)
切记这里点击含mui的html文件,后面几个新建一样的,类似的操作就好啦!
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)
文件建好以后,项目就是现在这个样子
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)

3.3实现底部选项卡功能

更改href的路径

将底部选项卡的href修改为如下图,而且span标签里面的文字也可以自己设置
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)
此时47行的代码也要更着修改奥!
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)

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(因为后面我们要调用它)
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)
去js拿这个id
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)
打开新页面

参考代码来源:https://dev.dcloud.net.cn/mui/window/
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)

在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(关于我们的页面)
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)
我们在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>

可以修改一下页面入口
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)
这时候我们可以手机运行一下试试
点击红框内的东东
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)

看运行结果:
(把手机开着)
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)
从上图我们可以看到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中写的这个点击事件?在前面的打开新页面中有介绍!

连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)

在aboutUs.html中输入这段代码,我们可以根据span的id=authorBox,把拿到的参数传到上面的div中的span里面去。
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)
这里需要注意一点的是参数是从my.html(我的)里面拿过来的
连接真机开发安卓(Android)移动app MUI框架——混合式开发(二) 带你项目开发(敲详细)
接下来,我们就可以在手机上面运行试一下,点击“我的”中的“关于我们”就可以跳转到关于我们页面。

去实操一下就知道啦!

终于写完了,https://blog.csdn.net/hanhanwanghaha欢迎关注这个超级无敌可爱的人鸭,有什么问题留言私信皆可,看见必回!

如有转载,请注明出处

本文地址:https://blog.csdn.net/hanhanwanghaha/article/details/109565054