小程序使用webview内嵌h5页面 wx.miniProgram.getEnv失效问题

本文主要介绍了小程序使用webview内嵌h5页面 wx.miniProgram.getEnv失效问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

背景

最近接到一个h5需求，和普通的h5不一样，这个h5页面是嵌入到小程序中使用的，需求简单来说就是展示一个跳转按钮，判断如果是小程序环境下就进行跳转到其他小程序页面。

实现思路

核心逻辑其实就是判断小程序环境这一块，我们可以直接使用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这个标签去嵌套h5页面，原理其实是使用了原生的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对象即可。