拖稿了好久的「Hybrid APP开发系列」又更新了~
今天继续写JSSDK

为什么会有JSSDK

我之前文章介绍了通过 JSBridge 实现页面和NA的相互调用，并且介绍了模板本地包的开发和后台维护系统。今天介绍的是JSSDK，通过 JSSDK 可以实现：

1. 抹平JSBridge的平台实现差异
2. 对齐端能力，内部消化版本差异
3. sdk封装后的代码更加符合前端习惯
4. 权限控制、鉴权、对外开放，实现生态建设

关于sdk的代码级别的设计，可以参考文章：《JSSDK设计指南》

如果做过微信页面开发的，应该都知道wx.js，这就是微信的JSSDK，在微信内需要调用微信的端能力就需要引入这个js。

JSSDK的设计

JSSDK的设计包括两部分：

1. 随着每个NA客户端版本内置的js，称为：inject.js，他的主要作用是封装JSBridge逻辑，通过随版更新实现减少端能力的版本分裂，降低整个sdk的代码复杂性。inject.js是一段js代码，当客户端加载一个页面的时候，由客户端在适当的时机注入到webview内执行，执行后的代码就会有给webview增加js方法，例如微信的_WeixinJSBridge，类比chrome开发插件当中的content_scripts，可以在document_start 、document_end等时机进行执行。
2. 云端JS，即实际暴漏给开发者使用的js，称为：jssdk.js，这个是真正开发者使用的sdk文件，通过script外链引入，例如wx.js，这个js文件通过和inject.js进行交换，完成端能力的调用、鉴权和客户端事件监听等操作

大上周文章提到了Hybrid的模板本地化解决方案，本文介绍下模板包的管理平台。

管理平台功能

模板包的管理平台主要功能包括：

1. 自动编译
2. 自动增量
3. 上传包
4. 推送下发
5. 提测
6. 小流量&灰度：按客户端id下发、小流量
7. 数据收集：收敛，速度，监控

上次文章介绍了Hybrid开发中常用到的Web和NA的通信方案：JSBridge，通过比较之后，最终推荐安卓和iOS通用的scheme协议，可以保证APP内和外都可以使用，今天开始正式介绍整个Hybrid架构内容。就像本系列「开篇语」提到的，这里的Hybrid是「狭义的Hybrid」，而不是所有的NA套个webapp就是Hybrid。

好的架构不是随波逐流，应该经得起考研

Hybrid技术体系是一套很多技术组成的完整知识架构。拿手百Hybrid方案，包括规范/约定、开发、联调、服务支撑等整个开发流程，而随着PWA之类「新」技术的产生又在考研技术架构面向未来的设计能力，所以手百Hybrid还在不断完善，注意是不断完善，不是推到重来！手百Hybrid技术整体架构如下：



接下来系列会围绕本架构图中重要的部分依次展开，全面的介绍Hybrid开发知识，本文介绍模板本地化开发方案。

所谓「模板本地化」，就是将Web页面内置到APP内，随版发布上线，然后通过云端接口实现更新，再直白一点：将H5网站的页面预先放到客户端发版，然后云端更新新版本。

这个方案好处在于：

• 本地化模板提高页面打开速度，减少用户等待时间
• 模板可更新，版本控制更方便可控，收敛快
• Web页面和NA内置代码实现一套代码，减少开发成本
• 上手成本小，开发就是实际开发Web（H5）页面，通过构建工具，生成Web页面和NA模板包不同的代码
• 标准H5代码，迁移成本小，通过Node和构建工具，可以做到H5版本前后同构，将来还可以不改代码的前提下适配PWA

本文提到的JSBridge调起协议是统一使用hybrid://开头，只是提供思路和介绍整体Hybrid模板包架构和用到的技术，不涉及到具体代码，但是文章保证干货和诚意都满满😄。

模板本地化实现方案

本文会介绍两种模板本地化方案，分别是：依赖客户端拦截器（proxy）的方案一；完全无域名限制的方案二，两个方案的实现流程如下：



Hybrid开发中，web页面往往会跟native进行交互，而JSBridge就是web页面和native进行通信的桥梁，通过JSBridge可以实现web调用native的方法，native可以通过webview.loadUrl之类的方法，将javascript:xxx代码放在页面执行，这有点类似在浏览器地址栏直接输入：javascript:xxx

本文较长，先把目录列出来：

• JSBridge多种形式
  • js Interface 直接注入到window对象
  • 改写浏览器原有对象：alert/console/prompt
  • URL scheme
• 唤起APP技术
  • intent
  • localserver
  • scheme：deeplink/applink/Universal link
  • smart app banner
• JSBridge安全
• JSBridge的最佳实践
  • 协议规范
  • 回调函数
  • 预留升级/统计能力
  • 简单JSBridge调用封装

JSBridge多种形式

web和native进行通信，方法有很多，接下来一一列举一下JSBridge的多种形式，及其利弊。

JavaScriptInterface

JSInterface是安卓4.2-官方推荐的解决方案，原理是通过WebView提供的addJavascriptInterface方法给浏览器window注入一个命名空间，然后给Web增加一些可以操作Java的反射。

// Android java代码
mWebView.addJavascriptInterface(new Class(), 'android');  

public class Class(){
  @JavascriptInterface
  public void method(){

  }
} 
// js 代码
window.android.method();

JSInterface在4.2之前的版本都可以，但是存在严重的安全隐患，容易被利用提权，从而调用各种Java的类和权限，甚至页面可以挂马。在我们实际产品（手机百度）开始阶段，用过这个方法，不过现在已经不使用了。