HBuilder开发App教程06-首页
实战
前面几节基本是一些概念的普及,
正如前面提到的,本教程会以滴石作为范例进行讲解,
有兴趣的可以先行下载体验一下,或者下载源码研究下。
新建项目
打开HBuilder,在项目管理器中右键——新建——移动app,或者直接ctrl+n,a,
见到如下界面,填入项目名称,选择mui项目,
新建完成后,默认生成的目录如下,基本和前端开发的目录结构类似,
连接手机
本教程暂时以android为例,最后会另外讲解ios手机的开发,大同小异。
用数据线连接android手机,将手机中的设置——开发人员工具——usb调试,打开,
选中之前新建的项目,选择菜单,运行——手机运行——你的手机,或者直接ctrl+r,
如果提示检测不到手机,你可以下载个应用宝之类的软件,应用宝会帮你搞定,
如果手机正常连接,控制台会显示如下信息,成功后,你的app已经在手机上运行了,
虽然是一个空白页,但是感觉下前端做app的乐趣吧。
慢慢来~
页面结构
首先说下文件存放结构,
js文件夹下新建lib和app文件夹,分别放工具js和页面js,如下
需要提到的是,工具js采用jquery,应该jquery很强大,
有的人会疑问jquery比较大,用jquery是不是不太好,
那你就错了,你还停留在网页的思维,
其实HBuilder最终会把这些js都打到app包内,
其实你调用jquery就是调用的app包内的js了,
不存在大不大,费不费流量的问题了。
然后是页面结构,
参考这里:javascript · MUI 中的创建子页面,见顶部图片
你可以看到首页是分为index部分,也就是可见的头部,有时候是头部和底部,
还有list部分,也就是中间部分,为什么要这么做,为了让app更加逼真,
你也可以尝试自己把index和list放到一起,最终的最终你还是会采用这种方法的。。
index.html
代码如下:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><!-- mui --><script src="js/mui.min.js"></script><link href="css/mui.min.css" rel="stylesheet"/></head><body><header class="mui-bar mui-bar-nav"><a class="mui-icon mui-icon-bars mui-pull-left menua"></a><a class="mui-icon mui-icon-plus mui-pull-right adda"></a><h1 class="mui-title">滴石</h1></header><!-- jquery --><script type="text/javascript" src="js/lib/jquery-1.11.2.min.js"></script><!-- qiao.js --><script type="text/javascript" src="js/lib/qiao.js"></script><!-- app --><script type="text/javascript" src="js/app/index.js"></script></body>
</html>
1.meta
不多说了,必须的,第二个是适应移动端
2.mui
mui的js和css是必须的,mui负责了app的ui界面和app和原生交互的封装,
你也可以用采用bootstrap或者amazeui或者jquery mobi等ui,但是这里还是推荐mui。
3.header
采用mui中封装好的组件“导航栏包含文字和图标”,详见这里:CSS组件 · MUI
其中mui-pull-left代表浮动到左边,right到右边,mui-icon-*代表各种字体图标,
关于字体图标可以看这里,如果mui自带的没法满足,你可以在这里下载引入:iconfont-阿里巴巴矢量图标库
4.好习惯
将与页面初始化无关的js引入到body的最底部是一个好习惯,
这里引入了jquery和我自己的一些封装qiao.js,以后详细解说,最后是index页面对应的js
HBuilder开发App教程06-首页相关推荐
- HBuilder开发App教程01-推开前端开发App的大门
奇妙的前端,奇妙的js 众所周知,自从js有nodejs后,前端人员可以华丽的转身,去开发高并发非阻塞的服务端程序, 随着html5的出现,伴随一些amazing的特性,h5开发app的技术越发的成熟 ...
- Hbuilder开发app实战-识岁06-face++的js实现【完结】
前言 因为识岁app比較简单.所以这节就完结吧, 当然另一些能够优化完好的地方,可是个人兴趣不是非常大, 有想继续完好的,源代码在这里:https://github.com/uikoo9/shisui ...
- Hbuilder开发app实战-识岁01-actionsheet实例
前言 之前写了HBuilder开发App入门-滴石.相信大家看完后应该能够入门了, 之后会做一些简单的app.把nativejs一些经常使用的功能都过一遍,这样以后做app就没什么难的了. 识岁 借助 ...
- ArcGIS二次开发基础教程(06):有关图层的基本操作
ArcGIS二次开发基础教程(06):有关图层的基本操作 0. PageLayout和MapControl 的同步 void CopyToPage(){//对象拷贝,把mapcontrol的地图拷贝重 ...
- WordPress+Flutter开发APP教程:2.创建项目
说明 本小节教程,将教您如何使用 Android Studio 创建一个 APP 目录 说明 开始 1.打开 Android Studio,并点击 新建flutter 项目 如下: 2.选flutte ...
- MUI+H5plus+HBuilder开发app(android,ios)介绍
前言 现在介绍一款只需要懂html+css+js就能开发app的框架,不需要懂原生语言,完全只需要前端web工程师就能独立开发出android和ios的应用,且一套代码搞定,效率很高.(其实更省事可以 ...
- mui开发app教程-1
上一篇:前言 目录 创建项目方式 功能1:引导页 引导页显示 引导页代码模板 引导页全屏显示设置 引导页跳转首页 功能2:首页选项卡设计 选项卡依赖文件 选项卡代码模板 选项卡更改图标 使用成果展示和 ...
- mui hello html5 安装,HBuilder开发App Step1——环境搭建,HelloMUI 以及真机调试(示例代码)...
No1. 必须搭建java环境 只需要最基础的java环境,也就是cmd下可以运行java和javac即可, 具体教程请自行百度,都会有很详细的教程,这里不重点介绍. No2. 下载安装HBuilde ...
- python开发app教程_知到APP_数据库应用与开发_答案教程
知到APP_数据库应用与开发_答案教程 更多相关问题 [单选题]下列选项中,属于sendRedirect(java.lang.String url)方法所在接口的是( ) A. HttpSession ...
最新文章
- 区块链热度背后的资本市场
- 变换为json类型却遭遇乱码\u516c\u5f00\u65e5\u671f
- 关于Java中的JDBC使用和数据库(SQL Server)连接之后的一些操作
- php中 param,php中bind_param()函数用法分析
- C++类中成员变量的初始化有两种方式
- 如何扩大缓存区_艾莱依首个自动化仓落地,库宝解决线边缓存难题
- 牛客21781 牛兄牛弟
- HTTP状态:202、301、304、404、503
- HttpClient4.x之Post请求示例
- Java网络聊天室系统的设计与实现
- 分区助手扩大c盘后自动修复_如何扩大c盘空间? 不用重装系统,分区助手轻松搞定...
- IBUS-WARNING **: 09:23:08.407: The owner of /home/cl/.config/ibus/bus is not root!
- Ubuntu中deb包详解及打包教程
- 刨根究底字符编码之四——EASCII及ISO 8859字符编码方案
- ESX通过命令行重启虚拟机
- python tkinter 自主小项目——计算器往事
- u盘 安装win11 提示找不到 install.wim 文件 解决方法
- 2020年chx的计算机保研之路系列(5)——夏令营面试问题及感想杂谈
- 有道翻译 翻译功能的功能实现
- hrbust 哈理工oj 1633 word!word!【欧拉路、欧拉回路的有向图判断】
热门文章
- 小猿圈分享免费自学编程的10个网站
- 做前端的你,如何克服技术焦虑?
- npm报错 npm ERR! Could not resolve dependency:npm ERR! peer pug@“^2.0.0“ from pug-loader@2.4.0
- 智慧非智能,智慧园区智慧在哪里?
- A Survey of Zero-Shot Learning: Settings, Methods, and Applications [reading notes]
- MUSCI算法估计空间方位角
- 移动开发与H5交互的研究
- 背景图片如何自适应屏幕
- 互联网的996与华为的惊世骇俗
- 编写Makefile:编译当前文件夹以及子文件夹下所有的ccpp文件并生成可执行文件