小程序webview实践

大师好，我是转转开放营业部前端负责人张所勇，明天首要来跟大师分享小法式webview方面的题目，但我并不会讲小法式的webview道理，而我首要想讲的是小法式内若何嵌入H5。

那末好多同学会想了，不就是用web-view组件便可以嵌入了吗，是的，假如我们的小法式和H5的营业比力简单，那间接用webview接入就行了，但我们公司的h5除小法式之外，还运转在转转app、58app、赶集app等多个端，若何能实现一套代码在多端运转，这是我明天首要想分享的，是以明天分享更合适h5页面比力复杂，存在多端运转情况的开辟者，期待能给大师供给一些多端兼容的思绪。



image
下面我先跟大师先容下明天演讲首要的大纲。

• 小法式技术演进
  
• webview VS 小法式
  
• h5多端兼容计划
  
• 小法式sdk设想
  
• webview常见题目
  

1 转转小法式演进进程



image
相信在座的很多同学的产物跟转转小法式履历了类似的成长进程，我们转转小法式是从客岁五月份起头开辟的，那时辰也是小法式刚出来未几，我们就快速用原生语法搭建了个demo，功用很简单，就是首页列表页详情页。
然后我们从7月份起头进入了第二个阶段，这时辰各类中大型公司已经意想到了，借助微信的庞大用户群，小法式是一个很好的获客渠道，是以我们也从demo阶段正式的起头了小法式开辟。那时辰我们全部团队从北京跑到广州的微信园区里面去封锁开辟，我们一方面在做小法式版本的转转，实现了买卖焦点流程，苦苦的做了两三个月，DAU始终也涨不上去，另一方面我们也在做很多营销活动的尝试，我们做了一款简单的测试类的小游戏，居然几天就刷屏了，上百万的pv，一方面我们很欣喜，另一方面也很为难，由于大师都是来玩的，不是来买卖的，所以我们就起头了第三阶段。
这个阶段我们停止了大量的开辟工作，让我们的小法式功用和体验接近了转转APP，那到了今年6月份，我们的小法式进入了微信钱包里面，我们的DAU峰值也到达了万万级别，这时辰可以说已经成为了一个风口上的新平台，这个时辰题目来了，公司的各条线营业都起头想接入到小法式里面。



image
因而乎就有了上面这段对话。
所以，为了可以更好接入各营业线存量h5页面和新的活动页，我们起头动手停止多端适配的工作。
那我们会斟酌三种开辟计划（我这里只说弱点）



image
在webview这个组件出来之前，我们是采用第一种计划，用纯小法式开辟一切营业页面，那末合适的框架有现在支流的三种，wepy，mpvue、taro，弱点是不够灵活，开辟本钱庞大，真的很累，特别是营业方来找我们想介入小法式，但他们的开辟者又不会小法式，那时又不能嵌入H5，所以营业方都希望我们来开辟，一切营业都来找，你们可以想想本钱又多高，这个计划必定是不成行，第二种计划，就是一套代码编译出多套页面，在分歧端运转，mpvue和taro都可以，我们公司有营业团队在利用mpvue，编译出来的成果不是出格理性，一是性能上面没有到达理想的状态，二是api在多端兼容上面二次革新的本钱很高，各个端api差别很大，假如是一个简单的活动页还好，但假如是一个跟端有很大功用交互的页面，那这类方式实在很难实现。
那我们采用的是第三种计划，今朝我们的小法式是作为一个端存在，像app一样，我们只做首页、列表、详情、采办等等焦点页面都是用小法式开辟，每个营业的页面、活动运营页面都是H5，而且用webview嵌入，这样各个营业接入的本钱很是低，但这也有弱点，1是小法式与h5交互和通讯比力麻烦，二是我们的app供给了很大功用支持，这些功用在小法式里面都需要对应的实现
2 webview VS 小法式



image
这张图是我小我的了解。（并不代表微信官方的看法）
把webview和小法式在多个方面做了比对。
3 h5多端兼容计划



image
未来除了小法式之外，能够会多的端存在，比如智能小法式等等，那我们期望的成果是什么呢，就是一套H5能运转于各个情况内。



image
这能够是最差的一个case，h5判定地点的情况，去挪用分歧api方式，这个case的题目是，营业逻辑出格复杂，功用耦合很是严重，也根基上没有什么复用性。



image
那我们转转采纳的是什么计划呢？
分三块，小法式端，用WePY框架，H5这块主如果vue和react，中心经过一个adapter来毗连。我们转转的端出格多，除了小法式还包括纯转转app端，58端，赶集端，纯微信端，qq端，阅读器端，所以H5页面需要的各类功用，在每个端都需要对应的功用实现，比如登录、公布、付出、小我中心等等很多功用，这些功用都需要经过adapter这其中心件停止挪用，接下来具体来说。



