H5开发HybridApp

1 H5开发

开发HybridApp一般都是先完成H5部分,所谓的H5就是Html5页面,开发的时候我们在PC机上的浏览器调试即可,这里推荐Chrome F12模式。

在调试服务器请求数据部分要给chrome设置跨域模式,如下:

然后以管理员的身份启动chrome:

开发H5,建议使用HBuilder,开发速度很快

接下来安装cordova,本地需要已安装nodejs,确保可以正常使用npm命令。因为npm默认链接的是国外的源,所以如果网络不给力的话要切换成国内的源,比如淘宝的npm,具体如何切换,请百度。

2 安装cordova

Cordova创建项目官方文档

http://cordova.apache.org/docs/en/latest/guide/cli/index.html

3 创建项目

进入项目

添加平台

查看已添加的平台

4 添加插件

http://cordova.apache.org/docs/en/latest/guide/cli/index.html#link-add-plugin-features

设备基本信息插件

网络模块

电池状态

加速度计模块

罗盘模块

定位模块

相机模块

文件管理模块

弹出框

重力感应

通讯录接口

国际化

启动页

内置浏览器

日志模块

查看已安装插件

如果要移除插件

cordova plugin rm XXX

5 插件调用

http://cordova.apache.org/docs/en/latest/cordova/plugins/pluginapis.html

6 项目导入

以Android为例,IOS更简单,直接双击.xcodeproj即可在xcode里面打开项目

Eclipse > Import> Existing Android Code Into Workspace >

项目导入之后如下:

7 H5集成

接下来我们把上面开发好的H5导入到工程里面来,导入H5部分需要注意,有两种方式,第一种也是官方文档使用的方式,即直接把H5内容复制到platform_www下面,然后通过cordova update 命令来同时更新到多个平台。

但是cordova update这种方式有个缺点就是通过这种全面覆盖的方式就无法保留不同平台之间H5代码的差异性,所以尤其是项目后期,不建议采用这种方式来操作。

另外一种方式是直接复制H5代码到不同平台下,分别调试:

设置首页

打开MainActivity.java

IOS是直接在config.xml里面配置即可。

引入cordova.js

H5页面引入cordova.js

APP图标和启动页

8 APP打包

接下来就可以直接Run As 运行打包了,如果有连着android手机,可以直接在手机上查看效果。

如果无法连接真机调试,可以打包成apk后另行安装:

右键项目>Android Tools>Export Signed Application package… 或者 Export UnSigned Application package… ,如果有签名文件就选Signed,反之UnSigned。

9 自定义插件

开头部分已经提到插件这个词,插件就是cordova封装了一套通过js来访问硬件设备的接口,那如果我们要自己实现一个插件该怎么做,可以查看官方文档,按照cordova的规范来编写:

http://cordova.apache.org/docs/en/latest/guide/hybrid/plugins/index.html

这里举个简单的例子,比如我们要开发个Toast,众所周知Toast这种效果一般要通过android的Toast.makeText()方法来实现,那我们怎么通过js来调用这个原生的方法呢,步骤如下:

1) 创建原生实现类ToastPlugin.java

实现如下:

2) 创建js实现类ToastPlugin.js

实现如下:

3) 配置路由res/xml/config.xml

4) 调用

接下来就可以在html页面通过toast(“XXX”);这种方式来调用了。

Ios插件的实现步骤跟android大概一致,只是ToastPlugin.java ios对应的要用原生Object-c去实现。

完。

时间: 2024-12-18 03:08:28

H5开发HybridApp的相关文章

移动端 h5开发相关内容总结——CSS篇

移动端 h5开发相关内容总结——CSS篇 标签: css移动 2016-01-06 15:59 5536人阅读 评论(3) 收藏 举报  分类: HTML+CSS(17)  版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 1.移动端开发视窗口的添加 h5端开发下面这段话是必须配置的 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=n

浅谈无线h5开发

最近一直在做h5的项目,对h5开发有了一定的理解.首先h5开发并不是指的html5的开发,而是指无线端的web开发,至于为什么叫h5开发,我觉得一方面是因为html5近几年还是挺受关注,另一方面h5在无线端有比较好的支持. 大概从去年开始,好多人提出了pc已死的说法.其实比不是pc变弱了,反而是用户在不断增长.至于说pc已死,是因为无线实在是增长的太快了,就拿淘宝双十一的成交量来看,大部分的流量已经转向了无线.所以作为一名前端工程师,h5几乎已经成为必会技能. h5 vs pc 首先来对比一下h

移动H5开发入门知识,CSS的单位汇总与用法

说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid app的开发,都用到了css3技术,在css3中,新增了许多单位,rem.vw和vh.vmin和vmax.ch和ex等等,那现在对这些单位分别做一下详细的介绍吧. 1.em 做前端的应该对em不陌生,不是什么罕见的单位,是相对单位,参考物是父元素的font-size,具有继承的特点.如果字体大小是16

带你使用h5开发移动端小游戏

带你使用h5开发移动端小游戏 在JY1.x版本中,你要做一个pc端的小游戏,会非常的简单,包括说,你要在低版本的浏览器IE8中,也不会出现明显的卡顿现象,你只需要关心游戏的逻辑就行了,比较适合逻辑较为简单的小游戏,在JY官网也写了很多的小游戏demo,但后来由于工作的缘因,一直没太去维护他,真是一转眼,已经是移动互联网的时代了,5年后的今天,有了重新构思JY框架的冲动,于是全新的JY2.0开始构建了.它将只适用于h5的移动端游戏开发,它将更多的去关注更复杂的js游戏,不在局限于红白机时代. 在使

H5开发获取微信系统的地址列表

前段时间做了H5开发的项目,需要是要把微信系统自带的地址也给添加进来,意识也就是说用户可以选择项目的地址和微信自带的地址  效果图是这样的: 对就是这个需求 下面给出H5 页面下的微信添加HTML 然后就是JS 获取微信地址:        1.先是微信权限验证           再就是添加微信地址   // 添加微信地址 function addWechatAddress(options){ var postalCode = +options.postalCode; var province

移动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提供了一组设备相关的

用H5开发微信还是开发APP?

用H5开发微信还是开发APP? 随着技术的飞速发展,HTML第五版技术标准的更新,在移动端,由于其相对较低的开发成本及强大的跨平台运行能力,越来越多的信息型产品也开始选择这样轻量级的H5页面进行快速迭代,同时借用微信等平台快速触达用户. 如今App的红利时期早己消失殆尽,大家下载应用的热情已经不再像刚开始那么火热,再加上那么多烧钱BAT产品大佬培养的用户习惯,没点补贴很难吸引用户.直接在应用市场推App的成本也很高,这时web的优势就体现出来了,它很轻,迭代还快,而且现在有微信这么好的入口.坐拥

H5公共样式,用于所有H5开发页面

@charset "UTF-8"; /* H5公共样式,用于所有H5开发页面*/ html { font-family: "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body

H5开发基础之像素、分辨率、DPI、PPI

H5开发基础之像素.分辨率.DPI.PPI  html5 阅读约 4 分钟 ?2016-09-03于坝上草原 背景知识: 目前绝大部分显示器都是基于点阵的,通过一系列的小点排成一个大矩形,通过每个小点显示不同的颜色来形成图像,我们把每个小点称为一个像素 (pixel). 概念点: 1. Dot:物理属性的一个点,打印机或屏幕通过这些点把图片print出来.一块屏幕的Dot的点是固定的.对于一台具体的显示器,多个点(dots)排列起来之后,构成的一个整体的宽度和高度,我们称之为显示器的“物理尺寸