H5开发APP入门
一、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入门的更多相关文章
- [Android教程] Cordova开发App入门(一)创建android项目
前言 Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的A ...
- Cordova开发App入门之创建android项目
Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑 ...
- H5开发APP考题和答案
{ "last_updated": { "$date": 1544276670569 }, "page_count": 1, "a ...
- H5 + 开发App(分享功能)
我们开发App有一个不可少的功能,就是分享功能.让用户将app分享到他的社交圈.比如微信 QQ 微博等等. 准备工作:我们要先去申请相关的权限, 这是传送门http://ask.dcloud.net. ...
- h5开发app之在线生成二维码
h5通过jquery和qrcode在线生成二维码 首先我们需要下载一个qrcode.js文件,然后依次引入jquery和qrcode文件. 1.创建一个输入框以便做演示使用: <input id ...
- [Android教程] Cordova开发App入门(二)使用热更新插件
前言 不知各位遇没遇到过,刚刚发布的应用,突然发现了一个隐藏极深的“碧油鸡(BUG)”,肿么办!肿么办!肿么办!如果被老板发现,一定会让程序员哥哥去“吃鸡”.但是想要修复这个“碧油鸡”,就必须要重新打 ...
- h5开发app,移动端 click 事件响应缓慢的解决方案
造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...
- Hbuild开发App入门
http://ask.dcloud.net.cn/article/89建议必看网站 http://www.html5plus.org/doc/h5p.html API下载地址
- 【转帖】H5 手机 App 开发入门:概念篇
H5 手机 App 开发入门:概念篇 http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html 作者: 阮一峰 日期: 2019年 ...
随机推荐
- Codeforces461A Appleman and Toastman 贪心
题目大意是Appleman每次将Toastman给他的Ni个数拆分成两部分后再还给Toastman,若Ni == 1则直接丢弃不拆分.而Toastman将每次获得的Mi个数累加起来作为分数,初始时To ...
- Tiny4412 虚拟机交叉编译环境的设置以及编译u-boot 和 kernel
从CD 里面拷贝如下文件到虚拟机里面 解压 查看是否有如下文件 tiny4412_qt@chenfl:~/tiny4412$ ls opt/FriendlyARM/toolschain/4.5.1/b ...
- RabbitMQ之主题(Topic)【译】
在上一节中,我们改进了我们的日志系统,替换使用fanout exchange仅仅能广播消息,使得选择性的接收日志成为可能. 虽然使用direct exchange改进了我们的系统,但是它仍然由他的局限 ...
- Linux安装MediaWiki
1. 编译安装libxml2 # wget http://xmlsoft.org/sources/libxml2-2.6.32.tar.gz # tar zxvf libxml2-2.6.32. ...
- hdu6121 Build a tree 模拟
/** 题目:hdu6121 Build a tree 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6121 题意:n个点标号为0~n-1:节点i的父节点 ...
- ASP.NET 5 将于2016年一季度公布
简单介绍:微软ASP.NET团队在GitHub宣布ASP.NET 5的公布时间表和发展蓝图. 该团队宣布在2015年还将公布三个Beta版.一个ASP.NET 5的抢先版(RC 1).到2016年一季 ...
- Easyui 编辑表格行删除
1.问题描述 easyui 编辑表格新增一条数据后,删除最后一行删除不了,原因是没有提交数据acceptChanges. 源码中deleteRow方法,根据坐标获取行html,方法为opts.find ...
- Lifecycle for overriding binding, validation, etc,易于同其它View框架(Tiles等)无缝集成,采用IOC便于测试。
Lifecycle for overriding binding, validation, etc,易于同其它View框架(Tiles等)无缝集成,采用IOC便于测试. 它是一个典型的教科书式的mvc ...
- 小结:A* & IDA* & 迭代深搜
概要: 在dfs中,如果答案的深度很小但是却很宽,而且bfs还不一定好做的情况下,我们就综合bfs的优点,结合dfs的思想,进行有限制的dfs.在这里A*.IDA*和迭代深搜都是对dfs的优化,因此放 ...
- 小结:双连通分量 & 强连通分量 & 割点 & 割边
概要: 各种dfs时间戳..全是tarjan(或加上他的小伙伴)无限膜拜tarjan orzzzzzzzzz 技巧及注意: 强连通分量是有向图,双连通分量是无向图. 强连通分量找环时的决策和双连通的决 ...