image
我这里就不贴代码了，我只讲下adapter的道理，首先adapter需要初始化，做两件工作，一是产出一个供h5挪用的native工具，二是需要检测当前所处的情况，然后按照情况去异步加载sdk文件，这里的关键点是我们要做个api挪用的行列，由于sdk加载时异步的进程，假如时代页面内发生了api挪用，那必定得不到正确的响应，是以你要做个挪用行列，当sdk初始化终了以后再处置这些挪用，实在adapter道理很简单，假如你想实现多端适配，那末只需要按照地点的情况去加载分歧的sdk便可以了。



image
做好adapter以后，你需要让每个h5的项目都引入adapter文件，而且在挪用api的时辰，都同一在native工具下面挪用。
4 小法式sdk设想



image
我们总结小法式供给给H5的功用大致分为这四种，第一是基于小法式的五种跳转才能，比如封闭当前页面。



image
那我们看到小法式供给了这五种跳转方式。



image
第二是间接利用微信sdk供给的才能，比如扫码，这个比力简单。第三是h5翻开小法式的某些页面，这个是最常用的，比如进入下单页等。



image
对应每个api，小法式这边都需要实现对应的页面功用，大师看这几个图，skipToChat就是进到我们的IM页面，下面依次是进入小我主页，定单详情页，下单页面，实在我们的小法式开辟的首要工作也是去做这些根本功用页面，然后供给给H5，各个营业根基都是H5实现，接入到小法式里面来，我们只做一个平台。



image
这是进入小我主页方式的实现，实在就是进入了小法式profile这个页面。



image
第四就是h5与小法式间接的通讯才能，这个比力集合表现在设备分享信息和登录这块。
4.1 设备分享



image
上面（adapter）做好了今后，在h5这块挪用就一句话便可以了。



image
小法式和h5 之间的通讯根基上常用两种方式，一个是postMessage，这个方式大师都晓得，只要在三种情况才可以触发，前进、烧毁和分享，但也有个题目，这个方式是根本库1.7.1才起头支持的，1.7.1以下就只能经过第二种方式来传递数据，也就是设备和检测webview组件的url变化，类似pc时代的iframe的通讯方式。



image
sdk这块怎样做呢，界说一个share方式，首先需要检测下根本库版本，看能否支持postMessage，假如支持间接挪用，假如不支持，把分享参数拼接到url傍边，然落后行一次重载，所以说经过url传递数占有个弱点，就是页面能够需要革新一次才能设备成功。



image
我们看下分享信息设备这块，小法式这端，首先经过bindmessage事务接收h5传返来的数据，然后在用户分享的时辰onShareAppMessage判定有没有回传的数据，假如没有就到webviewurl傍边取，否则就是用默许分享数据。



image
h5调分享这块，我们也做了一些优化，传统方式是要四步才能掉起分享面板，点页面里的某个按钮，然后给用户个提醒层，用户再去点右上角的点点点，再点转发，才能拉起分享面板。



image
我们后来改成了这样，点分享按钮，把分享信息带到一个专门的小法式页面，这个页面里面放一个button，type=share，点一下就拉起来面板了，虽然是一个小小的修改，但能大幅进步分享成功率的，由于很多用户对右上角的点点点不太敏感。
4.2 登录
接下来我们看看登录功用



image
分两种情况，接入的H5能够一路头就需要登录态，也能够起头不需要登录态中途需要登录，这两种情况我们约定了h5经过自己的url上一个参数停止控制。
一路头就需要登录态的情况，那末在加载webview之前，首先辈行授权登录，然后把登录信息拼接到url里面，再去来加载webview，在h5里面经过adapter来把登录信息提取出来而且存到cookie里，这样h5一进来就是有登陆态的。
一路头不需要登录态的情况，一进入小法式就间接经过webview加载h5，h5挪用login方式的时辰，把needLogin这个参数拼接到url中，然后操纵api停止重载，就走了第一种情况停止授权登录了。
5 webview常见题目
5.1 区分情况
第一是你若何区分h5地点的情况是小法式里面的webview还是纯微信阅读器，为什么要区分呢，由于你的H5在分歧情况需要分歧的api，比如我们的营业，下单的时辰，假如是小法式，那末我们需要进入小法式的下单页，假如是纯微信，我们之间进纯微信的下单页，这两种情况的api实现是纷歧样的，那末为什么难区分，大师能够晓得，小法式的组件分为内置组件和原生组件，内置组件就是小法式界说的view、scroll-view这些根基的标签，原生组件就是像map啊这类，这实在是挪用了微信的原生才能，webview也是一品种似原生的组件，为什么说是类似原生的组件，微信并没有为小法式专门做一套webview机制，而是间接用微信自己的阅读器，所以小法式webview和微信阅读器的内核都是一样的，包括UA头都是如出一辙，cookie、storage当地存储数据都是互通的，都是一套，是以我们很难区分具体是在哪个情况。



