一、MUI

  MUI是一个最接近原生APP体验的高性能前端框架。我们用它来排版布局。

  官方网站:http://dev.dcloud.net.cn/mui/

二、HTML5PLUS

  html5+是HBulider利用自己的IDE结合不同平台的接口再加上html5的东西开发出来的一套框架,它有自己的使用规范,它允许和提供了一些接口和函数来让web开发者实现原声app所能实现的功能,Dcloud(开发hublider的公司,官网:http://www.dcloud.io/)还在HBuilder提供了云打包功能,几乎是打包发布,帮那些不熟悉原生开发的开发人员节省了很多时间

  H5+规范的官方网站:http://www.html5plus.org/doc/h5p.html

三、APP开发准备工作

  开发前,先安装两个软件:夜神模拟器(安卓模拟器的一种)和HBuilder。

1、准备工作:
  打开HBuilder软件,选择"文件" --> "新建" --> "移动app",如下图:

  填写项目名称等参数,如下图:

  完成生成项目,目录如下图:

  点击HBuilder菜单的工具 --> 选项,如下图:

  填写夜神模拟器的端口(若62001不行,可尝试52001),如下图:

  打开夜神模拟器,在HBuilder中运行项目MuiDemo,如下图:

  运行后HBuilder控制台如下图:

  此时,在夜神模拟器中出现 "HBuilder",如下图:

  双击打开,如下图:

  至此,我们已经了解了一个APP从新建到运行的过程。

  注意:条件允许的情况下,你也可以直接使用真机调试,即接入手机而替代夜神模拟器。

2、尝试开发一个APP的页面

  按照上述步骤新建一个项目,注意,模板选择"mui项目",而不再是"Hello mui"。

  参考MUI文档:http://dev.dcloud.net.cn/mui/ui/

  完成后如下图:

H5开发APP入门的更多相关文章

  1. [Android教程] Cordova开发App入门(一)创建android项目

    前言 Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的A ...

  2. Cordova开发App入门之创建android项目

    Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑 ...

  3. H5开发APP考题和答案

    { "last_updated": { "$date": 1544276670569 }, "page_count": 1, "a ...

  4. H5 + 开发App(分享功能)

    我们开发App有一个不可少的功能,就是分享功能.让用户将app分享到他的社交圈.比如微信 QQ 微博等等. 准备工作:我们要先去申请相关的权限, 这是传送门http://ask.dcloud.net. ...

  5. h5开发app之在线生成二维码

    h5通过jquery和qrcode在线生成二维码 首先我们需要下载一个qrcode.js文件,然后依次引入jquery和qrcode文件. 1.创建一个输入框以便做演示使用: <input id ...

  6. [Android教程] Cordova开发App入门(二)使用热更新插件

    前言 不知各位遇没遇到过,刚刚发布的应用,突然发现了一个隐藏极深的“碧油鸡(BUG)”,肿么办!肿么办!肿么办!如果被老板发现,一定会让程序员哥哥去“吃鸡”.但是想要修复这个“碧油鸡”,就必须要重新打 ...

  7. h5开发app,移动端 click 事件响应缓慢的解决方案

    造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...

  8. Hbuild开发App入门

    http://ask.dcloud.net.cn/article/89建议必看网站 http://www.html5plus.org/doc/h5p.html  API下载地址

  9. 【转帖】H5 手机 App 开发入门:概念篇

    H5 手机 App 开发入门:概念篇 http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html 作者: 阮一峰 日期: 2019年 ...

随机推荐

  1. c#生成方案里预生成拷贝文件

    我们在做项目时,可能是多人合作,这样每个人的目录层次级别是不一样的,如果用VS自带的OUTPUT输出目录,改变路径,把DLL集中生成到一个文件夹,那么不同人的机器上结果是不一样的,这就造成了,我这台机 ...

  2. [shell]C语言调用shell脚本接口

    Use popen if you want to run a shell command and want the parent process to be able to talk to the c ...

  3. asp.net 导出EXCEL超高兼容(不用装Excel)

    用网上的代码你会发现,下载下来后,会提示"你尝试打开的的文件的格式与文件扩展名指定的格式不一致 请验证文件没有损坏且来源可信的提示,研究了好久 后来发现可以使用人家做好的组件NOPI去实现, ...

  4. Android Studio 编写 JNI

    之前一直都不知怎么编写JNI,今天刚好学习一下,感谢梦真的指教,以及提供的文档. 参考链接 http://blog.csdn.net/u011168565/article/details/518781 ...

  5. java 多线程 3 synchronized 同步

    多任务编程的难点在于多任务共享资源.对于同一个进程空间中的多个线程来说,它们都共享堆中的对象.某个线程对对象的操作,将影响到其它的线程. 在多线程编程中,要尽力避免竞争条件(racing condit ...

  6. 查看SQLServer数据库每个表占用的空间大小

    创建存储过程: CREATE PROCEDURE [dbo].[sys_viewTableSpace] AS BEGIN SET NOCOUNT ON; CREATE TABLE [dbo].#tab ...

  7. 灵活的javaScript

    通常我们不像下面这样声明函数,因为会创建很多全局变量. function checkName() { // code } function checkEmail() { // code } 所以,我们 ...

  8. swift - UIView 设置背景色和背景图片

    代码如下: let page = UIView() page.frame = self.view.bounds //直接设置颜色 page.backgroundColor = UIColor.gree ...

  9. 在线制作logo

    logoko:http://www.logoko.com.cn/ markmarker:http://emblemmatic.org/markmaker/#/ logomaker:https://lo ...

  10. 如何正确设置 Informix GLS 及 CSDK 语言环境

    本文介绍 GLS 相关知识,说明如何正确设置 Informix GLS 语言环境相关变量(DB_LOCALE,CLIENT_LOCALE),保证 Informix 数据库服务器.客户端能正确的支持中文 ...