混合应用中的javascript实践

Flink_China 发布于2019-08-19 18:37 / 3443人阅读

摘要：混合应用在几年前便进入大众视野，近来更是越发风生水起，深受人民群众的喜爱。混合方式如同茴字有几种写法一般，构建混合应用也有不同的方式。机型则会比较悲剧，使用方案或许是个正确的选择。所以在开发中一定要做好可用性检测，减少出现的几率。

混合应用(hybird app) 在几年前便进入大众视野，近来更是越发风生水起，深受人民群众的喜爱。

概念 什么是混合应用

混合应用(hybird app) 顾名思义，便是将web app与native app混合在一起，既享受html快速开发、快速版本迭代带来的便利，也能使用原生app调用系统接口和第三方SDK的强大扩展能力。

混合方式

如同茴字有几种写法一般，构建混合应用也有不同的方式。其中一种是主要使用静态html，用 phonegap 或 cordova 加壳的方式打包成app。另一种则是小部分webview直接引入服务端渲染的html，其他功能都是原生app开发。
其中前一种方式最为出名的解决方案便是使用 angular.js + cordova 的 ionic,而使用后一种方式的app则数不胜数。
但是无论使用哪一种方式，都面临一个问题，html和app的交互。html自己不会动起来，本文将浅谈javascript如何交互app和html。

交互 方法注入

常见的app和html交互有 使用url 和 互相调用方法 两种方式。
使用url 这种方式比较简单，通过 location.href = "url" ，即可将方法和参数传递给app，但是无法传递复杂的数据。
互相调用方法 这种方式则较为复杂，除了需要app端写好调用的方法注入到 window 对象之外，还需要JavaScript暴露方法给app使用。以常见的评论交互为例：

// 点击“发表评论”,js需要调用app的评论框
$(".js-comment").click(function(){
  window.appMethod.comment();
});

// app端在用户点击“发送”按钮时，再调用javascript的插入评论方法（我不会app开发，以下是伪代码）
function comment(){
  TEXTAREA.OPEN();
}
SUBMIT_BUTTON.CLICK(function(){
  NSString * result = [self.webView stringByEvaluatingJavaScriptFromString:@"window.jsMethod.comment()"];
})

其中 window.appMethod 这个方法，是一个从 iOS 和 android 方法中提取而来的方法，根据手机系统不同，使用不同策略，例如：

var window.appMethod = null;

var androidMethod = {
  comment: function(){
    window.android.comment();
  }
};

var iOSMethod = {
  comment: function(){
    location.href = "ios://comment?"
  }
};


window.appMethod = iOS_DEVICE ? iOSMethod : androidMethod;

相比方法的注入点，策略处理，方法的调用时机更为重要。在js中调用一个不存在方法，会发生错误从而导致代码无法继续向下执行。
比如进入页面时，app需要告诉html一些登录信息，以初始化点赞，收藏等组件。如果由app直接调用js方法去通知，那么很可能页面还没加载完，而发生上面提到的错误。
所以好的时机是让js主动去向app发起请求，示例：

// 不和谐：app直接通知js更新用户登录状态，可能会发生错误
eval("window.jsMethod.setUser();")


// 和谐：js主动去向app发起请求
$(function(){
  window.appMethod.getUser();
})

// app端在接收到getUser方法后，调用js方法（我不会app开发，以下是伪代码）
function getUser(){
  // 获取user状态，然后执行
  NSString * result = [self.webView stringByEvaluatingJavaScriptFromString:@"window.jsMethod.setUser()"];
}

参数传递

以上的示例中的方法并没有进行参数传递，是为了留到这里。
相比JavaScript，在android和iOS方法中传递参数显得极为严格，除了要指定参数个数，还要指定参数类型。
虽然可以通过数组的方式进行不定个数参数的传递，但是指定参数类型还是挺烦人的。所以建议始终使用 String 类型作为参数进行传递，复杂的json格式参数使用 JSON.stringify。使用url传递则需要对参数进行 encode 编码。
以上面的发表评论为例：

# 本段代码使用了jquery

// js给app传参
var androidMethod = {
  comment: function(params){
    window.android.comment( JSON.stringify(params) );
  }
};

var iOSMethod = {
  comment: function(params){
    location.href = "ios://comment?"+$.param(params)
  }
};

... ... 

$(".js-comment").click(function(){
  var params = {
    "user_id": 30,
    "article_id": 958,
    "article_type": "news"
  };
  window.appMethod.comment(params);
});


// app给js传参
SUBMIT_BUTTON.CLICK(function(){
   var params = {
    "comment_id": 5484,
    "comment_content": "我不会写app，姑且用js写伪代码"
  };
  NSString * result = [self.webView stringByEvaluatingJavaScriptFromString:@"window.jsMethod.comment( JSON.stringify(params) )"];
})

