小程序使用webview內(nèi)嵌h5頁(yè)面wx.miniProgram.getEnv失效怎么解決

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

背景

最近接到一個(gè)h6需求，和普通的h6不一樣，這個(gè)h6頁(yè)面是嵌入到小程序中使用的，需求簡(jiǎn)單來(lái)說(shuō)就是展示一個(gè)跳轉(zhuǎn)按鈕，判斷如果是小程序環(huán)境下就進(jìn)行跳轉(zhuǎn)到其他小程序頁(yè)面。

實(shí)現(xiàn)思路

核心邏輯其實(shí)就是判斷小程序環(huán)境這一塊，我們可以直接使用wxsdk來(lái)進(jìn)行判斷小程序環(huán)境，由于公司內(nèi)部已經(jīng)有這些api的封裝，所以實(shí)現(xiàn)起來(lái)比較簡(jiǎn)單。
windows.wx實(shí)際上就是wxsdk的對(duì)象

//判斷是否在微信環(huán)境
const isWeixin = /MicroMessenger/i.test(navigator.userAgent);
// 獲取微信運(yùn)行環(huán)境
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");
      }
    });
  });
}
// 判斷是否在微信小程序環(huán)境
const isMiniprogram = async () => isWeixin && (await getWxEnv()) === "miniprogram";

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

問(wèn)題

wx.miniProgram.getEnv失效，無(wú)法正確判斷是否為小程序環(huán)境。
盤(pán)查后發(fā)現(xiàn)，無(wú)法正確拿到windows對(duì)象，原因是小程序中使用webview這個(gè)標(biāo)簽去嵌套h6頁(yè)面，原理其實(shí)是使用了原生的iframe標(biāo)簽，導(dǎo)致在子頁(yè)面中真機(jī)無(wú)法準(zhǔn)確獲取頁(yè)面運(yùn)行環(huán)境

解決

竟然我們?cè)谠撟禹?yè)面沒(méi)法精確拿到windows對(duì)象，那我們可以去拿父頁(yè)面的windows對(duì)象，代碼實(shí)現(xiàn)如下

//判斷是否在微信環(huán)境
const isWeixin = /MicroMessenger/i.test(navigator.userAgent);
// 獲取微信運(yùn)行環(huán)境
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");
      }
    });
  });
}
// 判斷是否在微信小程序環(huán)境
const isMiniprogram = async () => isWeixin && (await getWxEnv()) === "miniprogram";

在windows前面加上個(gè)parent去拿到父頁(yè)面的windows對(duì)象即可，不過(guò)我們還是最好要做一下判斷，如果當(dāng)前子頁(yè)面的windows對(duì)象中有wx對(duì)象，那我們還是直接用該頁(yè)面的windows對(duì)象即可。

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