H5混合开发APP配置以及第一个工程--博客园老牛大讲堂-CSDN博客

前段时间有人问我怎样用H5开发app，我恰好知道就把步骤粘出来，有不懂的地方给我留言，我再修改。--博客园老牛大讲堂

知识小普及：首先要明白H5开发分4种：纯网页开发（H5开发），混合开发（一般用H5和第三方包装工具），原生开发（android开发），和微信小程序开发。

　　　　纯网页开发：就是用H5开发好网页，开发好网页用第三方工具进行打包成app

　　　　混合开发：不仅用H5开发了，还要借助第三方的一些软件，并且引用第三方的软件的一些内容，之后在第三方网站进行打包成app，好处是可以实现调用照相机等。本篇博客介绍的就是混合开发，第三方工具是APIClud工具

　　　　原生开发：原生开发就是用android内容进行开发。跟H5关系不大了。

思想：首先用Hbuilder开发工程，把自己的工程粘贴到APICloud的工程里面。然后用网上的APICloud的内容打包内容。

环境：Hbuilder，夜神模拟器，APICloud开发工具。

提示：因为APICloud因为提示功能不好，所以建议如果想开发就用Hbuilder开发。开发完就把css，js，img粘里面就行了。

第一、首先下载一个APICloud开发环境（APICloud就像Hbuilder，Myeclipse，就是一个软件）。--博客园老牛大讲堂

图标：

第二、--博客园老牛大讲堂

1、进入APICloud官网，申请一个账号，进入APICloud官网，填写用户名，密码。并且下载一个APIClode桌面应用程序。

2、进入APICloud桌面应用程序，输入用户名，密码。创建一个APIClode工程。

3、我创建了一个工程myFirstApp工程，自己的img，css，js，都可以粘贴到工程下面，

4、找到index.html，这个是工程的启动项（从index.html开始）。类似于安卓开发的AndroidManifest.xml文件，类似于java的mai函数。

5、其中css和js可以不导入。

6、apiready = function(){startfull();} 是所有的js和css加载完毕后才加载下面的代码。

7、startfull()方法中的内容，定义了跳转的页面，和跳转页面的标签。其中的name：‘a1’。定义是为了方便页面之间的跳转，一般不重复，app页面跳转的都是要识别这个name的

代码：

<!doctype html>//博客园老牛大讲堂
<html>
<head>
    <meta charset="utf-8">

//下面两句是为了匹配手机页面的大小必须引入
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
   
</head>
<body>
   
   
</body>
<script type="text/javascript">
    apiready = function(){
        startfull();
    }
    function startfull(){
        api.openWin({//api这个是APICloud自己提供的api，必须在APICloud提供的，只能在APICloud里用。--博客园老牛大讲堂
            name: 'a1',//定义下面这个页面的名字。方便页面的跳转。--博客园老牛大讲堂
            url: './html3/a.html'//跳转的页面。---博客园老牛大讲堂
        });
    }
    
</script>
</html>