欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-06 10:54:11
现在各种小程序风靡,这边H5的需求还没有搞定,产品又要求做小程序版本,做可以,关键是618前上线,我…… whatever,618要做推广,日期订了,剩下的就只能是排期,定方案,尽可能完成。 最后和产品商量之后的决定是:小程序中特有的营销推广的页面,用小程序编写,剩下的黄金流程,内嵌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