一、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. 转:解决centos netstat和ps感染木马

    解决方法:a.去除恶意文件的执行权限chmod 000 /tmp/gates.lod   /tmp/moni.lod    service sendmail stopchkconfig --level ...

  2. git学习(二):git config命令

    不同的git config操作不同的参数文件 git config --global // 配置用户目录下的.gitconfig那文件 git config --system // 配置系统级配置文件 ...

  3. mnesia怎样改动表结构

    mnesia创建的时候须要指定表record结构,假设定义的record结构改动了,就要更新数据的表结构.否则mnesia无法正常读取和写入数据. 我们最開始是这样定义结构的 -record(pers ...

  4. 树莓派+android things+实时音视频传输demo之遥控小车

    做了个测试小车,上面安装了摄像头,通过外网进行视频传输: https://www.bilibili.com/video/av23817880/

  5. ardunio

    fritzing,  arduino简易电路图制作软件

  6. C++ 运算符重载四(自定义数组类)

    //自定义数组类 #include<iostream> using namespace std; //分析:能获取数组长度,添加元素,删除元素,修改元素 //要求重载[],=,==,!=运 ...

  7. op bug 修复计划

    省-市-区-组-成员 多了一个组的下拉框,说不清它和区的联系 把它删掉,它的点击事件(把组的id和内容传给隐形的text,text通过ajax提交到数据库)给区下面的组

  8. android onTouchEvent

    触摸屏幕时,没搞懂每个事件的启动顺序.本文记录onTouchEvent发生时,每个事件启动的顺序. 测试代码 @Override public boolean onTouchEvent(MotionE ...

  9. Win10下安装MySQL总卡在write configuration的解决办法

    先说结论 删除  C:\ProgramData 下的MySQL文件夹!!! 折腾过程 反复安装卸载,安装版.绿色版,都不行,清理注册表,清理安装文件夹,还是不行!!! 最后找到并删除  C:\Prog ...

  10. Spring_day04--HibernateTemplate介绍_整合其他方式_Spring分模块开发

    HibernateTemplate介绍 1 HibernateTemplate对hibernate框架进行封装, 直接调用HibernateTemplate里面的方法实现功能 2 HibernateT ...