一，为什么要用webview
公司目前要做出行业务，第一个入口确定为微信小程序。
作为老鸟，不得不多问一嘴，后面可能还有其他入口么？
得到的回答是：后续可能还有支付宝小程序，高德小程序，百度小程序，公众号，出行app。
在这样一个需求场景下，我们没有那么多资源去投入到多端的原生开发，webview方案成了唯一的选择。
二，技术验证
既然要用，那么必然就要进行一些技术验证。
因为之前有过ioswebview加载h5性能不佳的体验，所以当时笔者主要的担心是webview加载h5的性能。
迅速写了demo一尝试，哇靠，还挺快。
性能不担心了，然后就去网上搜了搜常见问题。一看都有解决方案，也没怎么担心。
这个时候，笔者觉得没什么瓶颈了，按部就班的去开发就好了。一切都是那么的美好。
三，项目启动进入开发
问题很快就浮出水面
top10：微信登陆后，如何把身份传给h5
方案：这个问题比较简单，在webview的url字符串上传递就是了。迅速解决，这种feel很nice啊
但要注意，当小程序从后台模式切换到前台模式时，在onshow里要进行身份的有效性检查
top9：小程序cookie和微信共享，切到后台不丢失
第一个页面开发完和后台接口联调的时候，突然发现token有问题（为了前后交互安全，基于OAuth实现的令牌）。
我们的h5网站也是可以微信浏览器访问的，但发放的token和小程序的是有差异性的。反反复复折腾了两天，才知道小程序的cookie和微信共享，而且后台运行时依然保留。
方案：进入时判断是否小程序，是的话全部清理token，重新获取，保证cookie数据的一致性
top8：判断是否小程序内运行
当时开发人员为了能方便调试，在代码中加个一个判断，如果不在小程序，就不去调用小程序的专有api。
写的有点花里胡哨的，判断user-agent，后来发现ios有bug还兼容了一把。
但笔者总觉得太麻烦，兼容性也不太靠谱。
方案：小程序webview的url加个参数&isSP=true，程序里判断一把就ok了。绿色环保无污染
top7：坚挺的缓存
方案：开发测试时，在微信【设置】->【通用】->【存储空间】->【缓存】中彻底清理缓存，以保证加载最新的页面
发布生产后，就需要有较好的版本管理。首页设置Cache-Control:no-store，始终加载最新html,同时在首页中根据版本号判断是否需要加载最新的js脚本
top6：分享或支付的转弯实现
微信SDK里面没有直接分享的调用。所以这个地方需要变通实现
1.在可以分享的页面增加一个分享按钮
2，当点击该按钮时，打开一个新的小程序页面，参数通过url传递
3，在新打开的小程序页面里，进行真正的分享操作。
小程序分享页面代码如下：
top5：启动小程序如何区分是否分享进入
先看看两者的实际场景区别：
1，通过分享页面进入，会直达目标页面。
2，如果正常启动小程序，显示的是首页
哪如何区分这两者呢？可以通过在小程序的app.js的onShow里加代码处理
top4：高德地图的优化加载
按照标准的方式，在head里加入高德script，会有什么问题呢？
如下：
1，h5页面反复跳转或返回，高德地图多次加载
2，高德地图的响应不稳定。慢的时候会阻塞整个页面的渲染。
因为高德地图在首页，我们想尽快的给用户显示内容，以避免客户流失。
方案如下：
1，preload高德地图js
2，在使用的时候，通过createElement+appendChild的方法，进行懒加载。
3，缓存高德地图对象，再次进入页面如果存在地图对象，不进行2的操作
最终效果：客户会先看到头部和底部内容，高德地图慢慢显示。体验有所提高
top3：webview间sessionStorage数据不共享
这个问题的痛点不在于如何解决。方案可以用cookie或localstoreage来替代。
重点是不知道！不知道！不知道！
top2：返回按钮实现
正常情况来说，当h5运行在浏览器的时候。
跳转新页面左上会显示一个向左的返回箭头。
哪如果在webview你也想煎饼果子来一套怎么办？
和浏览器的区别就是，你得保证有两个webview。然后h5的正常跳转就会达到预期效果。
我们的做法是，首页是一个webview，在这个页面上只存在一个跳转按钮，该按钮点击打开一个新的webview。
top1：后台切换到前端的h5加载
该问题只是对于我们项目是top1问题，大家关注问题点即可。
由于我们系统前后端交互加入了OAuth的验证机制，所以会有一个token传递，该token15分钟过期
首页加载的时候，获取token，通过webview的url传递给h5
那么问题来了，如果小程序被切到后台，15分钟后再切到前台怎么办？同时我们还想好好利用这15分钟的缓存优化切换到前台的加载速度。
最终方案如下：
1，检测是否新用户，新用户直接静默登陆url赋值给webview
2，不是新用户，记录时间，判断是否13分钟之内（比15分钟稍微小一点，保留点余地）的二次访问，是的话，不做任何处理
3，如果超过13分钟，那么重新获取token，给webview新的url
上述操作在onShow里实现
写在最后
通过项目实践，整体来讲，h5内嵌webview，还是有很多不成熟的地方，微信sdk的js api提供的也比较少。
就现状来说，给将要使用webview的建议就是：
