㈠ H5 与Native的交互方案
App里基本都少不了H5页面，因此js与Native之间的通信不可避免，最近留意了一些方案，做下总结。
iOS有两种webview，ios8以上推出了WKWebView，低于ios8用的是UIWebView，WKWebView性能上优于UIWebView
Native调用Javascript语言，是通过UIWebView组件的方法来实现的，该方法返回js脚本的执行结果。
双方只需要约定好JS端函数名称及参数
JS调用Native，并没有现成的API可以使用，需要借助iframe来实现。原理是在UIWebView内发起的所有网络请求，都可以通过delegate函数在Native层得到通知。所以只需要劫持该UIWebView内的所有请求（通常是这样的格式： jsbridge://methodName?param1=value1¶m2=value2 ），然后在UIWebView的delegate函数中，只要发现是jsbridge://开头的地址，就不进行内容的加载，转而执行相应的调用逻辑：
在android里是使用webview的loadUrl进行调用的
有两种比较好的方式：
JS端可以直接调用：alert(AndroidJS.getUserData()) //UserDate
基于 callHandler 和 registerHandler的方式，比较干净
1、 Web 与 App 数据交互原理和实现
2、 WK 与 JS 的那些事
3、 H5 与 Native 交互之 JSBridge 技术
4、 WebView 开车指南之最全实用案例
㈡ H5页面与原生App（安卓，IOS）交互
在客户端项目中，同一个app会开发成两个版本，一个是安卓版本，一个IOS版本，公司必须有两个开发团队（一个安卓团队，一个IOS团队）来进行开发，这样一来，开发成本非常之高。所以，往往在实际项目-中，会嵌套很多H5页面，一个H5页面同时兼容安卓和IOS两个系统 ，这样一来，大大减少了开发成本，前端开发页面就必须和原生进行交互。
1. 页面开发 —— 前端开发人员将所有的页面按照移动webappp进行开发，做好不同屏幕的适配（宽度100%,视口为移动端视口 (快捷方式meta:vp tap），字体适配rem单位，设置html根标签的font-size然后根据媒体查询判断设备屏幕大小进而设置html根标签的不同fontsize，去除移动端高亮显示；小图标要善于使用字体图标（常用的字体图标库有阿里巴巴矢量图），改变input标签的默认样式可以采用隐藏input,然后通过字体图标来控制前面的图标，就可以做成自己想要的图标效果）
2.前端页面部署 —— 设置好入口文件（原生一进来就进入的页面，命名为index.html），部署到对应的服务器上，通过网址就能够访问到页面，将网址给app客户端开发人员，他们将app配置好环境后讲页面嵌套在app中。
3.进行数据对接：两种对接方式（1）.前端页面自己通过ajax去后台拉数据，然后自己在页面上使用再提交给后台。前提是原生需要将对应的设备号，加密方式，请求数据所需要的各种参数通过回调函数传递给H5页面，H5页面拿到这些数据后直接调后台的借口、获取到数据。（2）.前端页面不用自己去后台拉取数据，而是通过回调函数，获取到原生app拉取的数据，前端页面将这些数据处理后又通过回调函数交给app，再又app发送给后台。两种调用的优劣比较：如果H5页面及数据不是很多，使用第二种方式比较合理，不用H5页面请求数据（不用封装请求，不用加密数据），不使用框架，大大减少了页面的大小，提高性能及用户体验。如果涉及到的前端页面非常多，数据交互比较复杂的话，就必须使用第一种对接方式了，app只需要将设备号，加密规则，参数传递给H5，H5根据页面需求自己向后台拉去和请求数据，直接交互，不再通过app进行转接，减小复杂程度。
㈢ h5与APP交互方式
举个简单的例子，有个需求是要和APP交互的，h5页面里面有个分享按钮，点击之后需要调用APP原生的分享功能
app那边写好了一个方法是onShare( )
第一步：就是点击分享好友触发
第二步：定义onShare方法调用APP方法
isAndroid_ios（）这个函数是判断是否是安卓或者是ios
因为安卓和ios的调用方法不同
以onShare()方法为例：
安卓：window.AndroidFunction.onShare('1'); // android
IOS：window.webkit.messageHandlers.onShare.postMessage(’1‘); //ios
里面可以传参给APP 的
这个h5这边很简单，只需要把方法挂载到window上，APP就能调用
具体为
㈣ H5必知必会之与App交互
奇技指南
2018年11月26日发表的“360 AI音箱H5开发实践”一文中，曾简单提到“与Native交互”。本文将就此主题深入探讨H5与App交互的几种常见模式。
本文内容如下：
H5，在中国被专门用来指代开发内嵌于手机应用中的网页的技术，外国好像并没有这个说法。从技术上讲，H5是HTML5即Hyper Text Markup Language（超文本标记语言）第5版的简称。而HTML只是开发网页要用到的多种技术之一。除了HTML，还要用CSS设计界面，用JavaScript实现交互，甚至要用Node.js实现服务端逻辑。为什么H5会被用来笼统地指代这些技术呢？我猜一是因为它简单，二是移动端网页开发技术又恰好需要这么一个概念。
移动端网页运行在手机应用内嵌的浏览器引擎中，这个没有UI的内核容器统称WebView，即iPhone的UIWebView（iOS 2.0–12.0）、WKWebView（iOS 8.0+，macOS 10.10+）和Android的WebView。总之，WebView就是在手机应用中运行和展示网页的界面和接口（神奇的是，英文Interface，既可以翻译成“界面”也可以翻译成“接口”）。
H5与原生应用的交互都是通过原生应用中的WebView实现的。通过这个环境，H5可以调用原生应用注入其中的原生对象的方法，原生应用也可以调用H5暴露在这个环境中的JavaScript对象的方法，从而实现指令与数据的传输。
比如，在Android应用中，WebView类有一个公有方法addJavascriptInterface，签名为：
调用这个方法可以向WebView中以指定的名称name注入指定的Java对象object。这样，WebView中的JavaScript就可以通过name调用object的方法。比如：
在iOS或macOS中，需要通过创建WKWebView类的实例在应用中嵌入网页，交互过程类似。
所谓基础接口，就是首先要规定原生应用和JS分别在WebView里注入/暴露一个什么对象：
并约定在这两个对象上分别可以调用什么方法：
顾名思义，NativeBridge.callNative是由JS调用向Native传递指令或数据的方法，而JSBridge.callJS则是由Native调用向JS传递指令或数据的方法。方法签名中的参数含义如下：
基础接口只有两个对象和两个方法，JS与App间的互操作则通过action和params来扩展和定义。
对于JS而言，虽然这里只定义了一个对象一个方法，但实践中，可以把action对应方法的实现附加到JSBridge上，只要把callJS实现为一个分发方法即可，比如：
这样，所有对callJS的调用，都会转化成对JSBridge上相应action方法的调用，优点是只需一行代码。
另一种实现方式是通过switch...case语句实现调用分发，比如:
这样实现的优点是所有方法一目了然，当然同样也是把所有相关接口都附加到同一个JSBridge对象上。
以上两种实现模式各有利弊。
由JS发起的单向调用App的操作，主要涉及加载URL和切换到原生界面，可对应如下action：
loadUrl调用的参考协议如下：
这里NativeBridge是App的原生对象，其callNative方法被调用时，会收到一个对象（字典/映射）参数。根据这个参数的action属性的值，App可知需要执行的操作是加载URL。于是再取得params属性中的url，发送请求即可。
loadContent调用的参考协议如下：
同上，这里通过params向App传递了必要参数，App负责切换到相应的原生界面。
由App发起的单向调用JS的操作，主要涉及用户点击后退按钮（<），可对应如下action：
can_back调用的参考协议如下：
此调用返回的值示例如下：
顾名思义，can_back用于App询问JS：在返回上一级界面前，是否弹窗提示用户？
返回值中的can如果是true，则直接返回，不提示；如果是false，则弹出一个确认框，请用户确认。另一个值target是与App约定的返回目标，比如prev表示返回上一级，top表示返回顶级，等等。
双向调用是JS先调用App，然后App在完成操作后再调用JS，双向通常都需要传递数据。双向调用主要涉及JS调用App原生组件和用户点击右上角按钮，可对应如下action：
loadComponent的参考协议如下：
在这个例子中，涉及JS调用App显示其实现的城市选择组件：type: 'location'，用户选择完城市之后，App再调用set_location，将用户选择的城市名称传给JS：
JS根据拿到的值更新界面，完成一次双向调用。另一个例子是JS调用原生的日期选择组件，与此类似。
为什么叫displayNextButton？因为根据具体业务场景，可能存在如下三种情况：
displayNextButton协议的参考实现如下：
以上代码示例表明，JS调用App，告诉App显示“下一步”按钮，但是要禁用变灰，因为enable: false。如果传递的是enable: true，那么用户就可以点击“下一步”按钮了。点击之后，App再调用JS的save_form。最后，如果不想显示按钮，可以传递name: ''。
下面重点说一下用户点击“下一步”按钮，App调用save_form的场景。此时也分两种情况：
如果是JS通过App保存数据——可能因为App端实现了数据写入必需的加密机制——那么，JS可以在App调用save_form时将约定好的数据返回给App，由App去保存数据。
如果是JS直接保存数据，比如通过Ajax，那么在保存完数据之后，则还需要调用前面所说的App暴露的loadUrl或loadComponent方法，以告知App切换界面。当然这种情况下会出现第三次调用，但仍然属于双向调用。
本文介绍了JS与App交互的几种模式，而且只讨论了JS端的实现。在开发实践中，团队各端总会面临哪一端主导的问题。本文展示的参考实现就是H5端主导的一种实现形式。H5主导的特点是把主要业务逻辑都封装到WebView中，App主要协同配合，而优点是业务逻辑的变更不会蔓延到App。毕竟相对于H5，App的安装部署模式会造成多版本共存问题，需要尽可能控制新版本。假如由App端主导，将逻辑封装在App端，势必造成版本不受控，给整个项目或产品埋下隐患。
当然，事无绝对。具体情况还要具体分析。而且，哪方主导有时候也取决多方面因素。实践中还是要因人、因时、因势制宜。
㈤ H5与小程序数据交互
功能已通过原生+vue混合开发的方式实现了，现需要将这个功能原封不动的搬到微信小程序。综合各方面评估，选择了微信小程序套webview的方式实现（若时间允许，建议还是通过小程序实现）。
采用小程序webview的方式，可以复用大部分H5页面，但H5调用的原生方法还是需要重新实现。实现方式主要分以下几种情况（当然也可以通过jssdk的方式去实现 https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3 ，但不在本文讨论范围内）：
(1) 获取照片，可通过html的input标签实现；
(2) 获取经纬度，可通过webview的url拼接参数实现；
(3) 人脸识别，可通过H5调起刷脸小程序的方式实现。
下面主要描述下第3种情况的实现方式。
H5与小程序交互所涉及的数据部分主要包括两块：
(1)H5如何将数据传给小程序？
url参数拼接。
(2)小程序如何将数据传给H5？
wx.setStorage及wx.getStorage。
详细流程如图所示。
webview小程序pageA调起人脸小程序pageB，pageB回退到pageA。因为pageA重新设置了webview的url，其所嵌套的H5与历史H5页面无法进行数据共享，导致业务功能无法继续。解决办法就是调起人脸小程序之前，在H5页面先将必要的信息通过 localStorage.setItem 保存，人脸识别结束回到H5页面时，再通过 localStorage. getItem 获取所需要的业务数据。
㈥ h5与原生交互
app混合开发，嵌入h5页面，应该是现在比较流行的一种开发方式。优点：开发速度快、app不用频繁提交审核、发版；缺点：h5的交互毕竟不如原生，开发时的沟通成本较大。
开发的过程中，会遇到一些h5或原生自身解决不了的交互，举例：在h5页面点击按钮弹出原生做的弹窗。
这个时候就需要通过h5调用原生的方法展示弹窗，反之一样。
其中 show 为ios定义的方法名， "显示弹窗" 是传过去的参数。
注意：参数不能为空！不然进去不方法。
也就是不可以postMessage()这样调用，没参数可以postMessage(null)
其中 supportJs 是android定义的js对象， show 为方法名， "显示弹窗" 是传过去的参数。
注意：定义的方法不接收参数的话，不能传参！不然进去不方法。
也就是不定义参数的话，show()这样调用
然后就可以在原生中调用方法名为Hybrid.show的js方法了，js接收一个参数，也可以根据实际业务定义多个参数。
㈦ 《H5匠人手册》1：H5交互流程
H5交互流程矩阵图 1、项目沟通 1.1 邀请参与者开会： 组织参与者碰头会：参与者包括项目负责人、产品经理、设计人员、开发人员、利益相关部门人员等 项目相关者全部到场，确认基本工作量、技术设计边界、项目工期安排、避免不不必要的返工 1.2 明确项目背景： 前期会议要明确项目背景、却敌那个项目的整体规划，整体包括： 1）项目背景：项目主题、目标受众、决策方、是否有第三方参与、是否有商业合作等 2）商业目的：需要突出的商业元素、预期达到什么样的传播效果 3）重要程度：判断策划的难易、交互逻辑、设计风格、开发资源 4）上线时间：确定开发周期 1.3 常见问题： 1）项目方想展示的文本内容过多 2）发起方对核心交互方式把握不够精准 3）技术开发难度 4）需求文档不清晰 2、策划评估 2.1、动机——是否能在短时间内吸引用户注意力并完成阅读 、 影响用户浏览的重要因素：目标&情感 目标指用户的目的性,目的性的强弱在很大程度上决定了用户浏览的耐心，用户完成某个操作的目的性月强，他就越可以忍受过程中带来的不愉快的体验， 应用的目的性往往是由产品的属性决定的。 用户情感：决定了用户可以接受影响的程度，一般主观性越强用户越容易受到情绪的影响进而改变行为。 1）利用心流理论控制节奏 进入心流状态的用户通常有两个重要的表现：一是完全投入一项活动并从中感受到愉悦，二是关注体验过程从而忽视时间。在H5中我们要做的就是通过心流把控影响用户的主观因素。 与心流关系密切的两个要素：“挑战”和“技能” 从高挑战对应中技能的“激发”状态，让用户不断提高技能后进入高挑战对应的高技能的“心流”状态，随着技能的不断提高，原来的高挑变为了中挑战，于是用户就又进入了“激发”状态；如此往复，才能让用户达到一个正向循环，促进心流的过程。所以在H5的设计过程中，如果我们能让用户达到这样的过程，就能牢牢抓住用户，让他们有耐心，有兴趣浏览完我们的H5。 2）利用HOOK理论引导用户 引导用户的行为需要4个步骤：触发（诱因）—行为—多变的酬赏—投入①触发与行为： 促进一个人的行为的有三个关键因素：触发，动机、能力（福格行为模型） 通过触发引导用户进入到一个HOOK循环后，用户在完成任务时，影响任务的难易程度有6个要素： 1、时间：完成这项任务所需要的时间 2、金钱：从事任务所需要的经济投入 3、体力：完成任务所需要的体力 4、精力：从事任务需要消耗的脑力 5、社会偏差：他人对该项活动的接受度 6、非常规性：该项活动与常规活动之间的匹配程度或矛盾程度 在H5的设计范围中，最常用到的是如何控制用户花费的时间、精力。尽量让用户加快浏览速度，可以为用户节省时间，不要设置过于复杂的操作，为用户节省精力。 ②多变的酬赏： 在用户行动后，一定要给用户提供丰富的不可预知的奖励。多变的酬赏并不是漫无目的的； 我们设置酬赏的时候要给出一个明确的目标范围，而不是用户无法预期的结果。 酬赏的三种表现形式： 社交酬赏：即社会认同感，人们通过社交产生奖励，例如朋友圈中的点赞和评论。 猎物酬赏：即人们在使用中获得直接物质奖励，例如抢代金红包。 自我酬赏：即人们在活动过程中获得的操控感、成就感，例如坚持健身打卡获得的勋章。 ③投入 ：在投入环节我们要让用户付出一些东西，例如时间、精力、金钱等，这些会让用户产生新的动机，让用户再次进入行为环节继而进入下一个上瘾循环。我们在策划过程中，可以尽量让用户通过主动生产内容的方式参与到H5中，增加用户在H5中的投入，用户投入越多，越不会轻易离开。 2.2、框架—展现形式是否符号策划主题 按照交互的复杂程度，将展现形式分为三类： 1）展示型： 涉及的交互非常少、多以展示内容为主 2）引导型： 通过一些交互引导用户完成操作 3）操作型： 涉及大量的交互，吸引用户完成操作 通过策划创意、交互程度、阅读体验、视觉表现、技术能力5个维度对各展示类型评价 ①展示型：展示型按交互从弱到强分为：视频类、幻灯片类、空间展示类。展示型H5，是指打开页面仅通过几个简单常规操作甚至不操作，就能直观看到展示内容。这类H5的优势是易于流畅地呈现一个完整的故事或品牌形象，交互层级少，技术难度低。缺点也比较明显，对内容要求非常高，得足够吸引用户看完整个内容，如果交互形式简单乏味，也容易造成用户流失。 视频类： 视频要足够吸引人 视频不要过长。如果过长，建议分段播放 视频分段后，可用交互手势连接 幻灯片类： 着重优化动效和视觉，页数尽量控制在6-8页 尽量在结构和页面连接上创新，增加有趣的交互 空间展示类： 结构层级越少越好 交互尽量简单清晰 ②引导型：互动视频类和小场景类。引导型表现形式丰富，让用户在阅读中始终保持沉浸感。不断变化的交互方式或反馈奖励能激励用户不断的阅读。但劣势和展示类一样，还需要强大的策划能力，创意和情感因素才能支撑整个H5。 互动视频类： 可以让用户引导故事走向，增加不确定性 可以利用交互点的精确把控，准确地配合故事结构，让故事更生动。 小场景类： 场景之间有一定的关联和过渡，让场景更加连贯。 场景间的过渡尽量不要重复，尽量符合场景所在的剧情。 需要给用户明确的提示和引导。 ③操作型：小游戏、做测试和技术类。操作型是指用户更主动和深入地与H5交互，通过操作控制H5的走向和结果。 小游戏： 能够快速的吸引用户注意力，快速带领用户进入心流 游戏中可以穿插策划需要突出的重点 小游戏可以给予用户独特的成就，以便增加分享几率 要给予用户操作上的引导 不要讲H5的体量做的过大，导致加载问题。 做测试: 这类策划最好和用户的社交属性相关联 最终结果最好难以预料、调动用户的好奇心 可以通过回答不同难度的问题，得到不同的结果 技术类： 以技术为向导、强调产品的特性 突出主题中的某些特点 2.4、交互—交互方式与策划是否匹配 2.5、原则—是否符合移动端的交互原则 1）简化层级，结构扁平化 移动端由于设备本身的限制，没有足够的空间来展示路径，如果没有清晰的层级关系，或者需要进入层级更深的页面才能找到用户想要的，这意味着用户会迷失方向，这时更应该减少层级的深度。 2）降低阅读门槛，减少认知成本 实现方法： 单页面操作单一化 多页面操作一致化 通过拟物化设计减少用户认知成本 利用手机传感器，让交互更自然 3）H5要注意分享属性 促进分享的方法： 在结果中带有一定的社交属性 分享后直接获得奖励 产生心理共鸣、击中用户 用户获得成就感，要晒给大家看 如何增加回流 ： 充分发挥社交属性、打造个性化分享链接 善于利用热点和流量点 3、产出 3.1、界面落实 交互设计师产出交互稿，跟进项目 完整的流程图：表面加载点、提示点、动效点、操作点、跳转逻辑等 交互文档：交互页面、页面所需的交互手势、点击位置、跳转逻辑、动效、加载位置等 3.2、完善细节 3.3、沟通跟进 1）加载与控件文件的大小 一般H5的大小建议控制在5M以内，用户在流畅的网络环境中可以1S之内加载完成。 减少H5大小的方法： 1）图片压缩：PNG格式的图片，导出时建议使用PNG-8格式，颜色位数建议选择256 2）文字处理：一般500个汉字所占内存约1KB，而一张文字转图片至少10KB，因此，除非应用特殊字体，不建议将文案以图片的形式输出。 加载处理方案： 1）全局加载：在H5封面出来之前一次性加载全部内容。在查看H5过程中不会出现卡顿的现象，用户体验流畅，不过加载时间过程，当文件过大时，在加载时应提醒用户注意流量。 2）优先加载：按照内容的重要程度，先将主要部分加载出来，再加载次要的部分。一般用于图文混排，优先加载文字，再加载图片。 3）分段加载：将H5分成若干段落，当用户看到某一段落后再对下一段落进行加载。适合分章节策划的H5。 3.4、测试上线与数据监测 常规的测试要点包括： 1）跳转逻辑是否正常 2）页面展示逻辑是否流畅 3）平台之间是否有交互冲突 4）H5的加载速度如何，能否再压缩H5的大小。