Android H5混合开发（2）：自定义Cordova插件

【Android H5混合开发（2）：自定义Cordova插件】的更多相关文章

Android H5混合开发（2）：自定义Cordova插件

前言 Cordova虽然定义了很多基础的插件,供H5端使用原生设备的功能. 但是,如果业务相关的功能,需要提供给H5端使用,那么,就需要我们自定义插件了. 这个"自定义"不是指由Android端任意定义,一般需要各端(H5.原生)讨论来决定,如:插件的名称.action等. 模拟需求插件信息: 插件名称:MyPlugin 插件id: com.test.MyPlugin 插件版本:1.0.0 action: aaa 插件交互方式:当h5调用时,原生toast弹出h5传入的数据,并返回响…

Android H5混合开发（1）：构建Cordova 项目

Cordova是什么 Apache Cordova是一个开源的移动开发框架.允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 以移动平台为例,安卓.IOS平台设备的常用功能,被Apache封装成一个个插件,如摄像头.传感器.网络.数据等.H5端通过调用插件,即可使用设备的这些功能.而项目具体的业务功能,也可封装成自定义的插件,供H5端调用,如:App端分享功能.支付功能.扫码.定位.自定义键盘等. Cordova提供了完整的机制,使得H5.安卓.IOS等平台混合…

Android H5混合开发（3）：原生Android项目里嵌入Cordova

前言如果安卓项目已经存在了,那么如何使用Cordova做混合开发? 方案1(适用于插件会持续增加或变化的项目): 新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平台(我们的安卓项目需要做目录结构.配置等很多内容调整),后续开发中,可通过命令在Codova项目中统一快速添加插件,进行原生与H5通信. 方案2(适用于插件较稳定的项目): 新建Cordova项目并添加Android平台,添加相关插件,将Android平台下H5代码.插件相关的内容导入到我们的项目中…

Android H5混合开发（4）：构建Cordova Jar包

前言上一节,介绍了原生项目如何嵌入Cordova,我们对Cordova的依赖使用的是CordovaLib Module,这也是安卓项目常用的方式. 但是,也有项目希望以Jar包的方式依赖Cordova,原因很多:怕暴露的源码被程序员误改.源码不便于公司内部私服仓库管理.替换版本麻烦.或其他. 分析 Cordova官方从2.3.0版本后已不再提供Jar包,而是直接提供源码. 那么,针对原生项目嵌入Cordova,官方提供了哪些指导文档呢? https://cordova.apache.org/d…

Android H5混合开发（5）：封装Cordova View, 让Fragment、弹框、Activity自由使用Cordova

近期,有同事咨询如何在Fragment中使用Cordova,看了下Cordova源码,官方并没有提供包含Cordova Webview的Fragment,以供我们继承. 上网查询了一下,也有几篇文章讲解Fragment中如何使用Cordova,不过Cordova逻辑与Fragment逻辑耦合太深,不太适用于常规项目开发. 通过分析CordovaActivity的源码实现,我们只需要将Cordova封装成自定义View就可以了.后面的演示,咱们还是基于之前的工程吧,代码会在后面分享给大家的. Co…

移动端H5混合开发设置复盘与总结

此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了,用户可以通过手机端嵌入的h5网页进行场布设置,原来只能在pc端浏览器,还得带上个笔记本电脑很是不方便,这个功能很好的解决了目前设置不顺畅的问题.上线后得到大家的认可,提升了业务效率,这一个多月的辛苦开发还是值得的,接下来是对自己这一段时间开发过程的一个总结. 整体开发基于H5+Css3+Jquery…

Android + HTML5 混合开发

摘要: 对于 Android + HTML5 混合开发以下的观点仅仅是我的个人观点,如果有什么不对的地方请指正简介: 混合开发的 App(Android + HTML5)就是在一个 App 中内嵌一个轻量级的浏览器(WebView),一部分原生的功能改为 HTML5 来开发,这部分功能不仅能够在不升级 App 的情况下动态更新,而且可以在 Android 或 iOS 的 App 上同时运行,让用户的体验更好又可以节省开发的资源. ##成品 APP: 超星慕课(一款包含 Java 和 C# 学习…

自定义 Cordova插件（基础篇）

cordova自定义插件注意:存放自定义cordova插件目录不能有空格可能会报错 cordova的安装下载node.js,安装完成后你可以在命令行中使用node和npm. 安装cordova使用node.js的npm工具.打开控制台输入 npm install -g cordova -g是全局安装cordova.安装完成后就可以在命令行使用cordova命令. 安装plugman cordova需要用plugman来创建自定义插件命令:npm install -g plugman 用co…

自定义Cordova插件（基础篇）

