浅聊支付宝小程序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当然也是记录一下我小程序开发的心路历程,希望对看到的小伙伴有一点点的帮助谢谢