教你在五分钟构建一个App页面

前言

最近参加学校比赛,由于业务需求要做一个App,当时心想我不是web开发的吗?App跟我有啥关系?而且之前也没去了解相关的东西,当时很慌啊队友还说上一次某某某三天就出了个App,我…
怀着忐忑的心情上度娘”app怎么开发“,发现常用的语言有java,html5,css3,javascript等等。博主是学PHP的且对安卓,java一窍不通。
后来了解到App其实是有三种类型 原生应用程序(Native App),混合应用程序(Hybrid App)Web版APP (Web App)

对于他们的区别,百度百科给出如下解释

Native App是一种基于智能手机本地操作系统如iOS、Android、WP并使用原生程式编写运行的第三方应用程序,也叫本地app。

WebApp是指基于Web的系统和运用,其作用是向广大的最终用户发布一组复杂的内容和功能。

Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“Native App良好的用户交互体验的优势”和“Web App跨平台开发的优势”。

由于篇幅的原因,对于它们三者的详细区别这里就不在阐述,想了解更多可参照这篇文章

博主今天给大家带来的是WebApp的开发,在此之前请确保你对HTML5,CSS3,JavaScript有一定的了解。
我们知道,网页响应式开发常用的框架是Bootstrap,但对应移动App的开发我们就没有必要使用Bootstrap了,因为它好多样式也是争对网页,用他来开发移动app显得有点重了。

这里给大家推荐一款专门争对移动app开发的框架----mui
什么是mui
他官网上是这样说的”最接近原生APP体验的高性能前端框架“。
开发移动app的框架有很多,既然他敢这么说肯定有一定的实力
这里我总结了三个使用mui的理由

  1. mui文件大小只有108kb
  2. mui 提供20多个控件 和50多个js api 及100多个样式

  1. js加载快一般17ms左右
  2. 体量小页面绘出快,预加载,专场快


使用HbuilderX编辑器 自带mui代码快捷操作,边看边改,模拟器调试。

如何使用mui
如果你使用mui框架,那你一定要用HbuilderX,他俩组合才体现了mui”易“的特点。
Hbuilder官网https://www.dcloud.io/
选择第一个
在这里插入图片描述
点击下载
在这里插入图片描述

选标准版即可
在这里插入图片描述
下载安装后你无需关注mui下载的问题,因为这个编辑器自带mui。
我们点击文件—新键项目,进行如下操作
在这里插入图片描述

这是创建成后的目录结构
在这里插入图片描述
接下来我们可以参照mui官方文档进行愉快的编码了。
我们往下拉,有一个代码块,使用代码块可以快速方便的为我们创建一个应用
在这里插入图片描述
列出常用的代码块
在这里插入图片描述
我们只需在编辑器输入 m…之类的东西即可快速创建页面,如下列创建一个app的首页
在这里插入图片描述
这是简单的编写了结构,没有设置样式,如果你对css,html了解相信这些都不是问题

我们用到的代码块有

  • mheader:(标题栏)
    – mText_Search(搜索框)
  • mBody(主体)
    – mGallery(图片轮播)
    – mGrid(九宫格)
    – mListMedia(图文列表图片居左)
  • mTab(底部选项卡)

需要说明的是,mui只是简单构建一个app页面,如果你要实现界面交互,还得学习HTML5plus的相关内容,如tab切换,调用手机硬件等等。

博主也是刚学还在不断地探索中

最后贡献一份app调试的方法
关于app的调试,可以直接通过浏览器打开,但是一些移动端相关的操作,必须借助真机或者模拟器来调试。

这里简单介绍真机调试。
首先将手机与电脑usb连接,可借助第三方软件连接手机如,360手机助手
在连接手机之前需要打开手机的开发者模式,并在打开usb调试

对于不同的手机开发者模式打开不同,大家自行百度
连接成功图示
在这里插入图片描述

完成上述步骤后,我们在编辑器菜单栏选择“运行”
在这里插入图片描述
点击运行到设置

在这里插入图片描述
底部控制台打印信息如下
在这里插入图片描述

第一次会在你的手机上面安装Hbuilder,然后手动或自动启动Bulilder即可在手机上运行
如下:
在这里插入图片描述

到此完成
【个人博客已上线】欢迎来访http://www.zihanzy.com

©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页