小程序使用webview内嵌h5页面 wx.miniProgram.getEnv失效问题
更新时间：2023年04月19日 10:47:44 作者：前端小萌新y
本文主要介绍了小程序使用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失效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。下面通过本文给大家分享Bootstrap 响应式实用工具，一起看看吧2017-03-03
这篇文章主要介绍了JS正则表达式封装与使用操作,涉及javascript使用正则表达式针对邮箱、手机号、身份证、用户名、中文等简单验证操作技巧,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了原生JavaScript实现瀑布流布局的相关资料,实现鼠标下拉图片自动加载效果，和百度图片效果类似，需要的朋友可以参考下2016-01-01
这篇文章主要介绍了JavaScript之移动端H5生成图片解决方案讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了小程序hover-class点击态效果实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了JS实现同一个网页布局滑动门和TAB选项卡效果,通过简单的自定义切换函数setTab实现页面元素的遍历及属性切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
javascript各种形式的复制代码效果，有直接复制url，复制文本框中的内容、隐藏表单中的内容，复制span中的内容2008-09-09
下面小编就为大家分享一篇javascript 通过键名获取键盘的keyCode方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
本篇文章主要介绍了bootstrap table动态加载数据示例代码，可以实现点击选择按钮，弹出模态框，加载出关键词列表，有兴趣的可以了解一下。2017-03-03
这篇文章主要介绍了ES6 对象的新功能与解构赋值介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
最新评论