夹杂运用中的javascript实践

2024年3月28日 179次阅读 来源: 烈日神巫

夹杂运用(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 截图

其他

兼容性

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

假如挑选体系默许浏览器作为内嵌浏览器的话，ios平常兼容性较好，能获得和PC端一致的结果。android机型则会比较悲剧，运用 crosswalk计划 或许是个准确的挑选。

特征启用

在内嵌浏览器中，html5的某些特征默许是封闭的，比方 localStorge , 须要app端手动去开启。所以在开辟中一定要做好可用性检测，削减涌现bug的概率。

部分视图

当html作为webview的部分视图被加载时，因为app虽然能够猎取到页面加载后的高度，然则没法猎取动态转变后的高度，使得部分转动失效。
所以在作为部分视图加载时，假如须要页面高度会依据比方批评，动画结果而发作转变的话，须要实时关照app更新webview高度。

    原文作者：烈日神巫
    原文地址: https://segmentfault.com/a/1190000005815049
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