cordova自定义插件注意:存放自定义cordova插件目录不能有空格可能会报错 cordova的安装下载node.js,安装完成后你可以在命令行中使用node和npm. 安装cordova使用node.js的npm工具.打开控制台输入 npm install -g cordova -g是全局安装cordova.安装完成后就可以在命令行使用cordova命令. 安装plugman cordova需要用plugman来创建自定义插件命令:npm install -g plugman 用co…

H5混合开发问题总结

1.This application is modifying the autolayout engine from a background thread, which can lead to engine corruption and weird crashes. This will cause an exception in a future release. 程序运行时会出现这个打印,说明有个操作涉及到UI主界面,需要将此操作放入主线程中去完成.调试方法:打个全程断点,运行等待断点进去…

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

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

移动web、webApp、混合APP、原生APP、androd H5混合开发当无网络下，android怎么加载H5界面

PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry等智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以调用. Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等. ASP.NET…

自定义 Cordova插件详解

一.Cordova的基础点在混合式应用中,我们通过现有的Cordova插件,可以轻松的在 H5 上调用手机native的功能.现有的Cordova插件能满足平时大部分的开发需求,然而,有时候找不到合适的插件.或对找到的插件有不满意的地方,那就要动手去做或改写一个插件,这时候就要了解一些Cordova插件的相关知识. 那Cordova插件的基础要点是什么呢?其实就是把原生代码调用方法映射为js的统一接口,供H5使用而已. Cordova 自定义插件的官方文档二.观察现有应用结构打开任意一个基…

自定义Cordova插件详解

一.Cordova的基础点在混合式应用中,我们通过现有的Cordova插件,可以轻松的在 H5 上调用手机native的功能.现有的Cordova插件能满足平时大部分的开发需求,然而,有时候找不到合适的插件.或对找到的插件有不满意的地方,那就要动手去做或改写一个插件,这时候就要了解一些Cordova插件的相关知识. 那Cordova插件的基础要点是什么呢?其实就是把原生代码调用方法映射为js的统一接口,供H5使用而已. Cordova 自定义插件的官方文档二.观察现有应用结构打开任意一个基…

H5混合开发二维码扫描以及调用本地摄像头

今天主管给了我个需求,说要用混合开发,用H5调用本地摄像头进行扫描二维码,我之前有做过原生安卓的二维码扫一扫,主要是通过调用zxing插件进行操作的,其中还弄了个闪光灯.但是纯H5的没接触过,心里没底,于是晚上回家开始网上各处找方案.以下是我对于H5扫描二维码以及调用本地摄像头的理解以及代码.科普网址:H5如何生成安卓组件对象H5调用安卓本地摄像头api在线二维码图片生成器二维码扫描:(使用的是mui的框架,下面是html代码) <!doctype html> <html> &l…

开发原生安卓cordova插件（有原生界面）

上文开发的插件没有调用原生界面,本文介绍开发带有activity的插件本文很多操作与上文重复,重复部分会省略首先打开plug1,先开发插件的原生代码在以下命名空间创建一个activity 名称为Act1Activity 添加成功后,修改此文件内容如下: package com.cesc.ewater.cordovaPlugin; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; impor…

开发原生安卓cordova插件（基础）

cordova应用如果需要调用原生安卓接口,方法是使用cordova插件,cordova官方提供了主流原生功能的插件,但如果还不能满足需求,也可以自己开发cordova插件以下介绍开发一个最简单的插件,功能是调用原生的toast弹出信息首先先用as创建新工程,用于编写插件的代码 PS:开发cordova插件其中一个坑是没有一个好的编写代码环境,甚至插件的所有类文件都要手动添加到配置文件,这点后面会有体验项目名叫plug1,包(package)名要倒着写默认添加empry activity…

Cordova入门系列（四）自定义Cordova插件--showToast

前三篇Cordova入门系列,简单讲解了Cordova,以及如何调用Cordova插件,今天我们讲解一下如何自己做一个插件. 自定义插件,就是自己写一些安卓java代码,然后和js代码以及配置文件,封装成一个cordova插件.通过js代码,调用安卓java代码,从而实现调用原生的东西.只不过这些调用原生的行为是我们为了我们自己特定的需求写的,而不是Cordova官方的... 自定义插件的结构: |---pluginName |---src |--…

H5混合开发app常用代码

1.Android与H5互调可以让我们的实现混合开发,至于混合开发就是在一个App中内嵌一个轻量级的浏览器(高性能webkit内核浏览器),一部分原生的功能改为Html 5来开发.然后这个浏览器又封装了一个WebView控件((网络视图))来加载显示网页,展现html页面.需要注意的是,当H5内嵌在app里面的时候,app那边有很高的权限来控制H5页面上的操作,比如app可以直接调用html里面的函数方法,可以禁止本地存储localStorage和cookie!!从而使H5页面使H5上用的相应功…

ios&h5混合开发项目仿app页面跳转优化

