您当前的位置: 首页 > 解决方案

小程序内嵌H5——判断小程序环境的坑

  • 作者: admin
  • 发布于 2018-05-30 15:50:42
  • 来源:  
  • 栏目:解决方案

导语: 现在各种小程序风靡,这边H5的需求还没有搞定,产品又要求做小程序版本,做可以,关键是618前上线,我……

 

现在各种小程序风靡,这边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



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部