小程序使用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对象即可。
微信sdk经常能遇到这种奇奇怪怪的问题，难怪微信开发社区一片谩骂了，又一次黑魔法记录，浅浅记录一下，希望能对遇到这个问题的朋友有所帮助。
到此这篇关于小程序使用webview内嵌h5页面 wx.miniProgram.getEnv失效问题的文章就介绍到这了,更多相关小程序 wx.miniProgram.getEnv失效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
网上搜索了，目前主流的Js代码压缩工具主要有Uglify、YUI Compressor、Google Closure Compiler，简单试用了UglifyJS 和Google Closure Compiler 两种工具的基本用法,需要的朋友可以参考下2020-04-04
深入理解JavaScript系列（16） 闭包（Closures）
本章我们将介绍在JavaScript里大家经常来讨论的话题 —— 闭包（closure）。闭包其实大家都已经谈烂了。尽管如此，这里还是要试着从理论角度来讨论下闭包，看看ECMAScript中的闭包内部究竟是如何工作的2012-04-04
IE6下javasc#ipt:void(0) 无效的解决方法
本篇文章主要是对IE6下javasc#ipt:void(0) 无效的解决方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
本文介绍JSON.stringify9大特性和转换规则,JSON.stringify()方法将一个JavaScript对象或值转换为 JSON 字符串,如果指定了一个replacer 函数,则可以选择性地替换值,或者指定的replacer是数组,则可选择性地仅包含数组指定的属性,更多内容需要的小火煸可以参考下面温行内容2022-02-02
Web Component内部有钩子天然支持被篡改时被触发,用来防篡改非常方便,所以本文就将使用Web Component实现防篡改水印,感兴趣的小伙伴可以了解下2023-12-12
javascript 兼容FF的onmouseenter和onmouseleave的代码
经过测试发现，例子1 在 ff下抖动的厉害，ie下稍微有点。 具体原因 其实就是 mouseout 的冒泡机制 引起的。2008-07-07
做web开发的朋友都清楚，js程序的调试是相当郁闷的，因为首先这种语言语法比较灵活，它是一种弱类型的脚本语言，很多错误是无法控制的。2010-10-10
记录滚动条位置（使用userdate）...2007-01-01
这篇文章主要介绍了微信小程序条件、模板、文件引用,结合实例形式分析了微信小程序if条件判断、模板调用、wxss文件引用等相关操作技巧,需要的朋友可以参考下2020-06-06
这篇文章全面解析Bootstrap弹窗的实现方法，对其结构进行详细分析，感兴趣的小伙伴们可以参考一下2015-12-12
最新评论