福寿康宁点击掌提式有线电话机物理重返键时,移动端支付比较

By admin in 4858美高梅 on 2019年4月14日

使用Cordova开发App时,点鼓掌提式有线电话机back键,总是回到上顶尖,如果希望平昔重返到桌面,而不是直接关闭程序,可以这样做!

乘机前端技术的腾飞,现在国内外都涌现出了很多运动使用混合开发框架。比如外国的
PhoneGap / Cordova, Ionic, Meteor, 微软收购的 Xamarin 和 国内的 MUI,
APICloud, WeX5, 以及新近Ali刚发布的 Weex 等等。

移步端支出如何选型?那里介绍一下自个儿眼中的ionic,react-native,native
二种运动端支出选型比较。欢迎大家补充指正!

一、应用场景

一.装置插件

当然这个框架各有特点,不过近年来可比早熟的缓解方案个人觉得依然 Ionic +
PhoneGap / Cordova。

一、 跨平台湾特务色

小编们在做cordova
app开发的时候,大概会时时境遇那种要求。比如在你的app中,你想打开叁个U宝马X3L,不过又不想跳转到系统的浏览器去开辟,而是希望直接在app中开拓,这一年将要用到那一个插件了。
它会直接在大家的app中生成二个浏览器对象并开拓你的网页。

率先在工程目录下运营如下命令添加backbutton插件

因为脚下 Cordova 是在 Apache
旗下,技术实力能够赢得保险,并且一度前进多年,有那几个的框架都配合Cordova,例如地方提到的 Ionic , Meteor 和 WeX伍 都能够使用 Cordova插件。在开发工具方面,微软已经在 Visual Studio 中追加了对 Cordova开发的帮助,JetBrains 的 WebStorm 也暗中同意能够付出 Cordova应用,那也是主张 科尔多瓦 前景的1种表现呢。

ionic: write once, run anywhere ( 贰回开发,处处运转)

贰、添加插件

cordova plugin add
cordova-plugin-backbutton 

本人也尝尝了一下 Cordova开发,在那之中当然免不了的要踩坑,所以在那边列出有个别当即可比胃痛的题材和体会来供大家参考:

不涉及到系统级的支出以来, 确实是贰次支付
随处运营,要是波及到系统级API调用以及项目配置(如 ios
plist文件)则需求本人手动编写cordova插件的不2秘诀完毕效果(如:注册文件的打开药格局),当然,网上也有十分大只怕找到可以安装的现成插件。

一.
若是你的档次是cordova原生项目,也正是说包蕴CordovaLib,可以通过命令去安装插件的,那你能够平昔进去项目上面,运转:

2.例子

  • 在应用第一方插件时,假若自行扩充了插件,在用命令行工具编写翻译时要接纳cordova compile 而不用用 cordova build 命令,因为 cordova build
    命令其实是 cordova prepare + cordova compile,而 cordova prepare
    命令做的正是基于插件中的 config.xml
    将插件文件复制到项目中,那样就会把您改改了的插件文件替换掉,所以壹旦只是想编写翻译项目,就只使用
    cordova compile 命令吧。

  • 插件中 Java 端重临启动结果给 JavaScript 代码:在用 JS
    代码调用原生代码的法子中,大家须要传入运营成功的回调函数和运维失败的回调函数,原生代码的周转结果便是经过那多少个函数来回到的。具体代码如下:

    // JS 调用 Java 代码。cordova.exec(successCallback, errorCallback, 'JavaClassName', 'functionName', args);// 在 Java 代码中,返回运行结果。void functionName(JSONArray data, CallbackContext callback) { if() { // 运行成功 callback.success('运行成功的返回结果'); } else { callback.error('运行失败的返回结果'); }} // 回调函数 var successCallback = function { // result 就是 '运行成功的返回结果'; }; 
    

react-native:Learn once, write anywhere ( 壹次学习,随地开发)

<pre style=”margin: 0px; padding: 0px; white-space: pre-wrap;
word-wrap: break-word; font-family: “Courier New” !important; font-size:
12px 4858美高梅,!important;”>  cordova plugin add
cordova-plugin-inappbrowser</pre>

在再次回到键的响应事件中调用插件的goHome方法

复杂的回来结果,推荐使用 JSONObject 来公司重回对象。

不关乎到与native混编的话, 统一js 进行开发 使用jsx 语法
确实能一鼓作气各端开发,可是急需针对iOS 和 android 开发两套代码。

如此inappbrowser插件就添加到我们的档次中了。