前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段,我们的项目主要页面都是由网页做的,只有一些IM.支付.分享.推送.上传照片这些用的是原生功能,大家都知道ios原生app的体验一直是很好的,现在改成了混合开发,无疑中就有些舍弃了ios原生的用户体验,而这个作为一个向来以用户体验为先的开发人员来说,这个真的是难以忍受,所以开始了以优化用户体验的为目…

移动端H5混合开发，Touch触控，拖拽，长按, 滑屏实现方案

概述近期由于产品快速原型开发的需要,不想用原声的方式开发App两端一起搞时间来不及,目前产品处于大量上feature的阶段,采用混合开发是最合适的选择,所以花了3天的时间研究怎么去实现移动端,拖拽,长按,读取手机相册并做本地预览. 想要实现的效果就是: 上传一张图片作为背景图片,能够在图片位置上打点相当于打tag 在手机屏幕上长按在事件发生的中心位置创建一个tag 这个tag能够响应touch事件实现上下左右位置的移动核心问题点: 手机端的触控实现方案实现,view移动时要动态改变元素的to…

H5混合开发进阶

混合开发: 原生app里面,IOS 安卓的原生app里面,嵌套h5界面. 通过原生app里的一个webView盒子进行交互.webView是原生app内置的一个XXX,里面可以放置h5界面.可以相互调用方法. 从app内部点进来到h5界面,首先判断是否登录. 第一步:判断是什么端 let isios = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端第二步: 判断是否登录前端规定方法名,然后调用…

H5混合开发中android终端和ios终端常见的兼容问题1

转自 https://blog.csdn.net/xuehu837769474/article/details/80603898 1.安卓浏览器看背景图片,有些设备会模糊. 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960640分辨率,在网页里只显示了480320,这样devicePixelRatio＝2.现在android比…

Android原生和H5交互；Android和H5混合开发；WebView点击H5界面跳转到Android原生界面。

当时业务的需求是这样的,H5有一个活动商品列表的界面,IOS和Android共用这一个界面,点击商品可以跳转到Android原生的商品详情界面并传递商品ID: 大概就是点击H5界面跳转到Android原生界面: 好了,需求已经分析完毕了,Android只需要获取H5的点击事件和传递的参数: 来,上代码: /启用支持javascript WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true…

cordova 使用H5混合开发APP

cordova 中文官网 http://cordova.axuer.com/docs/zh-cn/latest/…

H5混合开发中android终端和ios终端常见的兼容问题2

转自 https://www.cnblogs.com/stoneniqiu/p/6077112.html 1.ios键盘挡住输入框. setInterval(function () { if (document.activeElement.className.indexOf('inputcontent') >= 0) { document.activeElement.scrollIntoViewIfNeeded(); } }, 300); inputcontent为输入框的样式.activeEl…

开发自己的cordova插件

如果还没有配置过cordova环境,首先要下载nodejs,(下载地址https://nodejs.org/)下载完毕安装. 控制台: 1.输入npm -v 确定是否装上了 2.输入sudo npm install -g cordova安装cordova 3.等待几分钟,输入cordova -v查看是否安装成功 4.输入sudo npm install -g ionic 安装ionic 到这里cordova环境已经配置完毕.接下来我们来创建一个工程控制台输入 ionic start testD…

Android设置选项开发及自定义Preference样式

一个完整的Android应用程序都应该提供选项(或者叫偏好设置等等)让用户对APP的表现形式能够进行设置,比如说是否加入用户体验计划,或者是否自动升级.定时提醒.开启自启动.后台运行等等.提供一个好的设置项,会大大提升APP的用户体验.为了完成这样的功能,你不必从头开始写Activity或者Fragment,因为Android已经提供了实现这个功能的API,并且会自动将用户设置以键值对的形式存入SharedPreference(Android的四大存储方式之一)中.在3.0以前的系统,使用Pre…

jmeter 二次开发---实现自定义函数插件

1.前提: 有时候,Jmeter自带的函数,可能不能满足于业务的需求,这时候,我们可以自己写一个函数插件: 2.创建maven工程一直next,输入GroupID,ArtifactId->finsh 3.编辑pom.xml 创建好maven工程后,引入Jmeter的jar包,注意你本地Jmeter版本是几,这里<version></version>就写几 <dependency> <groupId>org.apache.jmeter</grou…

H5混合开发进阶之inspect调试

h5界面嵌套在原生app内部的时候,需要调用原生的方法,传递数据.中间难以调试代码,. 用google的 inspect调试.查看数据的传输方式. 1.adb连接正常,打开手机USB调试 2.第一次使用的时候一定要保证FQ!FQ!FQ (不懂的可以问我) 3.谷歌浏览器中打开chrome://inspect/#devices 4.打开APP,刷新谷歌inspect 熟悉的console.log出来啦. 哈哈. 手机上操作app 就跟电脑上显示的一样了.然后就可以跟一般的h5界面一样调试了. 在控…