小程序內嵌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是公衆號開發的，不支持小程序相關調用。