小程序内嵌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

经由评论区trigger-11提醒，在小程序开发时，需导入jweixin-1.3.2.js，jweixin-1.2.0.js是公众号开发的，不支持小程序相关调用。