快捷導(dǎo)航

小程序使用webview內(nèi)嵌h5頁面 wx.miniProgram.getEnv失效問題

更新時間：2023年04月19日 10:47:44 作者：前端小萌新y

本文主要介紹了小程序使用webview內(nèi)嵌h5頁面 wx.miniProgram.getEnv失效問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

背景

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

實現(xiàn)思路

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

//判斷是否在微信環(huán)境
const isWeixin = /MicroMessenger/i.test(navigator.userAgent);
// 獲取微信運行環(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)境

問題

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

解決

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

//判斷是否在微信環(huán)境
const isWeixin = /MicroMessenger/i.test(navigator.userAgent);
// 獲取微信運行環(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前面加上個parent去拿到父頁面的windows對象即可，不過我們還是最好要做一下判斷，如果當前子頁面的windows對象中有wx對象，那我們還是直接用該頁面的windows對象即可。

微信sdk經(jīng)常能遇到這種奇奇怪怪的問題，難怪微信開發(fā)社區(qū)一片謾罵了，又一次黑魔法記錄，淺淺記錄一下，希望能對遇到這個問題的朋友有所幫助。

到此這篇關(guān)于小程序使用webview內(nèi)嵌h5頁面 wx.miniProgram.getEnv失效問題的文章就介紹到這了,更多相關(guān)小程序 wx.miniProgram.getEnv失效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: