浅聊支付宝小程序web-view通讯的坑

浅聊支付宝小程序web-view通讯问题

最近在公司做支付宝小程序的开发，由于公司的产品 需要快速迭代，小程序的审核机制的存在，不能满足需求，所以采用了web-view的方式来做，通过对H5的发布，就可以快速的迭代产品，但是在这个过程中由于不是用小程序原生JS去做的，会有一定的限制，有一些功能不能正常使用，这时候，就有一个对开发者非常友好的功能，就是小程序和H5直接的相互通讯，通过这个接口，可以实现，H5调用小程序的相关能力，比如：JSAPI支付，比如唤起扫码功能，比如小程序之间的跳转，当然，在开发过程中，这个通讯机制和web-view本身存在一些坑，一些问题，这里我一一阐述出来，给看到这篇文章的小伙伴，以及我自己一个提醒

1. 有时在ide中，模拟线显示加载异常

   这个我一开始遇到的时候也很懵逼，一开始好好的，突然就加载异常了，后来，发现，
   这个可能是web-view在ide中存在的问题，你想要预览画面，可以直接在模拟器上方，
   生成预览码，手机上扫码预览，一点问题都没有，或者你想在ide上看的，有时候H5报错，
   我们需要查看H5具体报错，先重启一下ide，然后在模拟器上方有一个田字按钮，点击，
   选择web-view调试 就可以看到h5的控制台，查看报错了

2. 小程序对H5进行通讯，这个简直大坑，

 我在开发唤起扫码能力的时候，发现扫码api回调给我的code不能正常通讯给H5，
 H5的监听方法我试过写在最外层，写在方法中，写在初始化的时候，发现都不可以
 不断的调试，更具问题1知道ide的尿性之后，我试着重启ide，使用预览码，使用
 真机调试，上传代码设置为体验版，发现怎么都不可以，就是监听不到小程序对H5
 的通讯，最后在绝望中，提交了一次小程序审核，通过后，在线上小程序中调试发现
 居然H5监听到了小程序的通讯，当时我热泪盈眶，恨不得和ide的开发人员来一场线下
 的1V1男人大战

3. web-view标签一定要添加一个id属性

 还是通讯的事情，一开始不知道要加这个，在小程序初始化的时候渲染一下，不然也可能导致
 小程序与H5之间的通讯失败，

结尾：三个注意的要点被我说的很长，主要就是吐槽一下坑爹的ide当然也是记录一下我小程序开发的心路历程，希望对看到的小伙伴有一点点的帮助谢谢