方法监听

这里的方法监听指的是app对js方法的单向监听。
因为需要app监听的js方法，都是显示的调用了app方法，或是跳转到了一个url。调用app的方法自不待言，url的监听却有多种。
一种是a链接的 http GET 请求的监听，多见于 下一篇文章 , 相关文章 等跳转页面的方法。一般来说不用带参数。还有一种是自定义的 schema 监听，使用这种方式一般是不带或带较少的参数，比如 myiOS://mymethod?。

资源加载

把资源加载放到交互里面，我也不知道合不合适。对于第一种混合方式来说，可以把更多的静态资源放到本地，然后通过app接口加载。对于第二种，更多的还是从服务端渲染并加载资源。
对于一些交互类的数据，而非资源，既可以选择存放在浏览器的localStorge中，也可以选择存放于app本地文件，这取决于哪一方进行操作运算了。

调试

html的移动端调试时很困难的，嵌入app的html调试更是难上加难。因为js和app的方法相互调用，任何一方出错，都会导致程序不按套路运行。
除了仔细的约定两端的方法和检查代码的错误外，还需要一个强力的工具。在这里推荐使用 vConsole ，可以比较直观的定位到错误。

vConsole 截图

vConsole

其他 兼容性

html在app中的兼容性取决于app内嵌浏览器内核。iOS系统默认的浏览器是safari，而andriod系统默认的浏览器则五花八门。

如果选择系统默认浏览器作为内嵌浏览器的话，ios一般兼容性较好，能取得和PC端一致的效果。android机型则会比较悲剧，使用 crosswalk方案或许是个正确的选择。

特性启用

在内嵌浏览器中，html5的某些特性默认是关闭的，比如 localStorge , 需要app端手动去开启。所以在开发中一定要做好可用性检测，减少出现bug的几率。

局部视图

当html作为webview的局部视图被加载时，由于app虽然可以获取到页面加载后的高度，但是无法获取动态改变后的高度，使得局部滚动失效。
所以在作为局部视图加载时，如果需要页面高度会根据比如评论，动画效果而发生改变的话，需要及时通知app更新webview高度。

云服务器 GPU云服务器 javascript最佳实践 javascript基础与实践教程 javascript中的 javaScript中的this

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79789.html

【译】前端练级攻略

摘要：由于系统变得越来越复杂，人们提出了称为预处理器和后处理器的工具来管理复杂性。后处理器在由预处理器手写或编译后对应用更改。我之前建议的文章，，也涵盖了预处理器相关的知识。译者：前端小智原文：medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我记得我刚开始学习前端开发的时候。我看到了很多文章及...

wuyumin 2019-05-22 16:41 评论0 收藏0
前端练级攻略(第二部分)

摘要：是文档的一种表示结构。这些任务大部分都是基于它。这个实践的重点是把你在前端练级攻略第部分中学到的一些东西和结合起来。一旦你进入框架部分，你将更好地理解并使用它们。到目前为止，你一直在使用进行操作。它是在前端系统像今天这样复杂之前编写的。本文是前端练级攻略第二部分，第一部分请看下面：前端练级攻略(第一部分) 在第二部分，我们将重点学习 JavaScript 作为一种独立的语言，如...

BWrong 2019-08-23 16:49 评论0 收藏0
混合式app开发框架

摘要：混合式开发做出的手机应用无论在性能还是易用性方面都很接近原生应用。下面介绍几个流行的混合式开发框架。相比于其他开发框架，更加轻量，体积小巧。目前混合式开发已经逐渐成熟，混合式app开发只需要要求开发者会使用css和js前端代码就可以实现手机app应用的开发，而不需要再去学习安卓或苹果开发，降低了app开发的门槛。混合式开发做出的手机应用无论在性能还是易用性方面都很接近原生app应用。...

hot_pot_Leo 2019-06-27 15:43 评论0 收藏0
混合式app开发框架

摘要：混合式开发做出的手机应用无论在性能还是易用性方面都很接近原生应用。下面介绍几个流行的混合式开发框架。相比于其他开发框架，更加轻量，体积小巧。目前混合式开发已经逐渐成熟，混合式app开发只需要要求开发者会使用css和js前端代码就可以实现手机app应用的开发，而不需要再去学习安卓或苹果开发，降低了app开发的门槛。混合式开发做出的手机应用无论在性能还是易用性方面都很接近原生app应用。...

darkbug 2019-07-25 13:53 评论0 收藏0
前端每周清单半年盘点之 PWA 篇

摘要：前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于...

崔晓明 2019-08-20 19:01 评论0 收藏0