小程序使用webview內嵌h5頁面wx.miniProgram.getEnv失效怎么解決

今天小編給大家分享一下小程序使用webview內嵌h5頁面wx.miniProgram.getEnv失效怎么解決的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

背景

最近接到一個h6需求，和普通的h6不一樣，這個h6頁面是嵌入到小程序中使用的，需求簡單來說就是展示一個跳轉按鈕，判斷如果是小程序環境下就進行跳轉到其他小程序頁面。

實現思路

核心邏輯其實就是判斷小程序環境這一塊，我們可以直接使用wxsdk來進行判斷小程序環境，由于公司內部已經有這些api的封裝，所以實現起來比較簡單。
windows.wx實際上就是wxsdk的對象

//判斷是否在微信環境
const isWeixin = /MicroMessenger/i.test(navigator.userAgent);
// 獲取微信運行環境
const getWxEnv = () => {
  return new Promise((resolve) => {
    let windows: any = window
    if (!windows.wx) resolve("wechat");
    windows.wx.miniProgram.getEnv((res) => {
      if (res.miniprogram) {
        resolve("miniprogram");
      } else {
        resolve("wechat");
      }
    });
  });
}
// 判斷是否在微信小程序環境
const isMiniprogram = async () => isWeixin && (await getWxEnv()) === "miniprogram";

之后使用isMinnipragram變量即可直接判斷是否是小程序環境

問題

wx.miniProgram.getEnv失效，無法正確判斷是否為小程序環境。
盤查后發現，無法正確拿到windows對象，原因是小程序中使用webview這個標簽去嵌套h6頁面，原理其實是使用了原生的iframe標簽，導致在子頁面中真機無法準確獲取頁面運行環境

解決

竟然我們在該子頁面沒法精確拿到windows對象，那我們可以去拿父頁面的windows對象，代碼實現如下

//判斷是否在微信環境
const isWeixin = /MicroMessenger/i.test(navigator.userAgent);
// 獲取微信運行環境
const getWxEnv = () => {
  return new Promise((resolve) => {
    let windows: any = window
    windows = windows.wx ? windows : parent.window
    if (!windows.wx) resolve("wechat");
    windows.wx.miniProgram.getEnv((res) => {
      if (res.miniprogram) {
        resolve("miniprogram");
      } else {
        resolve("wechat");
      }
    });
  });
}
// 判斷是否在微信小程序環境
const isMiniprogram = async () => isWeixin && (await getWxEnv()) === "miniprogram";

在windows前面加上個parent去拿到父頁面的windows對象即可，不過我們還是最好要做一下判斷，如果當前子頁面的windows對象中有wx對象，那我們還是直接用該頁面的windows對象即可。

以上就是“小程序使用webview內嵌h5頁面wx.miniProgram.getEnv失效怎么解決”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。