微信小程序使用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对象即可。

微信sdk经常能遇到这种奇奇怪怪的问题,难怪微信开发社区一片谩骂了,又一次黑魔法记录,浅浅记录一下,希望能对遇到这个问题的朋友有所帮助。文章来源地址https://www.toymoban.com/news/detail-699347.html

到了这里,关于微信小程序使用webview内嵌h5页面 wx.miniProgram.getEnv失效问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序内嵌H5页面实现微信支付

    背景: 在微信H5页面已经实现了微信JSAPI的网页支付,老板要求把整个业务线快速转移到微信小程序中,作为懒惰的程序员来说,直接把页面嵌套到小程序不就行了。说干就干,在小程序中设置好基本信息后,一预览居然成功了,一切看来是那么顺利,可到了系统的支付环节

    2024年02月11日
    浏览(57)
  • 微信小程序webview(H5页面)调用微信小程序支付

    1.业务描述:微信小程序商城入口进入的页面是商城H5页面,在H5页面进行微信支付如何实现; 2.微信小程序(webview访问H5页面)必须使用微信小程序支付; 如何实现以及实现方式以及支付后页面返回功能: 商品详情(h5页面)--商品确认页(h5页面)--收银台(h5页面)(点击调

    2024年02月11日
    浏览(60)
  • 微信小程序内嵌H5页面获取openid+分享功能

    主要实现功能:1.通过webview实现小程序内嵌H5页面                          2.在H5页面获取到用户的openid                          3.在H5页面实现分享获取到分享人的openid和被分享者的openid 代码实现: 1.通过webview实现小程序内嵌H5页面 传参:在地址后面加入的参数就是我

    2024年04月23日
    浏览(57)
  • 微信小程序与内嵌h5页面之间的参数传递

    小程序是采用vue+taroui技术栈 h5页面 所在文件:h5.vue 小程序页面:wx.vue,这里我用的是taro获取当前页面栈,大家可以用wx 这里的this.routerParams==={params:1} 小程序页面:wx.vue,首先向内嵌h5的webview所在页面跳转并携带所传参数。 webview页面—/pages/processLink/index。index.vue,由该页面

    2024年02月15日
    浏览(75)
  • 微信小程序内嵌h5页面,实现动态设置顶部标题的功能

    一、需求描述 使用HBuilder X作为开发工具,vue作为开发语言,开发微信小程序。微信小程序页面内嵌h5页面,即web-view/web-view标签。通过设置不同url连接地址,设置不同的标题。 二、失败做法 页面A嵌入h5页面,需要给A设置标题。最开始写法是在lonload页面内,使用如下语句实现

    2024年02月04日
    浏览(69)
  • uniapp实现微信小程序内嵌h5页面的相互跳转

    前期准备3个页面,小程序内2个,h5一个。 小程序内:操作页pageA,展示容纳h5的展示页PageWebview.vue。 h5:h5页面pageB,并且有可以访问的线上url。 【微信小程序pageA-内嵌h5页面pageB】 1.1 pageA实现点击跳转,将pageB的访问地址url拼接,并进入展示页PageWebview.vue 1.2 PageWebview.vue页面用

    2024年02月12日
    浏览(63)
  • H5页面内嵌到微信小程序和APP,做分享操作

    最近接到项目新需求,H5项目需要内嵌到微信小程序和APP里,然后将H5页面分享出去,被分享的人可以点击消息跳转到H5页面。H5页面不难,难的是要与微信小程序和APP进行交互,因为以前也没有接触过,所以这里卡的时间有点长。现分享出来 介绍 这里小编使用的是 uinapp 写的

    2024年02月06日
    浏览(186)
  • H5跳回小程序的wx.miniProgram.navigateTo不起效果,无法跳转页面,已解决

     需求:H5中的点击首页按钮跳回小程序的首页,就写了以下代码    结果并没有跳转成功,但是alert成功,于是查找资料,换了各种api比如switchTab,redirectTo都不行,找了好多博主的帖子发现都不行,问题肯定出在url上面,于是改成下面这样,就可以成功跳转了,不得不说啊

    2024年02月11日
    浏览(50)
  • 如何在【微信小程序 】中的 webview 查看H5页面的console.log和调试H5页面?

    大家好我是 黑臂麒麟 ; 下面是开发微信小程序嵌入H5调试技巧: 问题: 在微信小程序页面中,web-view内嵌了另一个页面url,从小程序跳转到该H5页面的时候,无法看到该H5页面的控制台信息。那就没有办法了么?不,凭着锲而不舍的精神,在网络的海洋遨游许久。我查找到解

    2024年02月17日
    浏览(45)
  • 微信小程序webview嵌入H5页面,返回 UniAppJSBridgeReady,不触发问题

    公司的一个项目,要求用微信小程序实现对pdf文件,预览签字,用的uniapp开发 pdf预览这部分,用的pdf.js插件实现。 由于微信小程序中webview展示页面不能放在项目本地,要求远端请求网页。而且webview会铺满整个页面,导致我的签字按钮只能放在远端的H5页面实现,当时因为偷

    2024年02月15日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包