一、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. Codeforces461A Appleman and Toastman 贪心

    题目大意是Appleman每次将Toastman给他的Ni个数拆分成两部分后再还给Toastman,若Ni == 1则直接丢弃不拆分.而Toastman将每次获得的Mi个数累加起来作为分数,初始时To ...

  2. Tiny4412 虚拟机交叉编译环境的设置以及编译u-boot 和 kernel

    从CD 里面拷贝如下文件到虚拟机里面 解压 查看是否有如下文件 tiny4412_qt@chenfl:~/tiny4412$ ls opt/FriendlyARM/toolschain/4.5.1/b ...

  3. RabbitMQ之主题(Topic)【译】

    在上一节中,我们改进了我们的日志系统,替换使用fanout exchange仅仅能广播消息,使得选择性的接收日志成为可能. 虽然使用direct exchange改进了我们的系统,但是它仍然由他的局限 ...

  4. Linux安装MediaWiki

    1.    编译安装libxml2 # wget http://xmlsoft.org/sources/libxml2-2.6.32.tar.gz # tar zxvf libxml2-2.6.32. ...

  5. hdu6121 Build a tree 模拟

    /** 题目:hdu6121 Build a tree 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6121 题意:n个点标号为0~n-1:节点i的父节点 ...

  6. ASP.NET 5 将于2016年一季度公布

    简单介绍:微软ASP.NET团队在GitHub宣布ASP.NET 5的公布时间表和发展蓝图. 该团队宣布在2015年还将公布三个Beta版.一个ASP.NET 5的抢先版(RC 1).到2016年一季 ...

  7. Easyui 编辑表格行删除

    1.问题描述 easyui 编辑表格新增一条数据后,删除最后一行删除不了,原因是没有提交数据acceptChanges. 源码中deleteRow方法,根据坐标获取行html,方法为opts.find ...

  8. Lifecycle for overriding binding, validation, etc,易于同其它View框架(Tiles等)无缝集成,采用IOC便于测试。

    Lifecycle for overriding binding, validation, etc,易于同其它View框架(Tiles等)无缝集成,采用IOC便于测试. 它是一个典型的教科书式的mvc ...

  9. 小结:A* & IDA* & 迭代深搜

    概要: 在dfs中,如果答案的深度很小但是却很宽,而且bfs还不一定好做的情况下,我们就综合bfs的优点,结合dfs的思想,进行有限制的dfs.在这里A*.IDA*和迭代深搜都是对dfs的优化,因此放 ...

  10. 小结:双连通分量 & 强连通分量 & 割点 & 割边

    概要: 各种dfs时间戳..全是tarjan(或加上他的小伙伴)无限膜拜tarjan orzzzzzzzzz 技巧及注意: 强连通分量是有向图,双连通分量是无向图. 强连通分量找环时的决策和双连通的决 ...