Hbuilder移动app入门

Hbuilder移动app入门

HBuilder-飞速编码的极客工具，手指爽，眼睛爽下载

 

一、下载地址（官网）：http://www.dcloud.io/

二、安装：很简单，傻瓜式操作

三、主界面

 

上图是这个编辑器的一些简单的描述，可以说是一个项目开发的基本认识

 

四、创建一个名为Demo的h5移动app项目

   1.新建->移动APP，出现下图

 

   描述：

       应用信息那块大家都知道怎么填，

       1.选择模板

         勾选空模板：此编辑器将为我们创建一个带有一些基本分类文件夹

           

          勾选mui项目：为我们创建一个包含mui.css、mui.js和字体资源的项目（Hbuilder,默认使用mui框架）

         

           勾选mui登录模块：为我们创建一个带有登录，注册的app项目

           

         勾选Hello H5+  和Hello mui：为我们创建一个实例常用的一些比如手机拍照，调用拨打电话的Demo、和一些我们常用的html按钮样式

2.语法

  ECMAScript 5.1为JavaScript的版本号，JavaScript被Netscape公司提交给ECMA制定为标准，称之为ECMAScript

ECMAScript详情链接：http://www.cnblogs.com/lhb25/archive/2011/01/16/1936669.html

3.学习链接

      

这里是官方提供的一些入门教程和github资源库

 

2.使用MUI框架搭建网站

  简单的登录、注册、主页

  

登录界面

 

使用mui.js、mui.css （mui文档链接：http://pan.baidu.com/s/1cvPq7k）

创建一个导航栏

<header class="mui-bar mui-bar-nav">

<h1 class="mui-title">Loginh1>

header>

可直接设置style更改样式

创建输入框

 <form class="mui-input-group">

<div class="mui-input-row">

<label>用户名label>

<input id="name" type="text" placeholder="请输入用户名">

div>

       form>

 

 

创建提交按钮

 <div style="margin-top: 20px;text-align: center;">

 <button  id="skip" class="mui-btn mui-btn-primary" style="width: 90%;">loginbutton>

       div>

 

可对css进行修改

 

Mui.js进行页面跳转

 

 

Index.html获取login.heml的值

 

 

 

 

一个简单的h5 app就成功了