第四篇：移动APP开发- 页面跳转

最新推荐文章于 2022-05-07 23:09:21 发布
最新推荐文章于 2022-05-07 23:09:21 发布
阅读量7.3k 收藏 17
点赞数
分类专栏： 移动APP开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ysj4428/article/details/82495962
版权

前面三篇大体讲述了Hbuilder开发APP相关信息，下面针对页面部分进行详细说明。

主页

主页部分就是打开APP后，跳出的第一个页面，这里采用的页面布局如下：

我们看到的这个页面实际由两个页面组成。因为底部的Tab是公用部分，所以对应嵌套4个页面。

也就是说现在一共有5个页面分别是：

  1. index.html:只是底部固定有Tab的页面
  2. home.html:带有九宫格以及顶部搜索功能的页面
  3. inventory.html：库存界面
  4. statistics.html：统计界面
  5. setting.html.html：我的界面

其中index.html是底部不变界面，其他界面通过点击底部Tab进行切换。

一、页面开发前提

在开发页面之前，首先记住mui开发的一些注意事项：

1.固定栏靠前

这个就是说html页面body中分两类元素，一个是固定栏（带有.mui-bar属性的节点）一个是内容。固定栏常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）;这些元素使用时需遵循一个规则：放在.mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容；

2.一切内容都要包裹在mui-content中

除了固定栏之外，其它内容都要包裹在.mui-content中，否则就有可能被固定栏遮罩。具体原因就是决定定位fix的原因了。

注意事项结束了，进入正式页面讲解

二、页面开发中的问题

首先创建含mui.html,名字就叫做index.html,里面包含了引入的css以及js文件，下面添加mui中的tab

<nav class="mui-bar mui-bar-tab" id="nav">
    <a class="mui-tab-item mui-active" href="home.html" id="tab_home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" id="tab_inventory">
        <span class="mui-icon mui-icon-email"></span>
        <span class="mui-tab-label">库存</span>
    </a>			
    <a class="mui-tab-item" id="tab_statistics">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">统计</span>
    </a>			
    <a class="mui-tab-item" id="tab_myinfo">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>

添加后页面显示：

底部Tab加上了，下面就要把各个Tab代表的页面加载进来。我们在做网页开发的时候可能使用div隐藏以及显示来做（原谅我前端是渣渣）或者使用a标签进行跳转。但是移动APP中不建议这么做，因为网页跳转我们都知道会有等待以及屏幕白一会。演示下：

看到了吧，APP肯定不想白这么一下的，所以就需要选择页面跳转方式了，知识点来了：

