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

本文介绍了在微信小程序中使用webview内嵌H5页面时,遇到wx.miniProgram.getEnv判断失效的问题。通过分析问题原因,即webview基于iframe导致的环境判断错误,提出解决方案——通过parent.windows获取父页面的windows对象进行环境判断。这种方法在子页面已有wx对象时仍可使用自身的windows对象。文章最后表达了对微信SDK不稳定性的一些看法,并希望对遇到相同问题的开发者有所帮助。
摘要由CSDN通过智能技术生成

背景

最近接到一个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.min

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值