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

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

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

环境:Hbuilder,夜神模拟器,APICloud开发工具。

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

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

图标:

第二、

1、进入APICloud官网,申请一个账号,进入APICloud,填写用户名,密码

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()方法中的内容,

代码:

<!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>

8、图片:

第三、

1、点击myFirstApp的工程右键,--云同步--》提交。

2、图片,其中mysendAPP就是自己上传的工程。

3、点击自己工程mysendAPP进入,点击云编译,这样自己的工程即可以打包成android,也可以打包成ios。

4、如果还与不懂的,留言。

5、如果看怎样用APICloud进行测试代码,查看我博客园-老牛大讲堂。

时间: 2024-10-25 03:04:01

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

微信小程序开发---博客园老牛大讲堂

最新搞了个微信小程序,一切东西都是从头学习.我简单的介绍一下开发中遇到的几个技术点和前提--------博客园老牛大讲堂 注意事项:1.小程序要认证,不认证将来就没办法让别人看到,别人就搜索不到. 2.不要用margin和pandding.因为用这些的话,容易横向屏幕溢出的情况 3.小程序的开发和angular类似,跟其他的都差的远. 第一,怎么做小程序的底部导航.----博客园老牛大讲堂 代码:在app.json文件里面添加代码,selectedIconPath是选中状态的图片,iconPat

H5移动开发底部导航-博客园老牛大讲堂

一.H5分类 网页开发,移动开发,移动混合开发, 二.所用知识点: APICloud:APICloud是为了开发APP的,所以如果用H5开发的移动端,需要发送短信,获取照相机等就要用APICloud的了. aui框架:aui框架就是专门开发移动端的框架. 三.怎样用H5开发移动端? 我建议如果用H5开发移动端,全都用H5网页开发.如果涉及到发送短信和照相等操作,再用APICoud开发. 1 <!doctype html> 2 <html> 3 4 <head> 5 &l

H5支持所有浏览器-博客园老牛大讲堂

只需要使用下面的模板就好了. 提醒:其中的注释一定不要删除. 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <!-- IE=ed

安卓开发笔记——打造属于自己的博客园APP(一)

最近事情比较多,博客更新又落下了,平时有个习惯,喜欢睡前看看博客园里博友的文章,但一直感觉APP市场上下载下来的博客园客户端用起来并不是很舒服,近来发现博客园也有对外开放的数据接口,所以打算自己写个博客园的客户端. 近来谷歌推出了一套全新的UI设计规范——Material Design,不清楚的朋友看看<Material design非官方中文指导手册>,相比之前谷歌在Android Holo风格上平平淡淡的表现不同,Material Design现在是被Google所比较重视的.在推出这门全

【原】博客园第三方客户端-i博客园App开源

[原]博客园第三方客户端-i博客园App开源 本文转载请注明出处 —— polobymulberry-博客园 1.前言 目前i博客园App已经更新到2.0.0版本了,使用了最新的博客园Web API.相比于第一个版本,添加了很多新的功能,也修改了很多功能.整体来说改动比较大,代码也比较混乱.所以趁着清明假期,把代码好好整理了一番.目前基本的架构已成型(当然,后期还需要不断优化),但App基本功能方面还有很多需要添加的,后面会集中把App功能完善. 上面简单介绍了下目前App的情况,回到开源的话题

能挣钱的微信JSSDK+H5混合开发

H5喊了那么久,有些人都说不实用,有些人却利用在微信中开发H5应用赚得盆满钵满.微信JSSDK + HTML 5,让移动Web开发与微信结合轻而易举!跨平台.零成本,让大众创业变得更方便. 我觉得现在大众创业就要从一个微信公众号开始,这个公众号可以有基本的1-3个功能,拿“悠泊停车”来说,刚开始就只有一个微信公众号,它代替了所有的Native APP功能,让“悠泊停车”迅速打开了市场,并拉来百万美元投资. 目前微信公众号开发已经遍地都是,但真正H5场景应用还少得可怜,大部分小企业都只有简单的菜单

博客园客户端(Universal App)开发随笔 – UAP 项目的发布

在费尽无数脑细胞开发出一款 App 并且通过测试,自我感觉良好的时候,我们一定希望我们的 App 能够尽快出现在商店的首页上,被人下载,使用,打分,评价,反馈,甚至是被无情地喷.但据本人经验,通常从项目打包好(打包的具体注意事项,请参见前文),到通过审核,其他用户在商店可以看到,往往都像新手第一次编译程序一样,一波三折,弹出不同的错误和警告,这个时候,只有耐下性子,一个一个问题都解决了,才能顺利通过审核.所以我觉得还是很有必要写点什么,讲一下 App 发布时的注意事项,省得大家多走弯路. 虽说开

安卓开发笔记——打造属于自己的博客园APP(四)

在上篇文章<安卓开发笔记——打造属于自己的博客园APP(三)>中,我们对博客文章的详情页和评论页进行了实现,慢慢的一个APP已经出现雏形了,当然这只是完成了"表面效果",要真正做好一个APP并不是一件很轻松的事情,有很多细节需要我们一点一滴的去完善. 好了,来讲下今天要完成的效果,在优化了之前部分代码的前提下,今天来说下关于博客搜索和博客详情页的实现,依旧国际惯例,来看下效果图:(动态图片比较大,加载需要点时间) 效果比较简单,很多东西我们还是可以复用之前的代码,毕竟这种列

博客园客户端(Universal App)开发随笔 – App也需要物流前的打包

想起来一个笑话:唐僧一行千辛万苦来到佛祖面前,准备取经,佛祖轻声问了一句:汝等带U盘了吗?师徒4人立刻昏倒在地.好吧,扯远了,不过是想告诉大家准备工作一定要到位. Universal App 的打包发布其实与传统的 Windows Phone / Windows Store App 项目并无太大不同,但是鉴于总有人会在这些步骤中遇到问题,而且即使是发布过几个应用的开发者也不例外,所以对这个看起来比较繁琐的过程做一个小结还是必要的. 打包前的准备工作 1. 修改编译模式 在调试程序时,我们通常会选