image
还好微信供给了一个情况变量，但这个变量不是很正确，加载h5今后第一个页面可以实时拿到，但后续的页面都需要在微信的sdk加载完成今后才能拿到，是以倡议大师在wx.ready大概是weixinjsbridgeready事务里面去判定，区分就在于前者需要加载jweixin.js才有，但这里有坑，坑在于h5的开辟者能够并不晓得你这个检测进程需要时候，是一个异步的进程，他们能够页面一加载就需要挪用一些api，这时辰便能够会出错，是以你一定要供给一个api挪用的行列和期待机制。
5.2 付出
第二个常见题目是付出，由于小法式webview里面不支持间接掉起微信付出，所以根基上需要付出的时辰，都需要来到小法式里面，付出完再回去。



image
上面做好了今后，在h5这块挪用就一句话便可以了。



image
我们转转的营业分两种付出情况，一是有的营业h5有自己完善的买卖系统，下单行动在h5里面便可以完成，他们只需要小法式付款，是以我们有一个精简的付出页，进来间接就拉起微信付出，还有一种情况是营业需要小法式供给完整的下单付出流程，那末久可以之间进入我们小法式的收银台来，图上就是sdk里面的根基逻辑，我们经过payOnly这个参数来决议进到哪个页面。



image
我们再看下小法式里面精简付出怎样实现的，就是onload以后之间挪用api拉起微信付出，付出成功今后按照h5传返来的参数，假如是个小法式页面，那之间跳转曩昔，否则就革新上一个webview页面，然后返回回去。
5.3 formId收集
第三个题目是formId，webview里面没有法子收集formId，这有什么影响呢，没有formId就没法发办事告诉，没有办事告诉，营业就没法子对新用户停止召回，这对营业来说是一个很大的损失，今朝实在我们也没有很好的计划收集。



image
我们今朝首要经过两种方式收集，拜候量比力大的这类webview落地页，我们会做一版小法式的页面大概做一个小法式的直达页，只要用户有任何触摸页面的操纵，都可以收集到formid，别的一种就是h5进入小法式页面时辰收集，比如付出，IM这些页面，但并不是每个用户城市进到这些页面的，用户能够一进来看不感爱好，就间接退出了，是以这类方式存在很大的流失。
5.4 左上角返回
那怎样处理这类流失呢，我们加了一个左上角返回的功用，。



image
首先辈入的是一个空缺的直达页，然落后入h5页面，这样左上角就会出现返回按钮了，当用户按左上角的返回按钮时辰，页面会被重载到小法式首页去，这个看似简单又细小的行动，对营业实在有很大的影响，我们看两个数字，经过我们的数据统计发现，左上角返回按钮点击率高达70%以上，由于这类落地页通常为被用户分享出来的，之前纯h5的时辰只能经过左上角返回，所以在小法式里用户也习惯如此，第二个数字，重载到首页今后，后续页面拜候率有10%以上，这两个数字对营业提升实在蛮大的。



image
实在现道理很简单，都是经过第二次触发onShow时停止处置。
以上就是我明天全数演讲的内容，感谢大师！
在这里给大师供给一个进修交换的平台，java架构师群： 867748702
具有1-5工作经历的，面临今朝风行的技术不知从何动手，需冲要破技术瓶颈的可以加群。
在公司待久了，过得很安逸，但跳槽时口试碰鼻。需要在短时候内进修、跳槽拿高薪的可以加群。
假如没有工作经历，但根本很是踏实，对java工作机制，常用设想思惟，常用java开辟框架把握熟练的可以加群。
________________________________________________________________________________________________
加Java架构师进阶交换群获得Java工程化、高性能及散布式、高性能、深入浅出。高架构。
性能调优、Spring，MyBatis，Netty源码分析和大数据等多个常识点高级进阶干货的直播免费进修权限
都是大牛带飞 让你少走很多的弯路的 群号是： 867748702对了 小白勿进 最好是有开辟经历
注：加群要求
1、具有工作经历的，面临今朝风行的技术不知从何动手，需冲要破技术瓶颈的可以加。
2、在公司待久了，过得很安逸，但跳槽时口试碰鼻。需要在短时候内进修、跳槽拿高薪的可以加。
3、假如没有工作经历，但根本很是踏实，对java工作机制，常用设想思惟，常用java开辟框架把握熟练的，可以加。
4、感觉自己很牛B，一般需求都能搞定。可是所学的常识点没有系统化，很难在技术范畴继续冲破的可以加。
5.阿里Java高级大牛直播讲授常识点，分享常识，多年工作经历的梳理和总结，带着大师周全、科学地建立自己的技术系统和技术认知！