HBuilder完成webApp入门(2)

一、HBuilder的下载地址:http://www.dcloud.io/,点击那个“DownLoad”就可以 了

二、假设一切顺利,启动HBuilder后,大家会看到如下的界面

点击新建移动APP:

接下来就会弹出一个选择模板的对话框:

默认的模板选项是“空模板”。不包含任何的HBuilder提供的画面组件,要选择“mui项目”。它包含了 mui (默认提供的画面组件,也就是CSS 和 Javascript)。

是不是不知道MUI是什么了(简单介绍一下:最接近原生APP体验的高性能前端框架 具体内容见http://dev.dcloud.net.cn/mui/

在起个项目名字就ok啦。

三、简介一下工具类

建好工程以后左边栏会显示一些文件,如下所示:

其中index.html 是入口文件。 css 是样式表目录,fonts 是字体目录, js 是 javascript目录,这三个目录是 mui 自带的。

manifest.json 是配置文件,也就是你的APP的配置文件,例如入口文件的指定,图标的指定。

四、连接手机启动APP

将手机连接到电脑,打开开发者选项。

然后点击上边工具栏的:

接下来就可以看到手机上运行了你的APP。当然,因为什么也没有,画面是一片空白。如果手机链接不上,请查看:http://ask.dcloud.net.cn/docs#http://ask.dcloud.net.cn/article/97

到此为止,我们已经可以在手机上运行APP了,走出了第一步。

时间: 2024-10-10 16:12:03

HBuilder完成webApp入门(2)的相关文章

HBuilder完成webApp入门(1)

一.什么是HTML5 HTML5并不是一门编程语言,也不是一个工具,它只是HTML的升级版本.简单的说,HTML5其实就是新的页面标签库. 但是如果仅仅如此,那么HTML5就没有出现的必要了.所以,HTML5除了新的标签以外,还包括了很多其他新的东西,如画布,视频和音频的播放,本地存储等等. 这里有HTML5详细教程,初学者可以一看: http://www.w3school.com.cn/html5/index.asp 二.学了HTML5标签,就完事了么? 如果你仅仅学会了标签,那么和普通的网页

Hbuilder开发app实战-识岁01-actionsheet实例

前言 之前写了HBuilder开发App入门-滴石,相信大家看完后应该可以入门了, 之后会做一些简单的app,把nativejs一些常用的功能都过一遍,这样以后做app就没什么难的了. 识岁 借助与face++的接口,做了一个人脸识别app,准确性和微软比确实差点, 主要用到了: 1.actionsheet的原生实现 2.选择本地照片 3.使用摄像头拍照 4.使用uploader上传文件 5.调用face++接口进行人脸识别 6.七牛云上传的实现 actionsheet 实现 actionshe

(一)半小时开发一个APP

[前言] HPP是什么? HybirdApp的简称,详细介绍参见:HPP--让所有中小企业拥有自己的APP 说白了就是用html+css+js开发app,包括ios和android版本. HBuilder 具体实现方式比较多,自行百度吧,就不一一叙述了, 之前比较推荐的HBuilder+mui+nativejs那套,相关资料: 如何快速开发出一个高质量的APP--创业谈 HBuilder开发App入门-滴石 Hbuilder开发App实战1-识岁 http://uikoo9.com/dishi

WebAPP设计和入门开发需要注意的5个事项

WebAPP设计和入门开发需要注意的5个事项 WebApp是针对NativeApp而产生的,Webapp最直接明了的定义就是一个针对Iphone.Android优化后的移动网站,它使用的技术无非就是HTML或HTML5.CSS3.JavaScript,服务端技术JAVA.PHP.ASP等. 今天,25学堂需要跟大家浅谈WebAPP设计的五个注意点及如何去设计webAPP 1. 必须要适配所有的智能手机设备 移动设备的屏幕是各式各样的,对设计影响较大的主要是屏幕分辨率.尺寸.屏幕方向这些因素.现在

移动web:原生开发打包,嵌入h5页面 webApp:全部都是H5开发的应用 混合APP:使用第三方开发平台从apicloud,appcan,hbuilder等开发,cordova技术打包 原生APP:就是eclipse开发或者studio等工具开发

论坛43213 移动端webApp兼容问题解决 谈谈App混合开发 Hybrid APP混合开发的一些经验和总结 PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry等智能手机的核心功能--包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以调用. Cordova提供了一组设备相关的

webapp开发之bui入门环境搭建及执行npm命令报错解决

引言: BUI是一个WebApp开发使用的框架,使用这个框架开发呢的app支持跨多个平台部署,这样方便很多.要使用BUI,首先要安装以及部署环境,过程中确实很让新手头疼,记录一下,望后人能少踩坑. BUI的官方网站是:BUI(含快速入门教程) 1.下载完整的工程模板 : 步骤:下载多页开发包 开发包下载--解压. ps:网页中两个选项,单页开发包和多页开发包.选择多页开发包下载,下载后解压.可以看到一个完整的工程目录. 但是此时的情况就像是在idea编辑的java项目一样,仅仅是把代码写好了,或

Hbuilder快捷入门

/*注:本教程针对HBuilder5.0.0,制作日期2014-12-31*/创建HTML结构: h 8 (敲h激活代码块列表,按8选择第8个项目,即HTML代码块,或者敲h t Enter)中途换行: 'Ctrl+Enter'设置charset: m e 6 Enter引用外部js: s 2 Enter 'Ctrl+Enter'创建js区块: s Enter创建函数: f u n 3 (或者 f u n n Enter)为函数命名:W h o i s E跳转到函数末尾: End 'Alt+['

WebApp开发入门必备知识

本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决方案. 一.基本概念 (1) CSS pixels与device pixels CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容. device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色.亮度. 等值的 CSS pixels在手机屏幕上占多大的位置,这不是固定的,这取决于很多属性.经过分析和总结,我们可以得出这么一条公式: 1 CSS pixels = (devicePix

HBuilder webApp开发 Websql增删改查操作

来源:http://blog.csdn.net/zhuming3834/article/details/51471434 这段时间公司要求我们做原生iOS和安卓的都转做H5开发APP,使用的工具HBuilder.公司这么要求我们也就只能转行做了.大家都是小白,好在公司有两位H5大神,他们先给我们一些代码看看,所以,我们上手也比较快.在做APP的过程中用到了一些本地存储,关于本地存储大家可以看看<App离线本地存储方案> .里面我只说说Web SQL,因为里面的localstorage,plus