精华内容
下载资源
问答
  • App混合开发

    2019-09-13 06:01:48
    混合开发App(Hybrid App)就是在一个App中内嵌一个轻量级的浏览器,一部分原生的功能改为Html 5来开发,这部分功能不仅能够在不升级App的情况下动态更新,而且可以在Android或iOS的App上同时运行,让用户的体验更...

    混合开发的App(Hybrid App)就是在一个App中内嵌一个轻量级的浏览器,一部分原生的功能改为Html 5来开发,这部分功能不仅能够在不升级App的情况下动态更新,而且可以在Android或iOS的App上同时运行,让用户的体验更好又可以节省开发的资源。

    下面来谈谈Hybrid App开发中的技术问题。iOS方面的我不太了解,我就主要谈谈Android开发中的,其中可能会有很多说错的,请大家轻喷

    Hybrid开发中关键问题是什么

    想要在一个App中显示一个Html 5网页的功能,其实很简单,只要一个WebView就可以了。你可以点击链接来跳转网页。像这样的功能就能叫做Hybrid 开发了嘛?显然不是的。

    我觉得一个Hybrid开发的App中必须要要有的功能就是Html 5页面和Native App怎么进行交互。比如,我点了一个Html 5页面上的一个按钮或链接,我能不能够跳转到Native App的某个页面;比如我点了Html 5页面上的分享按钮,我能不能调用Native App的分享功能;比如Html加载的时候能不能获取Native App的用户信息等等。

    看下图,在网易云音乐中进入这个Html 5页面时,你点击作者:空虚小编你会进入他的主页,这个主页是Native页面,而你点击上面那个播放按钮时,云音乐会启动Native的播放界面播放音乐,你点击评论时,你会进入Native的评论页

    Html 5和Native的交互

    WebView本来就支持js和Java相互调用,你只需要开启WebView的JavaScript脚本执行,然后通过代码mWebView.addJavascriptInterface(new JsBridge(), "bxbxbai");向Html 5页面时注入一个Java对象,然后就可以在Html 5页面中调用Native的功能了

    微信怎么做的

    微信应该是Hybrid 开发做的最好的App之一,它是怎么做交互的呢?

    答案就是微信JS-SDK,去微信开发者文档中可以看到,微信JS-SDK封装了各种微信的功能,比如分享到朋友圈,图像接口,音频接口,支付接口地理位置接口等等。开发者只需要调用微信JS-SDK中的函数,然后统一由JS-SDK来调用微信中的功能,这样好处就是我写了一个Html 5的应用或网页,在Android和iOS的微信中都可以正常运行了

    下面会详细讲到

    网易云音乐怎么做的

    那么网易云音乐是怎么做的呢?我用黑科技知道了上图云音乐的界面Activity是CommonSubjectActivity(名字好奇怪,如果要我从代码里找,我肯定找不到,因为还有一个类叫做EmbedBrowserActivity),我就在反编译后的云音乐代码中找相应的功能实现代码,实在没找到。不过我拿到了那个Html 5页面的地址:http://music.163.com/m/topic/194001

    用Chrome打开后发现和App中显示的不一样,然后我用Charles截了进入那个Html 5的请求,发现云音乐加载的地址是http://music.163.com/m/topic/194001?type=android ,就是加了手机系统类型

    然后在我自己的App中加载这个Html 5页面就可以看到下图,@小比比说这样的文字是可以点击跳转到个人,点击播放按钮是可以播放音乐的

    从Html源代码中可以看到如下信息:

    也就是说,当我点击一个用户名的时候就请求跳转到orpheus://user/30868859,因为WebView可以拦截跳转的url,所以App在拦截每一个url,如果host是orpheus的话就启动用户首页

    反编译代码后,在云音乐的代码中找到了this.mWebView.setWebViewClient(new cf(this));这么一句代码,进入cf类,发现下面代码:

    public boolean shouldOverrideUrlLoading(WebView webView, String url) { if (url.startsWith("orpheus://")) {
            RedirectActivity.a(this.activity, url);
            return true;
        } if ((url.toLowerCase().startsWith("http://")) || (url.toLowerCase().startsWith("https://"))) {
            return false;
        }
        try {
            this.activity.startActivity(new Intent("android.intent.action.VIEW", Uri.parse(url)));
            return true;
        } catch (ActivityNotFoundException localActivityNotFoundException) {
            localActivityNotFoundException.printStackTrace();
        }
        return true;
    }

    果然如此,再进入RedirectActivity,这是一个没有任何界面的Activity,专门用于处理页面跳转信息,它会调用一个方法NeteaseMusicUtils.redirect(this, getIntent().getData().toString(), false)来处理url,redirect方法的名字是我自己写的,部分代码如下:

    可以看到orpheus://user/30868859中的用户id被传入了ProfileAcvitiy,因此启动了用户首页显示了用户信息

    然后我自己写了代码拦截Html 5的跳转,打印出的Log如下:

    可以看到Html 5页面可以跳转到各种页面,比如用户首页、播放音乐、MV界面、评论页、电台节目等等

    总结

    一般来讲,也是我目前知道的两种主流的方式就是

    js调用Native中的代码 Schema:WebView拦截页面跳转

    第2种方式实现起来很简单,但是一个致命的问题就是这种交互方式是单向的,Html 5无法实现回调。像云音乐App中这种点击跳转到具体页面的功能,Schema的方式确实可以简单实现,而且也非常适合。如果需求变得复杂,假如Html 5需要获取Native App中的用户信息,那么最好使用js调用的方式。

    js和Native进行交互

    上面讲到WebViewbe本身就是支持js调用Native代码的,不过WebView的这个功能在Android 4.2(API 17)一下存在高危的漏洞。这个漏洞的原理就是Android系统通过WebView.addJavascriptInterface(Object o, String interface)方法注册可供js调用的Java对象,但是系统并没有对注册的Java对象方法调用做限制。导致攻击者可以利用反射调用未注册的其他任何Java对象,攻击者可以根据客户端的能力做任何事情。这篇文章详细的介绍了这个漏洞

    出于安全考虑,Android 4.2以后的系统规定允许被js调用的Java方法必须以@JavascriptInterface进行注解

    Cordova的解决方案

    Cordova是一个广泛使用的Hybrid开发框架,它提供了一套js和Native交互规范

    在Cordova的SystemWebViewEngine类中可以看到

    private static void exposeJsInterface(WebView webView, CordovaBridge bridge) { if ((Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR1)) {
            Log.i(TAG, "Disabled addJavascriptInterface() bridge since Android version is old."); // Bug being that Java Strings do not get converted to JS strings automatically. // This isn't hard to work-around on the JS side, but it's easier to just // use the prompt bridge instead. return;
        }
        webView.addJavascriptInterface(new SystemExposedJsApi(bridge), "_cordovaNative");
    }

    因此当Android系统高于4.2时,Cordova还是使用addJavascriptInterface这种方式,因为这个方法在高版本上安全而且简单,低于4.2的时候,用什么方法呢?

    答案是WebChromeClient.onJsPrompt方法

    WebView可以设置一个WebChromeClient对象,它可以处理js的3个方法

    onJsAlert onJsConfirm onJsPrompt

    这3个方法分别对应js的alert、confirm、prompt方法,因为只有prompt接收返回值,所以js调用一个Native方法后可以等待Native返回一个参数。下面是cordova.js中的一段代码:

    /**
    * Implements the API of ExposedJsApi.java, but uses prompt() to communicate.
    * This is used pre-JellyBean, where addJavascriptInterface() is disabled.
    */ module.exports = {
        exec: function(bridgeSecret, service, action, callbackId, argsJson) { return prompt(argsJson, 'gap:'+JSON.stringify([bridgeSecret, service, action, callbackId]));
        },
        setNativeToJsBridgeMode: function(bridgeSecret, value) {
            prompt(value, 'gap_bridge_mode:' + bridgeSecret);
        },
        retrieveJsMessages: function(bridgeSecret, fromOnlineEvent) { return prompt(+fromOnlineEvent, 'gap_poll:' + bridgeSecret);
        }
    };

    然后只要在onJsPrompt方法中使用CordovaBridge来处理js的prompt调用

    /**
     * Tell the client to display a prompt dialog to the user. If the client returns true, WebView will assume that the client will handle the prompt dialog and call the appropriate JsPromptResult method.
     * <p/>
     * Since we are hacking prompts for our own purposes, we should not be using them for this purpose, perhaps we should hack console.log to do this instead!
     */
    @Override public boolean onJsPrompt(WebView view, String origin, String message, String defaultValue, final JsPromptResult result) {
        // Unlike the @JavascriptInterface bridge, this method is always called on the UI thread. String handledRet = parentEngine.bridge.promptOnJsPrompt(origin, message, defaultValue); if (handledRet != null) { result.confirm(handledRet);
        } else {
            dialogsHelper.showPrompt(message, defaultValue, new CordovaDialogsHelper.Result() {
                @Override public void gotResult(boolean success, String value) { if (success) { result.confirm(value);
                    } else { result.cancel();
                    }
                }
            });
        } return true;
    }

    一种开源的解决方案

    Cordova是Apache的一个开源解决方案,不过它需要xml配置CordovaPlugin信息,使用会比较麻烦,而且这个框架很重,具体请自行搜索Cordova使用教程

    下面这个开源项目是我个人觉得比较合理的解决方案,也比较轻量级,下图就是一个Demo

    https://github.com/pedant/safe-java-js-webview-bridge

    这个项目的原理就是使用WebChromeClient.onJsPrompt方法来进行交互,本质上都是js调用prompt函数,传输一些参数,onJsPrompt方法拦截到prompt动作,然后解析数据,最后调用相应的Native方法

    HostJsScope类中定义了所有可以被js调用的方法,这些方法都必须是静态方法,并且所有的方法第一个参数必须是WebView

    /**
    * HostJsScope中需要被JS调用的函数,必须定义成public static,且必须包含WebView这个参数
    */ public class HostJsScope { /**
        * 短暂气泡提醒
        * @param webView 浏览器
        * @param message 提示信息
        * */ public static void toast(WebView webView, String message) {
            Toast.makeText(webView.getContext(), message, Toast.LENGTH_SHORT).show();
        } /**
        * 系统弹出提示框
        * @param webView 浏览器
        * @param message 提示信息
        * */ public static void alert(WebView webView, String message) { // 构建一个Builder来显示网页中的alert对话框 AlertDialog.Builder builder = new AlertDialog.Builder(webView.getContext());
            builder.setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) {
                    dialog.dismiss();
                }
            });
            builder.setTitle("Hello world")
                .setMessage(message)
                .setCancelable(false)
                .create()
                .show();
        } // 其他代码 }

    上面代码列举了最基本的点击Html 5按钮弹出对话框的功能

    这个库中一个最关键的叫做JsCallJava,这个实现的就是js来调用Java方法的功能,这个类只用于InjectedWebChromeClient类

    public class InjectedChromeClient extends WebChromeClient {
    
        private JsCallJava mJsCallJava;
        private boolean mIsInjectedJS;
    
        public InjectedChromeClient(String injectedName, Class injectedCls) {
            this(new JsCallJava(injectedName, injectedCls));
        }
    
        public InjectedChromeClient(JsCallJava jsCallJava) {
            mJsCallJava = jsCallJava;
        }
    
        // 处理Alert事件
        @Override public boolean onJsAlert(WebView view, String url, String message, final JsResult result) { result.confirm(); return true;
        }
    
        @Override public void onProgressChanged(WebView view, int newProgress) {
            //为什么要在这里注入JS //1 OnPageStarted中注入有可能全局注入不成功,导致页面脚本上所有接口任何时候都不可用
            //2 OnPageFinished中注入,虽然最后都会全局注入成功,但是完成时间有可能太晚,当页面在初始化调用接口函数时会等待时间过长
            //3 在进度变化时注入,刚好可以在上面两个问题中得到一个折中处理
            //为什么是进度大于25%才进行注入,因为从测试看来只有进度大于这个数字页面才真正得到框架刷新加载,保证100%注入成功 if (newProgress <= 25) {
                mIsInjectedJS = false;
            } else if (!mIsInjectedJS) {
                view.loadUrl(mJsCallJava.getPreloadInterfaceJS());
                mIsInjectedJS = true; StopWatch.log(" inject js interface completely on progress " + newProgress);
            }
            super.onProgressChanged(view, newProgress);
        }
    
        @Override public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) { result.confirm(mJsCallJava.call(view, message)); StopWatch.log("onJsPrompt: " + view.toString() +", " + url +", " + message +", " + defaultValue + ", " + result) ; return true;
        }
    }

    这个InjectedWebChromeClient是设给WebView的,这里一个非常重要的细节需要注意一下,在onProgressChange方法中,向WebView注入了一段js代码,这段js代码如下:

    javascript: (function(b) {
        console.log("HostApp initialization begin"); var a = {
            queue: [],
            callback: function() { var d = Array.prototype.slice.call(arguments, 0); var c = d.shift(); var e = d.shift();
                this.queue[c].apply(this, d); if (!e) {
                    delete this.queue[c]
                }
            }
        };
        a.alert = a.alert = a.alert = a.delayJsCallBack = a.getIMSI = a.getOsSdk = a.goBack = a.overloadMethod = a.overloadMethod 
            = a.passJson2Java = a.passLongType = a.retBackPassJson = a.retJavaObject = a.testLossTime = a.toast = a.toast = function() { var f = Array.prototype.slice.call(arguments, 0); if (f.length < 1) {
                throw "HostApp call error, message:miss method name" } var e = []; for (var h = 1; h < f.length; h++) { var c = f[h]; var j = typeof c; e[e.length] = j; if (j == "function") { var d = a.queue.length;
                    a.queue[d] = c;
                    f[h] = d }
            } var g = JSON.parse(prompt(JSON.stringify({
                method: f.shift(),
                types: e, args: f }))); if (g.code != 200) {
                throw "HostApp call error, code:" + g.code + ", message:" + g.result
            } return g.result
        }; //有时候,我们希望在该方法执行前插入一些其他的行为用来检查当前状态或是监测 //代码行为,这就要用到拦截(Interception)或者叫注入(Injection)技术了 /**
         * Object.getOwnPropertyName 返回一个数组,内容是指定对象的所有属性
         *
         * 其后遍历这个数组,分别做以下处理:
         * 1. 备份原始属性;
         * 2. 检查属性是否为 function(即方法);
         * 3. 若是重新定义该方法,做你需要做的事情,之后 apply 原来的方法体。
         */ Object.getOwnPropertyNames(a).forEach(function(d) { var c = a[d]; if (typeof c === "function" && d !== "callback") {
                a[d] = function() { return c.apply(a, [d].concat(Array.prototype.slice.call(arguments, 0)))
                }
            }
        });
        b.HostApp = a;
        console.log("HostApp initialization end")
    })(window);

    那么这段js代码是如何生成的呢?答案就在JsCallJava类的构造函数方法中,这个构造方法做的事情就是解析HostJsScope类中的方法,把每一个方法的签名都保持到private Map<String, Method> mMethodsMap中,再看上面那段js代码中

    a.alert = a.alert = a.alert = a.delayJsCallBack = a.getIMSI = a.getOsSdk = a.goBack = a.overloadMethod = a.overloadMethod
    = a.passJson2Java = a.passLongType = a.retBackPassJson = a.retJavaObject = a.testLossTime = a.toast = a.toast = function()

    这些都是HostJsScope类中定义的方法名

    那么这个库的整个执行流程是这样的:

    JsCallJava类解析了HostJsScope类中所有的静态方法,将它们放到一个Map中,并且生成一段js代码 向WebView设置InjectedChromeClient,在onProgressChanged方法中将那段js代码注入到Html5页面中,这个过程通俗点讲就是,Native告诉Html 5页面,我开放了什么功能给你,你就来调用我 这样js就可以调用Native提供的这些方法,那段js代码还会将js执行的方法转换成一段json字符串,通过js的prompt方法传到onJsPrompt方法中,JsCallJava调用call(WebView view, String msg)解析json字符串,包括要执行的方法名字参数类型方法参数,其中还会验证json中的方法参数类型和HostJsScope中同名方法参数类型是否一致等等。 最后,如果方法正确执行,call方法就返回一个json字符串code=200,否则就传code=500,这个信息会通过prompt方法的返回值传给js,这样Html 5 代码就能知道有没有正确执行了

    以上就是这个开源库的整个原理,我个人觉得非常适合用于Hybrid开发,这个解决方案中js可以收到Native的返回值,而且没有使用addJavascriptInterface方法,在低版本手机上也不会有安全问题,这个方法比Cordova的实现和配置简单

    那么当我点击Html 5页面上的一个按钮,比如弹出对话框,这个过程的整体流程是怎么样的呢

    微信的解决方案?

    什么?你问我微信是怎么解决的?我也反编译了微信的代码,想研究一下他们是解决的,其实我非常好奇微信的这种js 调用Native,并且又返回的调用方法

    首先,我去微信的js sdk官网看了一下js sdk提供的功能,提供了各种强大的功能,各位可以自己去看一下。那么问题来了,微信是怎么做到js 调用Native并且能够成功返回的呢?

    带着疑问我反编译了微信Android客户端,在assers/jsapi中看到了wxjs.js文件,我想这个就是微信js sdk的源码了吧。。。

    我首先说一下,我不太懂js的代码, 我只能连蒙带猜的看微信的js代码,如果有js大神对这方面也感兴趣,希望可以一起(jian)探(fei)讨(zao)

    在wxjs.js中看到了一下代码,我猜微信就是用这个__WeixinJSBridge当时js和Native进行通信的数据结构吧?

    var __WeixinJSBridge = {
        // public
        invoke:_call,
        call:_call,
        on:_onfor3rd,
        env:_env, log:_log,
        // private
        // _test_start:_test_start,
        _fetchQueue: _fetchQueue,
        _handleMessageFromWeixin: _handleMessageFromWeixin,
        _hasInit: false,
        _continueSetResult: _continueSetResult
    };

    然后我又看到了下面的代码,我想应该是提供分享内容到朋友圈功能的吧

    // share timeline
    _on('menu:share:timeline',function(argv){
      _log('share timeline'); var data; if (typeof argv.title === 'string') {
        data = argv; _call('shareTimeline',data); }else{
        data = {
            // "img_url": "",
            // "img_width": "",
            // "img_height": "", "link": document.documentURI || _session_data.init_url, "desc": document.documentURI || _session_data.init_url, "title": document.title
        }; var shareFunc = function(_img){          
          if (_img) {
              data['img_url'] = _img.src; data['img_width'] = _img.width; data['img_height'] = _img.height;  }
    
          _call('shareTimeline',data); }; getSharePreviewImage(shareFunc); }
    });

    请注意最后这句:_call('shareTimeline',data);,在看看__WeixinJSBridge中的call属性,接着我找到了_call方法。

    function _call(func,params,callback) { var curFuncIdentifier = __WeixinJSBridge.call; if (curFuncIdentifier !== _callIdentifier) { return;
        } if (!func || typeof func !== 'string') { return;
        }; if (typeof params !== 'object') { params = {};
        }; var callbackID = (_callback_count++).toString(); if (typeof callback === 'function') {
          _callback_map[callbackID] = callback;
        }; var msgObj = {'func':func,'params':params};
        msgObj[_MESSAGE_TYPE] = 'call';        
        msgObj[_CALLBACK_ID] = callbackID;
    
        _sendMessage(JSON.stringify(msgObj));
    }

    大致意思应该就是:就是将这个东西_call('shareTimeline',data);转换成一个json字符串吧,从这里看到微信的做法和上面那个开源库非常类似,简单并且安全。_call方法最后调用_sendMessage方法发送消息

    //将消息添加到发送队列,iframe的准备队列为weixin://dispatch_message/ function _sendMessage(message) { _sendMessageQueue.push(message);
        _readyMessageIframe.src = _CUSTOM_PROTOCOL_SCHEME + '://' + _QUEUE_HAS_MESSAGE; // var ifm = _WXJS('iframe#__WeixinJSBridgeIframe')[0]; // if (!ifm) { //   ifm = _createQueueReadyIframe(document); // } // ifm.src = _CUSTOM_PROTOCOL_SCHEME + '://' + _QUEUE_HAS_MESSAGE; };

    从上面代码可以看到微信的js sdk也是将js的方法调用换成一个类似weixin://dispatch_message/这样的url,上面说的json封装的数据。那么我猜测微信的做法是类似网易云音乐的拦截url吗?如果真的是这样的话,就非常不安全了,随便一个Html 5页面可以伪造一个类似:weixin://dispatch_message/这样的url来调用微信的功能了,不过好在微信对每个js调用都必须带上appid。

    在反编译后的微信代码,我看到了下面代码:

    我想这写就是微信想Html 5开放的接口吧?不过对比了一下微信js sdk的官网,我看到好多App提供的功能在js sdk中并没有找到,这样也没有太大关系,以为微信只要升级js sdk就可以使用其他功能了,因为Native已经开放了嘛~

    从上面__WeixinJSBridge可以看到有一个熟悉_handleMessageFromWeixin,这个就是js来处理Native的回调接口,我用这个字符串在微信代码中搜索,结果如下:

    因此,我大致猜测,微信中的js调Native功能是用拦截url的方式,而Native回调的话是使用evaluateJavascript方法

    我也在js sdk中找到了相应的函数:

    function _handleMessageFromWeixin(message) { var curFuncIdentifier = __WeixinJSBridge._handleMessageFromWeixin; if (curFuncIdentifier !== _handleMessageIdentifier) { return '{}';
        } var ret; var msgWrap if (_isUseMd5 === 'yes') { var realMessage = message[_JSON_MESSAGE]; var shaStr = message[_SHA_KEY]; var arr = new Array;
          arr[0] = JSON.stringify(realMessage);
          arr[1] = _xxyy; var str = arr.join(""); var msgSha = ''; var shaObj = CryptoJS.SHA1(str);
            msgSha = shaObj.toString(); if (msgSha !== shaStr) {
                _log('_handleMessageFromWeixin , shaStr : ' + shaStr + ' , str : ' + str + ' , msgSha : ' + msgSha); return '{}';
    
            }
            msgWrap = realMessage;
        } //省略很多代码

    微信的做法应该说非常基础,使用了原生的功能,但是安全,由于微信客户端对每一个js调用都有验证(appid),因此这也增加了一定的安全性

    以上说的都是建立在我的分析正确的情况下。

    一些个人的想法

    现在各种新的技术也在想办法解决Native开发的效率问题,想用技术来解决一套代码运行在Android和iOS客户端,我相信随着技术的发展这些问题都会解决。我也好期待Facebook即将推出的React Native Android

    Hybrid开发适用于哪些功能

    本文讲的Hybrid开发就是Native客户端中嵌入了Html App的功能,这方面微信应该是做的最好的,由于Html 5的效率以及耗电问题,我个人觉得用户是不能满足Web App的体验的,Hybrid App也只适用于某些场景。一些基础的功能,比如调用手机的摄像头,获取地理位置,登录注册功能等等,做成Native的功能,让Html 5来调用更好,这样的体验也更好。

    如果你把一个登录和注册功能也做成Html 5,在弱网络环境下,这个体验应该会非常的差,或许你等半天还没加载出页面。你可能会说,我可以预先加载Html 5的代码,打开App时直接加载,那么我说你在给自己找麻烦,如果要这样的话,Native开发或许更快一点。

    那么什么情况适合Html 5开发呢?像一些活动页面,比如秒杀、团购等适合做Html 5,因为这些页面可能涉及的非常炫而且复杂,Html 5开发或许会简单点,关键是这些页面时效性短,更新更快,因为一个活动说不定就一周时间,下周换活动,如果这样的话,你还做Native是肯定不行的

    总结

    有那么一句古老的箴言

    如果你手里有一把锤子,所有东西看上去都想钉子

    千万不要以为Hybrid开发能够夸平台运行,就使用Hybrid开发任何功能。其实Facebook早期也是这么想的,后来就是因为WebView渲染效率底下,把整个应用改为Native开发,请看这里

    引用Facebook的一段话:

    Today, we’re releasing a new version of Facebook for Android that’s been rebuilt in native code to improve speed and performance. To support the unique complexity of Facebook stories across devices, we’re moving from a hybrid native/webview to pure native code, allowing us to optimize the Facebook experience for faster loading, new user interfaces, disk cache, and so on.

    本文主要还是从技术上谈谈Hybrid开发中js和Native交互的技术实现原理。抛砖引玉,写的估计也有很多错的,希望技术大牛指出。

    最后,我觉得那个开源的库是一个非常不错的解决方案,解决办法巧妙、简单而且安全。当时我debug了半天弄明白其中的原理后,我一拍大腿,这办法真好啊!!网易云音乐的解决办法适用于它的场景,不需要回调,Native只需要处理相应的信息,然后来实现页面跳转、播放音乐、播放MV等功能,这个方法也简单好用。


    转载于:https://my.oschina.net/simple2012/blog/632721

    展开全文
  • 在企业进行app开发的过程中,可以选择的开发方式有很多,在这些开发方式当中,混合开发模式的优势非常显著,下面我就给大家介绍一下,采用app混合开发模式制作应用程序的优势有哪些。采用app混合开发模式制作应用...

    在企业进行app开发的过程中,可以选择的开发方式有很多,在这些开发方式当中,混合开发模式的优势非常显著,下面我就给大家介绍一下,采用app混合开发模式制作应用程序的优势有哪些。

    采用app混合开发模式制作应用程序的优势有哪些?

    80f5f9aebcb1a22b0ccaa02aeda99840.png

    小思经过总结之后发现,采用app混合开发模式制作应用程序的优势主要有以下这五个:

    1.为用户提供更优质的体验

    如果企业想要为用户提供更好的app使用体验,可以采用混合开发模式制作应用程序,我们都有这样的经历,在不同的浏览器上打开同一个页面的时候,可以明显的感受到打开速度的不同,这也适用于app开发,app混合开发可以有助于解决应用程序过程中体验不佳的问题,采用混合开发模式制作应用程序,所有的用户都有机会体验到统一的UI界面。

    2.可用性极强

    现在市场当中app的数量有很多,但是在这些app中,并不是所有的应用都可以让用户在安装之后持续使用,采用混合模式开发的app可用性极强,可以让用户持续使用。

    3.速度比较快

    如果app的响应速度太慢,那么大多数的用户肯定都不会再使用app了,这也是app开发过程中必须要面对的困难之一,很多应用程序在每次启动的时候,都需要花费一段时间在线更新加载一些内容,使用混合开发模式可以尽可能的提高应用的加载速度,为用户提供无缝的体验。

    4.便于集成

    混合开发模式和本地原生开发模式存在一定的相似之处,就比如这两种模式采用相似的编程语言,以便和其它兼容的应用程序同步,这可以让开发人员远离和集成之前的麻烦,因此采用混合开发模式进行开发,可以和消息,相机和GPS等等信息完美的配合,从而为用户提供最佳的体验,有助于提高用户的满意度。

    5.离线使用

    使用混合开发模式制作app,也会使用设备的API,以便于可以离线存储一些信息,离线支持可以保证应用在网络连接不佳的情况下仍然可以及时的做出反馈,这也是采用混合开发模式制作app的重要优势。

    展开全文
  • Hybrid APP混合开发

    2018-04-10 16:58:00
    由于业务需要,接触到一个Hybrid APP混合开发的项目。当时是第一次接触混合开发,有一些经验和总结,欢迎各位一起交流学习~ 1、混合开发概述 Hybrid App主要以JS+Native两者相互调用为主,从开发层面实现“一次开发...

    写在前面:

    由于业务需要,接触到一个Hybrid APP混合开发的项目。当时是第一次接触混合开发,有一些经验和总结,欢迎各位一起交流学习~

    1、混合开发概述

    Hybrid App主要以JS+Native两者相互调用为主,从开发层面实现“一次开发,多处运行”的机制,成为真正适合跨平台的开发。Hybrid App兼具了Native App良好用户体验的优势,也兼具了Web App使用HTML5跨平台开发低成本的优势。

    目前已经有众多Hybrid App开发成功应用,比如美团、爱奇艺、微信等知名移动应用,都是采用Hybrid App开发模式。

    2、移动应用开发的三种方式比较

    移动应用开发的方式,目前主要有三种:

    • Native App: 本地应用程序(原生App)
    • Web App:网页应用程序(移动web)
    • Hybrid App:混合应用程序(混合App)

     

    图1:三种移动应用开发方式

    如图1所示,三种移动应用开发方式具体比较如表2所示:

     

    表2:三种移动应用开发方式比较

    3、混合开发应用场景

    (1)折中考虑——如果企业使用 Hybrid 开发方法,就能集Native 和web两者之所长。一方面,Native 让开发者可以充分利用现代移动设备所提供的全部不同的特性和功能。另一方面,使用 Web 语言编写的所有代码都可以在不同的移动平台之间共享,使得开发和日常维护过程变得集中式、更简短、更经济高效。

    (2)内部技能——许多企业都拥有Web 开发技能。如果选择 Hybrid 开发方法,在合适解决方案的支持下,Web 开发者只要仅仅运用 HTML、CSS 和 JavaScript 等 Web 技能,就能构建 App,同时提供 Native 用户体验。

    (3)考虑未来——HTML5的可用性和功能都在迅速改进。许多分析师预测,它可能会成为开发前端 App 的默认技术。如果用 HTML 来编写 App 的大部分代码,并且只有在需要时才使用 Native 代码,公司就能确保他们今天的投入在明天不会变得过时,因为 HTML 功能变得更丰富,可以满足现代企业一系列更广泛的移动要求。

    4、混合开发框架和层次结构图

    混合开发结构图

     

    1)移动终端web壳(以下简称“壳”):壳是使用操作系统的 API 来创建嵌入式 HTML的渲染引擎。壳主要功能是定义Android应用程序与网页之间的接口,允许网页中的JavaScript调用Android应用程序,提供基于web的应用程序的Android API,将Web嵌入到Android应用程序中。

    2)前端交互js:包括基础功能js和业务功能js。

    3)前端适配器:适配不同的终端:Pad、android、ios、wap。

    混合开发层次结构图

     

    1) 页面加载

    1. 页面容器(XdjaWebView)类,是整个框架的核心和基础,主要用来实现页面的加载,以及对页面加载完成后的后续操作提供支持,例如:文件下载、js支持、文件上传,数据缓存、进度条等;
    2. 页面加载接口:对页面的加载过程进行跟踪;例如:页面加载进度百分比,页面开始加载、页面加载出错、页面加载完成等

    2) JS调用Android功能

    1. 网页:页面调用js接口中的具体方法;
    2. JS接口:调用android接口中一一对应的具体方法;
    3. android接口:直接调用框架中集成的功能,或者通过框架接口在应用系统中自定义功能(例如,退出、返回键响应等);其中升级功能的返回结果或者过程信息,可以在客户端中通过升级接口获取。
    4. XdjaClientHelper:如果需要将框架中的方法返回值通知给js方法,你们可以通过XdjaClientHelper类来实现;

    3)应用系统调用JS功能

    应用系统通过XdjaClientHelper来实现对js功能的调用;

    4) 应用系统调用HDF功能

    应用系统可以调用框架集成的工具类、消息提示框、升级模块以及手机上常见的打电话发短信等功能。

    5、性能优化

    1) 单个页面

    登录、首页以及共用代码(样式文件、JS文件、页面加载loading代码)等放在index页面里。页面展示前显示fake页面(过场页面),首屏加载完后,fake页面消失。

    页面虽然按照业务模块分为不同的页面,但是展示的时候会在同一个页面即index页面展示。具体的说,需要某个功能页面的时候将页面以AJAX的形式请求到index页面,使用完毕删除。

    使用一个页面,公共的CSS和JS只会加载一次。

    2)CSS、JavaScript

    在本次混合开发框架开发中,CSS全部写在一个文件里。

    CSS和Jquery Mobile的相关文件写在index页面头部,其余公用JS等写在index页面底部。防止JS阻塞页面加载。各业务逻辑JS写在各业务页面的底部。

    开发完成后,CSS和JS需要进行压缩,减少用户使用时初次请求时间。

    3) @font-face

    本次混合开发中使用@font-face来实现图标字体化,统一控制图标的颜色和大小。

    使用@font-face优点:减少页面因使用图片而带来的流量,大大缩短页面响应时间;图标可以随意改变大小和颜色,而不会导致失真。

    使用时注意:所有的图标需要是矢量的SVG格式。

    使用限制:只适用于纯色扁平化的图标。背景图等比较复杂的图片仍然使用图片。

    4) 本地存储LocalStorage

    HTML5本地存储LocalStorage,在混合开发中主要用来存储最近查询记录等。

    拿首页最近查询来说,用户每次在综合查询中点击一个模块,通过LocalStorage将图标和对应的功能名字存储起来,如果用户不清除,LocalStorage中的数据是一直存在本地的。下次打开应用的时候从LocalStorage中读取最近查询记录等。

    使用LocalStorage的好处是,不进行后台交互,速度快。

    5)异步AJAX

    本次开发中多处实现都是通过使用AJAX。首先,显示页面时,先显示框架,然后异步加载内容;其次,分页功能中,先显示部分简项列表,上拉获取更多内容。再次,每打开一个新功能,页面以AJAX的形式获取新页面的内容并展示出来。

    异步AJAX,交互体验更好。从性能的角度考虑,速度也更快。

    展开全文
  • Hybrid APP混合开发的一些经验和总结

    万次阅读 2018-11-20 11:35:30
    Hybrid APP混合开发的一些经验和总结 写在前面: 由于业务需要,接触到一个Hybrid APP混合开发的项目。当时是第一次接触混合开发,有一些经验和总结,欢迎各位一起交流学习~ 1、混合开发概述 ...

    Hybrid APP混合开发的一些经验和总结

    写在前面:

    由于业务需要,接触到一个Hybrid APP混合开发的项目。当时是第一次接触混合开发,有一些经验和总结,欢迎各位一起交流学习~

    1、混合开发概述

    Hybrid App主要以JS+Native两者相互调用为主,从开发层面实现一次开发,多处运行的机制,成为真正适合跨平台的开发。Hybrid App兼具了Native App良好用户体验的优势,也兼具了Web App使用HTML5跨平台开发低成本的优势。

    目前已经有众多Hybrid App开发成功应用,比如美团、爱奇艺、微信等知名移动应用,都是采用Hybrid App开发模式。

    2、移动应用开发的三种方式比较

    移动应用开发的方式,目前主要有三种:

    • Native App: 本地应用程序(原生App)
    • Web App:网页应用程序(移动web)
    • Hybrid App:混合应用程序(混合App)

     

    图1三种移动应用开发方式

    如图1所示,三种移动应用开发方式具体比较如表2所示

     

    表2三种移动应用开发方式比较

    3、混合开发应用场景

    (1)折中考虑——如果企业使用 Hybrid 开发方法,就能集Native 和web两者之所长。一方面,Native 让开发者可以充分利用现代移动设备所提供的全部不同的特性和功能。另一方面,使用 Web 语言编写的所有代码都可以在不同的移动平台之间共享,使得开发和日常维护过程变得集中式、更简短、更经济高效。

    (2)内部技能——许多企业都拥有Web 开发技能。如果选择 Hybrid 开发方法,在合适解决方案的支持下,Web 开发者只要仅仅运用 HTMLCSS 和 JavaScript 等 Web 技能,就能构建 App,同时提供 Native 用户体验。

    (3)考虑未来——HTML5的可用性和功能都在迅速改进。许多分析师预测,它可能会成为开发前端 App 的默认技术。如果用 HTML 来编写 App 的大部分代码,并且只有在需要时才使用 Native 代码,公司就能确保他们今天的投入在明天不会变得过时,因为 HTML 功能变得更丰富,可以满足现代企业一系列更广泛的移动要求。

    4、混合开发框架和层次结构图

    混合开发结构图

     

    1)移动终端web壳(以下简称“壳”):壳是使用操作系统的 API 来创建嵌入式 HTML的渲染引擎。壳主要功能是定义Android应用程序与网页之间的接口,允许网页中的JavaScript调用Android应用程序,提供基于web的应用程序的Android API,将Web嵌入到Android应用程序中。

    2)前端交互js:包括基础功能js和业务功能js

    3)前端适配器:适配不同的终端:Padandroidioswap

    混合开发层次结构图

     

    1) 页面加载

    1. 页面容器(XdjaWebView)类,是整个框架的核心和基础,主要用来实现页面的加载,以及对页面加载完成后的后续操作提供支持,例如:文件下载、js支持、文件上传,数据缓存、进度条等;
    2. 页面加载接口:对页面的加载过程进行跟踪;例如:页面加载进度百分比,页面开始加载、页面加载出错、页面加载完成等

    2) JS调用Android功能

    1. 网页:页面调用js接口中的具体方法;
    2. JS接口:调用android接口中一一对应的具体方法;
    3. android接口:直接调用框架中集成的功能,或者通过框架接口在应用系统中自定义功能(例如,退出、返回键响应等);其中升级功能的返回结果或者过程信息,可以在客户端中通过升级接口获取。
    4. XdjaClientHelper:如果需要将框架中的方法返回值通知给js方法,你们可以通过XdjaClientHelper类来实现;

    3)应用系统调用JS功能

    应用系统通过XdjaClientHelper来实现对js功能的调用;

    4) 应用系统调用HDF功能

    应用系统可以调用框架集成的工具类、消息提示框、升级模块以及手机上常见的打电话发短信等功能。

    5、性能优化

    1) 单个页面

    登录、首页以及共用代码(样式文件、JS文件、页面加载loading代码)等放在index页面里。页面展示前显示fake页面(过场页面),首屏加载完后,fake页面消失。

    页面虽然按照业务模块分为不同的页面,但是展示的时候会在同一个页面即index页面展示。具体的说,需要某个功能页面的时候将页面以AJAX的形式请求到index页面,使用完毕删除。

    使用一个页面,公共的CSSJS只会加载一次。

    2)CSSJavaScript

    在本次混合开发框架开发中,CSS全部写在一个文件里。

    CSSJquery Mobile的相关文件写在index页面头部,其余公用JS等写在index页面底部。防止JS阻塞页面加载。各业务逻辑JS写在各业务页面的底部。

    开发完成后,CSSJS需要进行压缩,减少用户使用时初次请求时间。

    3) @font-face

    本次混合开发中使用@font-face来实现图标字体化,统一控制图标的颜色和大小。

    使用@font-face优点:减少页面因使用图片而带来的流量,大大缩短页面响应时间;图标可以随意改变大小和颜色,而不会导致失真。

    使用时注意:所有的图标需要是矢量的SVG格式。

    使用限制:只适用于纯色扁平化的图标。背景图等比较复杂的图片仍然使用图片。

    4) 本地存储LocalStorage

    HTML5本地存储LocalStorage,在混合开发中主要用来存储最近查询记录等。

    拿首页最近查询来说,用户每次在综合查询中点击一个模块,通过LocalStorage将图标和对应的功能名字存储起来,如果用户不清除,LocalStorage中的数据是一直存在本地的。下次打开应用的时候从LocalStorage中读取最近查询记录等。

    使用LocalStorage的好处是,不进行后台交互,速度快。

    5)异步AJAX

    本次开发中多处实现都是通过使用AJAX首先,显示页面时,先显示框架,然后异步加载内容;其次,分页功能中,先显示部分简项列表,上拉获取更多内容。再次,每打开一个新功能,页面以AJAX的形式获取新页面的内容并展示出来。

    异步AJAX,交互体验更好。从性能的角度考虑,速度也更快。

     http://www.cnblogs.com/kingplus/p/5588339.html


    APP开发模式通常分为Web APP与Native APP原生模式两种,这两种模式均各自有自己的优势,到底是采用Native App开发还是采用Web App开发一直是业界争论的焦点,但是随着HTML5的发展及云服务普及,采用HTML5进行Web App开发正在成为一种趋势,用户可以根据应用特点和需求进行选择,亦可选择两者混合模式:
      Native App开发
      Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由“云服务器数据+APP应用客户端”两部份构成,APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。
      Web App开发
      Web App开发即是一种框架型APP开发模式(HTML5 APP 框架开发模式),该开发具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部份构成,APP应用客户端只需安装应用的框架部份,而应用的数据则是每次打开APP的时候,去云端取数据呈现给手机用户。
      原生APP开发及Web APP开发模式的区别
      Web APP需开发“html5云网站”和“APP客户端”,昆明天度网络公司总结这类型APP应用呈现以下特点:
      (1)每次打开APP,都要通过APP框架向云网站取UI及数据;
      (2)手机用户无法上网则无法访问APP应用中的数据。
      (3)框架型的APP无法调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)
      (4)框架型APP的访问速度受手机终端上网的限制,每次使用均会消耗一定的手机上网流量;
      (5)框架型APP应用的安装包小巧,只包含框架文件,而大量的UI元素、数据内容刚存放在云端;
      (6)APP用户每次都可以访问到实时的最新的云端数据;
      (7)APP用户无须频繁更新APP应用,与云端实现的是实时数据交互;
      适用企业:电子商务、金融、新闻资讯、企业集团需经常更新内容的APP应用。
      Native App(原生型APP)需要开发“云服务器数据中心”和“APP客户端”,昆明天度网络公司总结这类型的APP应用呈现以下特点:
      (1)每次获取最新的APP功能,需要升级APP应用;
      (2)原生型APP应用的安装包相对较大,包含UI元素、数据内容、逻辑框架;
      (3)手机用户无法上网也可访问APP应用中以前下载的数据。
      (4)原生型的APP可以调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)
      (5)APP应用更新新功能,涉及到每次要向各个应用商店进行提交审核。
      适用企业:游戏、电子杂志、管理应用、物联网等无需经常更新程序框架的APP应用。
      到底该如何选择Web App和Native App开发模式
      移动Web无所不在,移动Web是目前唯一的支持各种设备访问的平台,与桌面Web一样,移动Web支持各种标准的协议。移动Web也是唯一一个可供开发者发布移动应用的平台,它将各种移动交互与桌面任务有效地连接了起来;而开发Native App可以充分利用设备的特性,而这一点往往是Web浏览器做不到的,所以对一个产品本身而言,Native App是最佳的选择。下面几节将讨论一下Native App的一些主要功能。
      什么时候应该选择Native App
      1.为应用收费
      没有任何地方规定开发者不能对一个移动Web App收取使用费,但是由于某些原因,人们常常认为不能或是不应该对一个Web App收取费用。由于历史原因,导致移动设备上付费服务遭遇两大阻力:
      2.付款方式
      在移动设备上输入信用卡号相当麻烦,而且在许多老式设备上也没有安全保障。一种典型的方式是,如果你需要对你的应用收费,你可以与运营商达成协议,让运营商代为为你的服务收费。这也意味着,你需要和多个运营商达成合作。这通常是首选的方法,因为许多手机用户可能根本就没有信用卡,比如青少年。
      另一种方法是将用户的信用卡信息保存在一个安全的网站上。用户可以通过登录到该网站购买应用服务。这个过程不算特别理想,因为这意味着用户不能直接通过他们的移动设备购买服务了。
      3.强制分成
      移动运营商是会提成的。App无论是通过运营商还是通过移动设备发布,他们都为应用提供了一套收费机制。这些运营商和移动设备将会提取部分收益,然后将剩余的部分交给应用开发商,这也意味着,开发人员必须遵守他们的市场规则。适应运营商的市场规则通常是非常困难的,需要投入大量的人力资源。相比而言,移动设备的市场规则则简单许多,但是也存在不少的困难。
      妨碍运营商和移动设备开发商利益的应用以及服务都将受到阻扰。过去,那些不靠运营商和移动设备开发商运作的网站如果收入过于显眼的话,都逃脱不了被关闭的命运,但是最近,这样的事情鲜少发生了。
      如果你想为你的Native App收费,那么你就必须接受这个现实——你必须遵守别人的市场规则,还得放弃部分收益。
      4.开发游戏
      如果你是想开发一个移动游戏(移动游戏是移动市场上最大的一块),那么你需要开发一个Native App。游戏对资源的占用很大,并且需要使用许多设备API或平台API。虽然,现在有几款完全使用Web技术开发的游戏占有了一定的市场份额,但是和Native App市场的占有情况相比,还是微不足道的。游戏用户对应用的视觉和操作效果要求很高。移动Web虽然提供了一些仿真体验,但还远远不能满足用户的需求。
      在开发移动游戏时,你需要慎重考虑你的应用需要支持哪些平台。幸运的是,现在有许多工具能够帮助你将你的游戏推向多个平台,但是完成这些工作,还是需要花费大量的人力和物力。
      5.使用定位功能
      下一个功能就是定位功能,可以通过GPS或者是信号检测确定用户当前的位置信息。以前只能通过Native App的APIs查看用户的位置信息,但现在大多数主流移动浏览器上都嵌入了W3C Geolocation API。像iPhone或Android这样安装了WebKit的设备,或是配置了Opera或Mozilla浏览器的设备,都可以获取用户的位置信息。
      我相信定位功能会为Web技术带来许多全新的应用。如果能够合理利用Web浏览器,Web开发商就能使用用户的位置信息和其他内容开发出更加有趣的应用。虽然这在技术上没有太大的困难,但却受到隐私保护条例的限制。我们将Web浏览器当做是用户进入World Wide Web的入口。加入定位功能,意味着在网站中引入了一些敏感信息,这有可能导致严重的后果。但是位置感知应用中显示的位置信息必须经过用户的授权,用户当然有权禁止应用发布自己的位置信息。
      6.使用摄像头
      摄像头可以为你的应用提供丰富的可能性。以往移动MMS(Multimedia Messaging Service)被用于处理移动照片。换言之,你拍了一张照片后,需要使用MMS将它传送给一个服务器,服务器对照片做出相应的处理,并将处理完成的结果通知给你。这个过程是非常耗时的,而且相当复杂,也没有可靠性保障。
      通过访问摄像头,Native App开发者能够简化拍照的过程。用户可以直接在客户端对照片做一些简单的处理,只有在有需要的时候才将照片上传给服务器,而且是通过可靠的HTTP传输。W3C正在开发一个访问摄像头的API,但现在还没有将这部分工作正式整合到浏览器中。
      在许多类型的移动Apps中,摄像头是非常有用的,比如快拍应用、短片拍摄应用等等,摄像头可以用来捕捉许多重要的瞬间。不久的将来,我们可以看到——只要通过摄像头拍摄某个标识,应用程序就能自动完成对标识上的语言转换工作——这个技术在日本已经开始流行起来了。
      7.使用感应器
      现在越来越来越多的移动设备上都新增了感应器功能,该装置可以感知设备的物理速度以及重力,并将感知的数据结果传送给设备。这个装置常被用来感应设置是否被翻转,应用根据接受到的信息自动调节画面的方向。
      感应器可以用来帮助用户提升与设备交互时的真实感;大多数移动设备都是手持的,应用能够根据设备的方向调整内容画面,比如翻转屏幕,或是检测物理移动,并能据此猜测用户所处的环境。举一个简单的例子:比如用户正在走路,那么感应器能够检测到一个轻缓的移动或是速度,这时可以为用户提供一个大字体的用户界面,从而使得用户更容易看清屏幕上的内容。
      然而,开发者也不能过分依赖感应器,因为感应器无法区分究竟哪些交互是有意的,而哪些是没有意义的。每个移动交互都需要通过“传输测试”。设计你的交互时必须考虑用户在一个拥挤的汽车或是火车上的场景。考虑一下如果用户正身处拥挤的地铁或是正在驾车时,你的应用能否正确处理用户摇晃移动设备的动作。通常,大多数开发者都没有考虑这些因素。确保为每个任务设计一个备用方案以处理特殊场景中的移动交互。
      8.访问文件系统
      如果你的应用需要将数据保存在本地,那么你需要开发一个Native App。比如你要保存用户的地址簿、电话或E-mail信息,或是保存从其他设备上获取的数据。
      访问文件系统常常会涉及到安全和用户隐私保护的问题。恶意应用程序可能会修改或是删除你的移动设备上的数据。一个携带病毒的应用程序可以利用移动设备上的关系网将病毒扩散到许多其他的手机上,在采用移动应用认证机制以前,这种事情是常常发生的。
      另一方面,移动设备正变得越来越私人化,移动设备上保存了大量用户的个人信息,以及用户的朋友信息和商业信息。针对这些私人信息开发应用是一个不错的想法。但是这也存在一定的风险,使用保存在移动设备上的数据可以为用户提供更加有针对性的服务。
      开发者必须谨记,只有在获得用户的授权后才能访问用户的私人数据。我们看到许多应用在没有得到用户授权的情况下使用了大量的用户私人数据,而被误认为是垃圾信息或是钓鱼应用,即使这些应用原本是在提供一些非常有用的服务。人们对你的应用的误解将会影响到你的服务的推广,如果运营商收到过多关于你的应用的投诉,那么你的服务可能将被终止,甚至会牵连其他的应用。
      访问文件系统时至关重要的一点就是在没有获得用户授权的情况下,不要访问任何用户的私人数据。而这一点,往往被大多数应用忽略了。W3C正在为移动开发商开发相关的标准API,但目前该工作尚未完成。
      9.离线用户
      最后一个需要开发Native App的理由就是,用户有可能是离线的或者无法接入移动网络。这在城市可能很少发生,即使是在农村,网络的覆盖也已经逐步普及了。但是短暂的网络连接中断还是时常发生的,你的应用程序应该考虑如何处理这种情景。
      想想用户通常在什么时候,在哪里会使用你的App。如果是一个移动游戏,那么用户很可能在飞机上使用这个App。跟踪地图应用常在偏远且网络覆盖不佳的地方使用。移动旅游向导常在一个国外的网络中访问,往往需要支付漫游和国际网络费用。这时,应用程序最好能够为用户提供离线服务,保证用户在不接入网络的情况下,仍然能享受同等的服务。
      现在支持HTML5的浏览器也能实现脱机访问功能,但对用户来说可能不太明显。随着越来越多的浏览器都开始支持脱机访问,应用需要明确地告诉用户网络连接中断时,他们仍然可以访问移动Web Apps。
      Native Apps常常假设网络连接是可靠的。App通常只考虑了网络状况良好的情景,想当然地认为网络是封闭的,并且网速足够快。移动设备从网络良好的环境突然进入一个网络糟糕的环境并不少见。Native Apps应该在网络状况最差的情况下测试。比如用户启动任务时可能还是全信号覆盖,而在任务结束时可能已经完全没有网络信号了。
      用户在安装Native Apps时,根本不会考虑是在线访问还是离线访问——他们期望的是不管在任何状况下,Native Apps都能正常工作。而这也是开发者的职责。
      什么时候应该选择Web App
      只要你的应用程序不满足之前提到的Native App条件之一,那么你就没有必要开发一个Native App,而应该选择开发一个Web App。正如文章之前提到的,我是一个Native App的拥护者,我认为Native App有许多优秀的特质,并且具有很大的市场潜力,但是Web Apps是唯一一个经久不衰的移动内容、服务、应用开发平台。
      Native App并不能明显地为用户提供更好的服务;它反而会增加项目的成本,减少了应用发布的渠道,增加了App升级的复杂度,削弱了开发者对应用的控制和利润,并且可能会给设备带来麻烦。Native App可以为开发者带来短期的效益,但这是有一定风险的,甚至可能会影响到移动市场的可持久发展。
      移动Web App的优势在前文中已经提到过了。如果上一节提到的几点功能是促成你选择Native App的唯一原因,那么如果能够在移动浏览器上屏蔽这些障碍,你是否还会坚持选择Native App呢?Palm的webOS已经着手解决了上述的部分问题。他们基于WebKit构建了一个全移动操作系统,将手机变成了一个Web浏览器。所谓的“Native Apps”实际上就是一个Web Apps。
      PhoneGap也是一个类似的项目,这个开源项目用于帮助开发者在iPhone、Android以及BlackBerry设备上开发Native Apps,并且能够模拟设备上的功能(如定位功能和文件系统)供Web Apps调用。这些代码可以在各个设备的应用商店中发布并且出售,但是他们使用的通用代码和设计是可以共享的。由于开发的是一个Web App,开发者可以为低端的移动浏览器开发一个简化版的应用。只用开发一次,就可以部署在多个平台上了,
      对于那些有着丰富的移动开发经验的程序员来说,一提到“要开发一个功能丰富的应用”时,可能首先想到的就是Native App。虽然在很多设备上,这一想法仍然适用,但是现在移动Web Apps上也提供了足够丰富的功能接口供开发者调用。这使得Web App不仅可以像Native App一样被设计得功能丰富界面绚丽,而且还能在各个平台上迁移,甚至不用修改一行代码。
      现在在移动设备开发中,移动Web Apps的创新进入了前所未有的高潮时期。但更重要的是,这是有史以来第一次,移动设备开发商决定共同制定一个移动Web开发的标准,就像是桌面Web上的标准一样。不仅如此,那些支持移动Web App创新功能的设备或是支持第三方浏览器的移动设备都受到消费者的欢迎。



    展开全文
  • 混合开发App(Hybrid App)就是嵌一个轻量级的浏览器,一部分原生的功能改为Html5来开发,这部分功能不仅能够在不容升级的情况下动态更新,而且可以在Android或iOS上同时运行,让用户的体验更好又可以节省开发的...
  • 谈谈AndroidApp混合开发

    2021-02-01 15:20:04
    混合开发App(HybridApp)就是在一个App中内嵌一个轻量级的浏览器,一部分原生的功能改为Html5来开发,这部分功能不仅能够在不升级App的情况下动态更新,而且可以在Android或iOS的App上同时运行,让用户的体验更好...
  • Vue+原生App混合开发

    千次阅读 2019-01-25 15:58:32
    转载一篇 Vue+原生App混合开发 源地址 : https://www.cnblogs.com/undefined000/p/vue-nativeApp-development.html  
  • 谈谈Android App混合开发 时间 2015-08-25 20:13:43 bxbxbai 原文 http://bxbxbai.gitcafe.io/2015/08/16/talk-about-bybird-app/ 主题 HTML Android 混合开发的App(Hybrid App)就是在一个App...
  • 主要介绍了浅谈html5与APP混合开发遇到的问题总结的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 写在前面:由于业务需要,接触到一个Hybrid APP混合开发的项目。当时是第一次接触混合开发,有一些经验和总结,欢迎各位一起交流学习~1、混合开发概述Hybrid App主要以JS+Native两者相互调用为主,从开发层面实现...
  • 谈谈App混合开发

    千次阅读 2019-05-24 10:56:07
    混合开发App(Hybrid App)就是在一个App中内嵌一个轻量级的浏览器,一部分原生的功能改为Html 5来开发,这部分功能不仅能够在不升级App的情况下动态更新,而且可以在Android或iOS的App上同时运行,让用户的体验更...
  • app混合开发基本理论

    万次阅读 多人点赞 2019-05-28 15:57:52
    app开发分三种,第一种纯原生,第二混合,第三,纯html。...2.为什么选择混合开发,而不是纯原生也不是纯页面,主要是为了让大家都活下去。(这个是开玩笑了),那为啥呢,就是有些硬件功能还是原...
  • 安卓app开发之在WebView中通过javascript调用android中的java代码.这是hybrid app混合开发的核心技术所在----js和native代码互相调用
  • Android App混合开发

    千次阅读 2019-03-19 13:36:12
    混合开发App(Hybrid App)就是在一个App中内嵌一个轻量级的浏览器,一部分原生的功能改为Html 5来开发,这部分功能不仅能够在不升级App的情况下动态更新,而且可以在Android或iOS的App上同时运行,让用户的体验更...
  • 快速实现APP混合开发(Hybrid App开发)攻略

    千次阅读 热门讨论 2020-12-11 10:43:23
    首先对比原生APP开发,混合开发有以下优缺点 优点: (1)开发成本低 (2)相对原生web界面版本更新快,维护相对简单 (3)一套代码可以支持Android端和iOS端 (4)能够调用原生功能、API (5)稳定性相对较好...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,707
精华内容 1,482
关键字:

app混合开发