小程序内嵌H5——判断小程序环境的坑
现在各种小程序风靡,这边H5的需求还没有搞定,产品又要求做小程序版本,做可以,关键是618前上线,我……
whatever,618要做推广,日期订了,剩下的就只能是排期,定方案,尽可能完成。
最后和产品商量之后的决定是:小程序中特有的营销推广的页面,用小程序编写,剩下的黄金流程,内嵌H5解决。
听起来好像很简单,but,没有想象中那么简单。
判断是否在小程序中
这个问题,网上一搜,答案很多,有说用UA的,有说用微信注入的JS对象的,有说用原生提供判断方法的。
UA的有一个很大的问题,iOS判断不了,它是没有miniProgram这个字段的。在开发工具和Android中是可以的。
而__wxjs_environment这个对象,在测试的一台三星上也不行,Android6.0系统。
而微信提供的原生方法,wx.miniProgram.getEnv。在小程序和微信浏览器打开,是没有问题的。
但是在浏览器里面,回调不执行啊啊啊啊!!!
这就导致了一个问题,如果在浏览器中打开,因为回调没有执行,所以需要再执行一遍,不在小程序时的代码逻辑。
如果只是简单的显示隐藏,就还好,小程序里多走一遍也没有关系,但是,如果是一些对执行次数敏感的代码,就会有问题。
我们做了检测,虽然是回调,但是在小程序里,回调函数的执行总是排在前面。所以,前期决定先定义一个Flag,如果执行过一遍的代码,Flag置为false,就不再执行了。
在后续开发中,还是觉得这个方案不大稳妥,虽然不清楚微信的JS引擎如何解析JS代码,但是总归也是要回归标准的,回调的代码极有可能在后面才执行。
我提出一个方案,没有必要非要判断在小程序内,因为小程序的UA虽然在iOS中没有miniProgram的字段,但是却有microMessage的字段。
我们逆向思维一下,只要判断这个代码不在微信中即可,根据microMessage这个字段。
if (ua.indexof('MicroMessage') == -1) {//说明不在微信中 // 走不在小程序的逻辑 } else { wx.miniProgram.getEnv(function(res) { if (res.miniProgram) { // 走在小程序的逻辑 } else { // 走不在小程序的逻辑 } }) }
这样基本上可以解决上面提到的次数敏感代码执行的问题。
一个小坑
提一个小坑,为了代码的健壮,我习惯性在调用方法时,写成下面的样子:
if(wx && wx.miniProgram && wx.mingProgram.getEnv) { wx.mingProgram.getEnv(function(){}) }
但是,这么写,在实际小程序里,wx一直都是undefined。
只能直接写里面的判断代码,就好使了。
这是什么黑科技??
不管怎样,微信是爸爸,小程序有坑也得忍着。我们做得H5页面,据说还不如小程序日活高。
真是要笑着活下去……
end