快捷導(dǎo)航

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

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

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

背景

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

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

核心邏輯其實(shí)就是判斷小程序環(huán)境這一塊，我們可以直接使用wxsdk來進(jìn)行判斷小程序環(huán)境，由于公司內(nèi)部已經(jīng)有這些api的封裝，所以實(shí)現(xià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)境

問題

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

解決

竟然我們?cè)谠撟禹撁鏇]法精確拿到windows對(duì)象，那我們可以去拿父頁面的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去拿到父頁面的windows對(duì)象即可，不過我們還是最好要做一下判斷，如果當(dāng)前子頁面的windows對(duì)象中有wx對(duì)象，那我們還是直接用該頁面的windows對(duì)象即可。

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

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

您可能感興趣的文章: