hbuilderx 底部_如何在Hbuilder中制作app底部导航栏
。
1 问题描述
最近在使用Hbuilder进行移动app前端开发中,我通常搭建首页框架的常规方法是在index.html主文件中使用多种框架组件模块,再通过css叠层样式表对相应模块加以修饰。但在分析Hbuilder提供的移动app底部选项卡模板的代码时,我却在index.html文件中找不到底部选项卡区域的相应代码,这很让我伤脑筋。通过查询多方面的资料并与学长交流后,我大概了解了后者搭建框架所用到的原理。因此接下来我将分享一些干货来帮助大家理解,并且能在两种方式上进行选择。
2 问题分析
在Hbuilder中,一个移动app有着以下的几个目录:css目录、fonts目录、js目录、images目录以及html目录;还有着以下几个文件:index.html、manifest.json。
①目录篇
css目录存放html中内容的修饰样式表;
fonts目录提供整个app中的字体样式;
html目录存放app中的子页面html文件;
images目录存放前端页面中所需要的图片内容(不包括数据库提供的那部分);
js目录存放整个app所需javascript脚本语言修饰、搭建内容(具体js的作用在此就不再声明,有兴趣可自行了解学习)。
②文件篇
index.html文件:主要作用是对app首页面进行设计、架构以及与其他页面建立联系。在相对功能简单的app中,通常能在index.html中直接看到底部栏,内容栏、顶部栏及与跳转子页面的相应代码。
Manifest.json文件:(重点)关于这个文件,我们也可以将它理解成app的一个配置系统。里面包含了应用信息、图标设置等大量初始化设置选项,如下图
以上大概就是一个移动app的基本构成。
3 解决方案
让我们先来分析图中的代码,底部导航条标签以及class属性这些没啥好说的,我们主要看mui中的函数。首先是mui.init(),mui框架将很多的功能配置都集中在mui.init()中, 目前支持在init中配置的功能包括:创建子页面、预加载、手势事件配置、上拉加载、下拉刷新、关闭页面、设置系统状态栏背景颜色。
注意:mui.init()是每个mui页面都必须调用的,官方指出,页面初始化,必须执行init方法。
另外这里解释一下H5:即HTML5,万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)第5次重大修改,2014年发布,之后的浏览器都必须遵守这个开发规范实现对html、css、javaScript的解释。
最后就是实现底部导航条,其里面的标签需要注意,我们做web开发使用标签中的href属性来添加链接跳转页面,起初我也是想这样做,但在查阅资料后发现这样是不行的,有兴趣的小伙伴们可以自己试一下。为什么不行呢?因为使用web技术做app,有一个无法避开的问题就是网上提到的转场动画;web是基于链接构建的,从一个页面点击链接跳转到另一个页面,如果通过有刷新的打开方式,会出现白屏页面等待,如果通过无刷新的方式,用JS移入DOM节点(常见的SPA解决方案),项目容器会碰到很高的性能挑战;DOM节点如果非常多的话,页面太大,转场动画卡顿,不流畅,甚至导致浏览器等相应容器崩溃;关于这点,在参照CSDN博主的具体案例后,我发现可以采用mui的解决思路:单个的webview只承载单个页面的dom,减少dom层级及页面大小;页面切换使用原生动画,将最消耗性能的部分交给原生实现.
4 总结
App前端开发与web前端有着异曲同工之处,但在某些细节上又有适合各自应用需要的特点,作为初学者来说,无论是搭建什么样的一个框架,首先自己得先理解布局与功能中的代码原理。只有融会贯通,知识才能为其所用!希望本文章能在前端开发中帮助你解答一些困惑。
更多精彩文章:
什么是机器学习
关于网页首页设计的一点思考
新手小白应该如何学习MUI
聊一聊where2go团队做什么
聊一聊编程的本质
深入理解浏览器内核 - 概述
深入理解浏览器内核 - 浏览器内核介绍
深入理解浏览器内核 - 浏览器内核依赖关系
python快速求解不定积分和定积分
AI告诉你张无忌最爱的竟是...
Jupyter快速编辑高大上数学公式 泰勒展开式
Jupyter快速编辑高大上数学公式 常见希腊字母
基本初等函数 指数函数
基本初等函数 指数函数 代码篇
聊一聊JavaWeb面试
聊一聊单片机和服务器
50行代码实现简单的网站服务器
50行代码实现网站服务器 2
50行代码实现网站服务器 3
Tomcat源码分析之 doGet方法(一)
Tomcat源码分析之 doGet方法(二)
Tomcat源码分析之 doGet方法(三)
Tomcat源码分析之 doGet方法(四)
Tomcat源码分析之中文乱码(一)
一种基于状态机的 DOM 树生成技术(1)
一种基于状态机的 DOM 树生成技术(2)
where2go 团队
微信号:算法与编程之美
hbuilderx 底部_如何在Hbuilder中制作app底部导航栏相关推荐
- 如何在ppt中生成柱状图_如何在ppt中制作柱形图和曲线图
如何在 ppt 中制作柱形图和曲线图 篇一: ppt 柱状图与线状同在的操作 用 excel2010 制作双轴柱线复合图表 就是要用 excel2010 做一个这样的图表: excel2010 中,左 ...
- mac app图标简单制作_如何在Mac中更改App图标
mac app图标简单制作 Sometimes, apps icon change but we like the older icon. Thankfully, it's very easy to ...
- excel制作订单管理系统_如何在Excel中制作订单
excel制作订单管理系统 When you first start to use Excel, you probably work with files that somebody else set ...
- java实现比心_如何在java中制作比心图案?
在今天这样节日氛围中,大家在享受春节假期的同时,还可以过一下情节人.抛弃我们之前对学习代码枯燥无味的印象,今天我们学习一下用Java代码绘制心形的图案.看完这里,很多人都想要学习啦,毕竟成果是很好看的 ...
- 怎么在html5中制作下拉导航栏,在PPT中制作下拉式导航菜单效果的方法
为了提高PPT演示文稿的观赏性,用户可能希望在PPT幻灯片中添加下拉式导航菜单效果,通过该导航菜单在不同幻灯片间进行导航(如图1所示),制作下拉式导航菜单的具体操作步骤如下. 图1 下拉式导航菜单 ( ...
- java类只读怎么办_如何在Java中制作一个只读类?
java类只读怎么办 The question is that "can we make a read-only class in Java?" 问题是"我们可以用Jav ...
- word文档中的装订线怎么设置_如何在WORD中制作装订线
如何用 Word 制作试卷"卷头"含密封装订线 Word 是个功能强大的字处理软件, 许多功能能够收到令人意想不到的效果, 尤其是巧妙的运用一些命 令能够达到令其他软件望尖莫及的地 ...
- dw如何制作图片自动切换效果_如何在Dreamweaver中制作图片切换的效果?
展开全部 无标题文档 var s=function(){ var interv=2000; //切换32313133353236313431303231363533e4b893e5b19e313332 ...
- python制作3d相册_如何在Python中制作3D图?
这是3D绘图代码的MATLAB版本: 编辑: 这是当前的代码: plt.figure(2) fig_b = Axes3D(fig2) xx2 = np.arange(0, L+h_grid*L, h_ ...
最新文章
- Ubuntu14.04LTS下安装tensorflow(Anaconda3+pycharm+tensorflow+CPU)
- 2013工资新规定,未来的八种人将会被淘汰!
- 杨元庆:乐Pad更适合中国消费者
- 教大家白嫖图床,有的小伙伴跟我说图床不好整,太麻烦
- 如何设置Jupiter Notebook服务器并从任何地方访问它(Windows 10)
- 阿里巴巴招募鉴黄体验官,日薪1000元,小姐姐优先,要求阅“片”无数
- Eclipse的代码补全方法可以实现psvm和sout
- Python 科学计算库 Numpy 准备放弃 Python 2 了
- lvs nginx-proxy nginx 取用户真实IP
- python 评分卡
- STM32——蜂鸣器示例代码
- 红黑树高度上限的证明(通俗易懂)
- 证件照还用去照相馆别费钱了自己就能搞定
- Element-ui不显示表格数据问题
- go 代理加速配置详解
- 聊聊 Vue 中 provide/inject 的应用
- 到底什么是叶脊网络(Spine-Leaf)?
- 李政道与冯诺依曼计算机的基本原理,你们知道各个领域的领头人是哪几个?
- 2017-2042美国国防部无人系统路线图
- Vue3 中还处在实验性阶段 Suspense 是个啥?