<!DOCTYPE html>

  • 在 Android 端的支付中,假诺想在插件的 Java 代码中来和 JavaScript
    代码交互,由于 Android 的 WebView
    是运维在主线程中,所以在运维进程中大概会时有发生隔阂难题。平日会有以下三种情形:

    • 若是当前你插件中的原生代码正在和 UI
      界面交互,或然您就巴望某些方法运维在 UI
      线程中,能够用下边包车型客车代码:

      cordova.getActivity().runOnUiThread(new Runnable() { @Override public void run() { // 你要执行的代码 }});
      
    • 若是当前您的插件代码未有和 UI
      举办互动,或然有耗费时间的操作希望能运转在单独线程中,能够应用下边包车型地铁代码:

      cordova.getThreadPool().execute(new Runnable() { @Override public void run() { // 你要执行的代码 }});
      
  • 在 Java 代码中只要想调用 js 方法,并且想要传递二个 Json 格式的数量到
    js 的法门,当 Json
    格式数据中带有引号时,借使不理会的话,很有不小可能率会促成数据传递错误。具体消除方式如下:

native:?!

二.借使您的品类是改变后的cordova项目,测度超过五成小卖部的cordova项目是改变后的。不得以一贯用命令安装,
这一年就要去手动添加那一个插件了。

<html>

各玩各的,不能够跨平台。

手动添加当然也很简短,可是你要求先取得这么些插件,你能够经过命令去建一个cordova原生项目(参考作者的另一篇文章:Cordova入门体系(1)创立项目)。创建好那几个项目大家就能够用命令添加inappbrowser插件了。参考上面步骤一。那样的话大家就获取到了这么些插件。

``<head>

 // 注意 %s 不要再加引号。 String format = "window.plugins.yourPlugin.function"; final String js = String.format(format, jsonData.toString; cordova.getActivity().runOnUiThread(new Runnable() { @Override public void run() { webView.loadUrl("javascript:" + js); } });

 // 然后在 js 端的解析调用: jsonStr = JSON.stringify; var obj = JSON.parse;

二、开发格局

继而大家要将那几个插件手动添加到我们的商户或协调的种类上边。大家有5处地点必要改:

``<title>hangge.com</title>

  • Android 中的 CallbackContext.success()
    方法暗许只会实行1回回调,尽管想经过叁个 CallbackContext
    重复发送回调结果就会破产。那时我们得以自定义 PluginResult
    对象,并调用 setKeepCallback; 方法保持 CallbackContext:

    PluginResult pluginResult = new PluginResult(PluginResult.Status.OK, value);pluginResult.setKeepCallback;mCallback.sendPluginResult(pluginResult);
    
  • 因为 Cordova 的开源性质和成品稳定,使得各种人都足以支付协调的
    Cordova 插件,那也就招致了日前的 Cordova插件品质长短不一。由此在接纳 Cordova 插件时肯定要擦亮眼睛 =
    =。在此地也讲一下自笔者用过的片段勉强能够的插件:

    • 第一,和硬件交互相关的场景,最棒使用 Cordova的合法插件,这一个插件都以经过了推行验证的,基本是不会有啥样太大的难点的,具体的插件列表能够去
      Apache 的 Github 主页搜索 cordova 关键字查看,也得以在此地查看
      Cordova 公布日志。
    • 推送功效由于具体国情,推荐选择国内本身的推送服务,而眼下国内唯有极光推送官方推出了
      Cordova 插件,照旧蛮好用的,有 issue
      消除的也一点也不慢,推荐使用。项目地址:
    • Github 上有位海外开发者开发了有的 Cordova插件,尽管尚未种种试用,不过看了下感到照旧写得没有错,推荐大家能够关心一下,Github
      地址:

ionic:html + angularjs + css

1).
打开我们创设的原生cordova项目(并且安装了inappbrowser插件)。将src上边包车型地铁org.apache.cordova.inappbrowser复制到我们同心同德的档次的src上面。

``<meta http-equiv=``"Content-type" content=``"text/html; charset=utf-8"``>

上边只是列出了一部分本身本身付出进度中相见的当下相比较胸闷的题材和部分认知,欢迎大家留言交换,笔者也会不定期更新1些新的难点。^
^

动用 html + angularjs
与网页开发近乎,系统级的调用由cordova插件化解,封装得11分好,不难易用,特殊情形的友善动手编写插件相比难,�一般未有索要手动编写代码插件的意况,�网上有相比多的插件可供下载安装,可用flexbox布局。

二).
将assets/www/plugins/cordova-plugin-inappbrowser,复制到大家自个儿项目下的assets/www/plugins/下边。

``<script type=``"text/javascript" charset=``"utf-8"福寿康宁点击掌提式有线电话机物理重返键时,移动端支付比较。 src=``"cordova.js"``></script>

react-native:js + css

3). 修改assets/www/cordova_plugins.js,添加对应的inappbrowser的消息。

``<script type=``"text/javascript" charset=``"utf-8"``>

普通UI全程js开发,部分场合下须要运用与native混合的方法,未有统一的UI组件,ios组件较多,android组件较少,各自编写js文件的意况较多,简单空间和逻辑层可共用,基本上iOS和android是两套代码,可用flexbox布局。

四). 修改res/xml/config.xml,添加对应的inappbrowser的<feature
/>消息。(三.4步能够参照你创立的尤其原生cordova项目上边这五个文件都以怎么着消息。)

``//页面加载后添加各事件监听

native:java + oc|swift

伍). 将res上边的财富图形,复制到我们协调的项目上面。

``function onLoad() {

iOS android 不一致语言开发 以及适配。

近些年做大家合营社的门类,使用那一个插件的时候,添加进去后(手动添加的,并不是通过命令添加的),效果没完成,InAppBrowser点击后会自动闪退。发现是出于能源图形没添加导致的。添加drawable/drawable-hdpi/…..下的图片(一个,next,
previous, remove)到对应的文件夹即可。

``document.addEventListener(``"deviceready"``, onDeviceReady, ``false``);

叁、功用支撑

  3、使用那些插件

``}

ionic:编写cordova插件,则能达到全体支持

接纳方法很简短,只须要在我们的js中经过window.open()可能cordova.inappbrowser.open()即可。

 

UI交互 由Web实现,系统级的并行 由 cordova达成,方今文件上传下载,url跳转以及文件打开药方式均已做验证可实现,cordova对系统级调用的帮忙相比较好,涵盖了多数连串机能,如摄像头,设备音讯,电池,网络等,不免除潜在不扶助的难题。

<pre style=”margin: 0px; padding: 0px; white-space: pre-wrap;
word-wrap: break-word; font-family: “Courier New” !important; font-size:
12px !important;”>  cordova.InAppBrowser.open(URL,target,options)
  window.open(URL,target,options)</pre>

``//Cordova加载完毕

react-native:与native 混编 可实现整个援救

  1. USportageL参数为浏览器跳转的地点;

  2. target的参数有二种:

``function onDeviceReady() {

android高级组件可能供给协调达成,系统级的功力可因此设置第2方插件大概与native混编的法门达成,基本上功能能一心落到实处

_self:假如UENCOREL地址在惠特eList中,则用Cordova的惠特eList将其打开;

``//监听返回键按钮事件

native:全部支撑

_blank:直接在App军长其地方打开;

``document.addEventListener(``"backbutton"``, eventBackButton, ``false``);

全盘能达成

_system:则是用手提式有线电话机默许浏览器将新页面打开;

``}

4、品质相比

  1. options参数包涵以下音信:

 

ionic:纵然质量一向是html5在活动端的最大题材,可是ionic已经做得不行不错了,在ios上基本上不能区分是不是是原生app

location:设置为yes或no来打开或关闭插件的locationbar;

``//返回键点击响应(主要)

不添加crosswalk插件 体验较差,添加 crosswalk 插件今后体验较好,可是app打包偏大。程序运转内部存款和储蓄器占用较大(网络数据相比同款产品,内部存款和储蓄器占用100+M)

hidden:设置为yes则加载出页面但不显得;设置为no则平常加载页面;

``function eventBackButton() {

react-native:接近原生品质

Android独有质量:

``//进入后台

js 到 native
必要经过两层桥接,品质与原生差异一点都不大(互联网数据相比较同款产品,内部存款和储蓄器占用50
M)

zoom:设置为yes则显示缩放浏览器页面的按钮,设置为no则不出示缩放按钮;

``navigator.Backbutton.goHome(``function``() {

native:开发者水平很重点

hardwareback:设置为yes则调用Android再次回到键回到前壹界面,设置为no则再次来到键为脱离浏览器页面;

``console.log(``'go home success'``);

品质最棒 (互联网数据相比较同款产品,内存占用30 +M)

iOS独有总体性:

``}, ``function``() {

5、优劣相比较

closebuttoncaption:设置yes则展现Done按钮,设置为no则隐藏Done按钮,点击Done按钮关闭浏览器页面;

``console.log(``'go home fail'``);

ionic

toolbar:设置为yes则展现toolbar;no则隐藏toolbar(toolabar相当于Android的再次回到键效能);

``});

优势:

keyboardDisplayRequiresUserAction:设置为yes大概no来控制打开键盘时是否由此JavaScript调用focus()接收宗旨,暗许为yes;

``}

ios 和 android
基本上能够共用代码,纯web思维,开发速度快,简单方便,三回编码,随地运转,如若熟习web开发,则开发难度较低。

toolbarposition:设置为top只怕bottom,使工具栏显示在窗口的顶部或尾巴部分;

 

文书档案很全,系统级援助封装较好,全体UI组件都是有html模拟,能够统一选取。

4、举个栗子

``</script>

可达成在线更新 允许加载动态加载web js

举个差不多的例证,假使在你的页面上有1个button,点击它会调用inappbrowser

``</head>

劣势:

<pre style=”margin: 0px; padding: 0px; white-space: pre-wrap;
word-wrap: break-word; font-family: “Courier New” !important; font-size:
12px !important;”><button
onclick=”cordova.InAppBrowser.open(”, ‘_blank’,
‘location=yes’)”> Test InAppBrowser </button></pre>

``<body onload=``"onLoad()"``>

质量相对较差,内部存款和储蓄器占用高,手写插件难度较大。

转自:http://www.cnblogs.com/lishuxue/p/6144134.html

``</body>

web技术不大概消除所非凡,对于相比较耗质量的地点无法运用native的沉思完毕优势互补,如高体验的并行,动画等。

</html>

react-native

3.总结

优势:

此例宜变通使用

1、固然无法不负众望1处编码随处运转,不过基本上正是是两套代码,也是1律的jsx语法,使用js实行付出。用户体验,高于html,开发作用较高
2、flexbox 布局 听新闻说比native的自适应布局进一步简明神速

cordova使用进度中坑照旧多多益善的,各位同学应踩坑,填坑,切不可遇坑则退,另推荐一个不利的UI框架Onsen
UI,很好的卓殊了Android和ios,并且能够圆满组合Angular.js,
React, Vue.js等风靡框架使用。

可完毕在线更新 20一5.7.2捌AppStore审核政策调整:允许运营于JavascriptCore的动态加载代码

道阻且长!!!!

更近乎原生开发

劣势:

1、(引)对开发职员须求较高,不是懂点web技术就行的,当官方封装的控件、api无法满足须要时
就必定需求懂1些native的事物去扩大,扩大性依然远远比不上web,也远远比不上直接写Native
code。 二、(引)官方说得很别扭:learn once, write
anywhere。人家可没说run
anywhere。事实上,从官方的api来看SliderIOS,SwitchIOS..等等这一个控件,之后势必会出现SliderAndroid,SwitchAndroid…,也正是很或者针对差别的阳台会要求写多套代码。
3、发展还不成熟,最近很多ui组件唯有ios的贯彻,android的内需自身完结。

(引)从Native到Web,要做过多概念转换,势必导致双方都要低头。比如web要用一套CSS的阉割版,Native通过css-layout获得最终样式再转换到native原生的表达格局(比如iOS的Constraint\origin\Center等属性),再比如卡通。此外,若Android和iOS都要做相同的包裹,概念转换就更扑朔迷离
5、文书档案还不够完整 学习曲线偏高

native

优势:

最棒的经验以及成效达成。

全面成熟的付出文书档案以及demo。

劣势:

android开发学习曲线较高。

次第平台分开开发 很难有iOS,android双阳台高手。

六、吐槽

ionic:

属性上比预想的协调,

app包比较大,究竟crosswalk 不是白加的。

环境搭建相比坑 项目新建以及安装android平台,build插件
都依赖互连网下载,互联网不佳要等哭

requirejs模块化,angularjs 学习曲线较高

ionic组件很好用 侧滑菜单,tabs组件现成的。

api调用轻松加开心。

温馨写插件要功底。

很期待ionic + anglarjs 贰.0
专门针对移动端的正式上线,然而angular2.0的新语法得弄哭一大波人

实际,ionic 还是能够做web应用,现在网址也能够协调做!

在线更新app 想不爱您都难。

livereload 格局,格外好用

react-native:

条件搭建被坑了两日,

可直接行使node_modules,很爽

合法demo jsx语法很不解 html js css 全都在一个文件之中。

文本上传下载
网上有插件,然而下载下来一看,功用不完全,没有显得进程音讯,怎么做?自个儿写与原生混编。

依赖facebook的框架,控件接口未有原生的增加,只提供了部分主干接口,估摸还在不停的换代完善。

扩充性不好,须求和原生混编
iOS,android都懂的话那作者还不比直接分手开发了,还不用重视facebook的框架,网上还有一大批开源好用的第2方库在等着我们。

react-native自带的调剂插件把本人惊呆了,很不错,很正式

如出壹辙的livereload ,在线更新没切磋,应该也支撑呢。

非web 非native 夹在中等很痛苦 !

上学依旧要资金的!

native:

布局适配也是体力活

再者领悟android 和 iOS �的是 【真·大咖】!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有