1.首先所有页面在第一次加载时都要调用mui.init(）方法，因为里面加载了手机要用到的监听之类的，例如监听手机屏幕下拉刷新什么的。

2.页面跳转Mui提供三种方式：

  • 初始化时创建子页面
  • 直接打开新页面
  • 预加载页面

这三种方式区别：

第一种方式是打开子页面的方式，二三种不是。什么是子页面，相当于html中的iframe,这玩意可以一级连着一级，例如A的子页面B，B的子页面C，在C中可以拿到A的元素等，我理解就是嵌套。而非子页面就相当于打开一个新页面了。

那么什么时候使用子页面方式呢？

  • 侧滑菜单（子页面和主页面一起滑过来，不是子页面的话不随着主页面滑过来，你还要自己处理）
  • 子页面使用频繁切换的情况
  • 子页面适用与下拉刷新和上拉加载（如果不是子页面下拉没效果的）

而非子页面的打开方式更适用于详情页等。

那么什么是预加载呢？

故名思意，就是先加载着，也就是先不用。

而预加载可以在init中预加载（很久才会用），另一种就是直接打开的方式。

下面就将home.html作为主页加入到index.html中，这里采用预加载的方式。

先单独看home.html编写页面效果：

顶部搜索框（滑动窗口暂不实现）

<header class="mui-bar mui-bar-nav" style="background-color: #00A9F6;">
    <a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
    <div class="mui-input-row mui-search" style="position: absolute;left: 80px;">
        <input type="search" class="mui-input-clear" placeholder="商品、订单、库存">
    </div>
</header>

图片轮播以及九宫格

                <div class="mui-content">
			<!--轮播图片-->
			<div id="slider" class="mui-slider" style="height: 120px;">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../images/yuantiao.jpg">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/shuijiao.jpg">
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/muwu.jpg">
						</a>
					</div>
					<!-- 第三张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/cbd.jpg">
						</a>
					</div>
					<!-- 第四张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/yuantiao.jpg">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../images/shuijiao.jpg">
						</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>
			
			<br/>
			<!--9宫格-->
	        <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-4"><a href="#" id="product">
	                    <span class="mui-icon mui-icon-home"></span>
	                    <div class="mui-media-body">商品管理</div></a></li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#" id="buymenu">
	                    <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
	                    <div class="mui-media-body">采购单</div></a></li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
	                    <span class="mui-icon mui-icon-chatbubble"></span>
	                    <div class="mui-media-body">销售单</div></a></li>		                 
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
	                    <span class="mui-icon mui-icon-location"></span>
	                    <div class="mui-media-body">客户管理</div></a></li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
	                    <span class="mui-icon mui-icon-search"></span>
	                    <div class="mui-media-body">库存管理</div></a></li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
	                    <span class="mui-icon mui-icon-phone"></span>
	                    <div class="mui-media-body">订单管理</div></a></li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
	                    <span class="mui-icon mui-icon-gear"></span>
	                    <div class="mui-media-body">账务管理</div></a></li>
	            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
	                    <span class="mui-icon mui-icon-info"></span>
	                    <div class="mui-media-body">统计管理</div></a></li>
	           <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
	                    <span class="mui-icon mui-icon-more"></span>
	                    <div class="mui-media-body">系统管理</div></a></li>
	        </ul> 
		</div>

当然了，图片轮播有JS控制的

                mui.init({
			swipeBack:true //启用右滑关闭功能
		});
		
		//图片轮播
		var slider = mui("#slider");
		slider.slider({
			interval: 5000
		});

好了回到正题，将剩余的几个页面自己编写完，然后在index.html中添加js控制这些页面预加载同时根据点击隐藏显示页面

//控制tab点击
     	mui.plusReady(function(){
            var arr =document.getElementsByClassName("mui-tab-item");
            var objYe = ["page/home.html","page/inventory.html","page/ajax.html","page/setting.html"];//预加载页面
            var objStyle = {top:"0px",bottom:"60px"};//样式
            var objs=[];
            var self = plus.webview.currentWebview();//取到当前的主页窗口，这个语法是html5+中语法
   
            for (var i=0;i<arr.length;i++){
	            !function(i){
		            var obj = plus.webview.create(objYe[i],objYe[i],objStyle);
		            objs.push(obj);		        
		            arr[i].addEventListener("tap",function(){
		                for(var j=0;j<arr.length;j++){
		                    if(j!=i){objs[j].hide()}
		                    else{objs[j].show()}
		                }
		                self.append(objs[i])
		             })
	             }(i)
            }
             mui.trigger(arr[0],"tap"); 
        })

其中涉及的plus.webview.currentWebview()方法是html5中文档。

文档地址为：http://www.html5plus.org/doc/zh_cn/accelerometer.html

这样就完成了最开始展示的页面了。注意：该种方式在开发视图中点击是不好使的，但是在真机模拟中是可以的。

总结：

该章节介绍了页面跳转几种方式以及使用HTML5+API进行开发，后面将进行跳转页面并获取列表数据的操作。即首页九宫格点击商品管理，跳转到商品列表界面，同时商品列表可以点击进入详情页。列表到详情页也是一个具体实现实例。

 

30岁叛逆期
关注
  • 0
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
2024年移动应用设计与开发—车机中控App需求规格说明书参考答案
旺仔Sec&blog
06-09 311
模块时长：2 小时模块分值：25 分 本模块以产品原型设计为目标，基于移动跨平台应用开发生态系统，围绕车主手机 App、中控大屏移动终端 App、智能充电(家用版 App 和商用版小程序)，对产品进行理解、分析，编制规范的需求规格说明书，熟练使用 UI 设计软件进行产品原型设计，绘制出符合业务逻辑和人体工学的高保真产品原型图，为后续的产品开发和优化奠定坚实的基础。
实验四：app内页面跳转
qq_45789916的博客
10-31 1113
简介 “Activity”是Android应用中负责与用户交互的组件，相当于Swing中的JFrame控件，但Jframe本身可以设置布局管理器，即自身可以添加组件，但activity只能通过“setContentView(View)”方法来显示布局文件中已经定义的组件 一、如何创建Activity ① 新建一个Android Studio工程； ② 在新建工程中创建Activity，命名为SecondActivity； ③ 为SecondActivity创建对应的UI界面，并通过setContView()
移动应用开发-Android-实现三个页面（Activity）的简单跳转（Intent）
weixin_67347065的博客
05-07 3471
我们要实现的页面跳转如下图所示： 第一个页面： 这个页面非常简单，我们可以直接把图片设为第一个页面的背景图片 通过等待3s之后跳转到第二个页面： 填写信息之后通过点击确定按钮跳转到第三个页面： 本页面为文本框输出上一页面所填写的内容 第一个页面代码（Activity页面）： <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://.
点击android搜索框跳入另一个页面,android - ToolBar中的SearchView如何让点击之后跳转到一个新的Activity...
weixin_39946364的博客
05-26 1237
PHP中文网2017-04-17 13:08:302楼@李引证 的回答包括了关键信息，我来补充一些细节，及纠正几个细节上的错误。关于“菜单项的点击事件”我们需要覆写 onCreateOptionsMenu 来初始化Activity/Fragment的选项菜单。Android同时提供了另一个方法 onOptionsItemSelected()，该方法在菜单项被点击时调用，在这里处理菜单项的点击事件...
salesforce-将请求跳转到标准组件的页面
gaofly89的专栏
12-23 2162
// Add an existing customer public PageReference add() { Retargeting_BMS_CN__c newTarget = new Retargeting_BMS_CN__c(); newTarget.Active_BMS_CN__c = true; newTarget.BU_B
解决mui-popover 弹出菜单不能滚动的一次实践
weixin_42429311的博客
04-19 1529
mui-popover菜单弹窗的事项，及Unable to preventDefault inside passive event listener due to target being treated as passive 报错的解决方案。
NativeScript-Vue登录模板：App NativeScript-Vue登录模板
02-04
【NativeScript-Vue登录模板】是一个专为移动应用开发设计的框架，它结合了NativeScript的原生性能和Vue.js的简洁易用性，用于快速构建跨平台的iOS和Android登录界面。本模板提供了一个基础的、可定制的登录页面，...
android开发，APP跳转到淘宝商品详情，优惠券领取页面
05-04
在Android开发中，实现从自己的应用跳转到淘宝商品详情页和优惠券领取页面是一项常见的需求，这通常涉及到第三方应用的深度链接技术。本篇将详细介绍如何实现这一功能，并涉及与之相关的Android知识点。 首先，我们...
基于uni-app开发的新闻和资讯类App模板
02-22
4. **路由跳转**：uni-app的路由管理系统使得页面间的跳转变得简单，通过`<navigator>`标签或uni-app提供的路由API，可以方便地实现页面间的导航。 5. **API调用**：模板中可能涉及地图定位、分享、评论、点赞等...
kbtu-masters-react-native-hw2:移动编程课程-KBTU 2021（硕士）
04-19
5. **导航**：学习使用React Navigation进行页面间跳转和导航。 6. **生命周期方法**：了解生命周期方法，如`componentDidMount`、`componentDidUpdate`等，以及新的Hooks API中的`useEffect`。 7. **动画**：使用`...
Android如何跳转到应用商店的APP详情页面
01-20
在Android开发中，有时我们需要引导用户从我们的应用内直接跳转到应用商店，以便他们可以查看应用程序的详细信息、下载新版本或者留下评价。本文将详细介绍如何实现这一功能。 首先，我们要理解`launchAppDetail`...
本人的一个APP程序，实现页面跳转
02-05
本人的一个APP程序，实现页面跳转。本人的一个APP程序，实现页面跳转。本人的一个APP程序，实现页面跳转。本人的一个APP程序，实现页面跳转
移动app开发- 页面跳转_移动开发工作趋势– 2012-08
danpoxiang7784的博客
05-04 132
移动app开发- 页面跳转 今天我们有工作趋势职位的最后一部分，移动开发工作趋势。 每个人都在谈论移动开发，因为这确实是交互的未来。 借助智能手机和平板电脑，即使对于企业来说，应用程序开发也变得极为重要。 此列表中包括的术语包括iPhone ， Android ，WP7或“ Windows Phone ”， BlackBerry ， Symbian ， WebOS和PhoneGap 。 数据...
移动应用开发之界面跳转和后台服务
qq_42188168的博客
04-27 584
一、界面跳转（无传输数据） 1、新建一个activity 2、在想要跳转到别的界面的界面编写跳转代码 private Button button1, button2; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);...
移动开发页面跳转设计
MY_DO的博客
10-25 290
移动开发页面跳转设计编写思路具体代码设置跳转方法与页面布局recycleView跳转新的详情界面最终效果查看代码 编写思路 为Item添加点击监听事件，然后使用intent进行activity跳转 具体代码 设置跳转方法与页面布局 代码如下： package com.example.homework; import android.app.appsearch.GetByDocumentIdRequest; import android.content.Context; import android.con
移动开发第二次作业——Activity页面跳转
input_out的博客
10-23 1147
文章目录移动开发第二次作业——Activity页面跳转一、编辑详情页面二、在详情页数据展示三、效果展示四、实体类说明五、码云地址 移动开发第二次作业——Activity页面跳转 一、编辑详情页面 页面设计布局效果如下： 布局介绍： 顶部为返回箭头，用于点击返回上一页；分享图标用于分享到社交软件 新闻标题TextView从上一页得到数据展示，发布人id，签名等都从上一页得到数据 正文部分以及头像，从数据库中获得（目前使用伪数据）。 布局代码如下： <?xml version="1.0" encodin
安卓APP开发，从一个页面跳转到另一个页面的两种方式（intent 意图）
qq_42451251的博客
01-17 7964
基于android-APP开发的页面跳转的两种方式（intent 意图） 一般来说，我们进行移动端安卓的开发是一道复杂的工序，因为我们需要的不止是一个页面，通常是很多页面的交互进行，所以，从一个页面跳转到另一个页面是安卓开发很重要的，也必须掌握的技能，本次博客将会讲解利用不同的Intent意图方式进行页面的跳转。 利用intent意图进行跳转，首先我们得对intent进行实例对象，如下： Inte...
app界面跳转
居贝比的博客
05-08 790
布局​​ <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" an...
Android开发基础入门教程：从项目结构到App签名打包
Android开发基础是指 Android 操作系统下的移动应用程序开发，涵盖了从基础概念到实际开发的全过程。本节将对 Android 开发基础进行详细的介绍。 一、Android 项目结构 Android 项目结构是指 Android 项目的目录...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值