首页 > 编程语言 >H5页面判断是否是微信小程序打开

H5页面判断是否是微信小程序打开

时间:2022-12-27 14:47:14浏览次数:74  
标签:微信 wx js miniProgram res H5 ua 页面

H5项目接入微信授权登录,通过 UA 区分微信还是普通浏览器:

let ua = navigator.userAgent.toLowerCase();
let isWeixin = ua.indexOf('micromessenger') !== -1;

但是在微信小程序中嵌套该页面也会被认为是微信打开并弹出授权提示。

我们需要做一下判断,小程序中打开不需要提示授权。

可以通过微信官方提供的 SDK 来判断是否是小程序环境。

安装依赖:

npm install weixin-js-sdk --save

说明:该依赖是由 yanxi 大佬将官方 js-sdk 发布到 npm,支持 CommonJS,便于 browserify,webpack 等直接使用。

官方JS源码: https://res.wx.qq.com/open/js/jweixin-1.6.0.js

使用说明: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

在需要的页面引入:

import wx from 'weixin-js-sdk'

在页面中判断:

wx.miniProgram.getEnv(res => {
  if (res.miniprogram) {
    alert("miniProgram");
  } else {
    alert("weChat");
  }
})

再根据业务需求编写逻辑就可以了。

 

直接引入

判断H5页面环境在微信中还是小程序中

用小程序提供的wx.miniProgram.getEnv可以获取环境参数

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        //ios的ua中无miniProgram,但都有MicroMessenger(表示是微信浏览器)
        wx.miniProgram.getEnv((res)=>{
           if (res.miniprogram) {
               alert("在小程序里");
           } else {
               alert("不在小程序里");
           }
        })
    }else{
        alert('不在微信里');
    }
</script>
转自:https://www.cnblogs.com/daipianpian/p/10288675.html

标签:微信,wx,js,miniProgram,res,H5,ua,页面
From: https://www.cnblogs.com/webSnow/p/17008032.html

相关文章

  • H5跳转微信小程序-成功案例(VUE)(踩坑无数)
    H5跳转微信小程序-成功案例(VUE)(踩坑无数)TuoMei已于2022-07-2909:52:22修改准备工作根据官方提供的资料需准备以下几点:1、已认证的服务号2、绑定JS接口安全域名......
  • uni-app 第三方应用中调起微信分享
    uni-app第三方应用中调起微信分享 最近做项目的时候遇到一个问题在APP中的某个单独的小项目中使用uni-app写的项目调起微信分享单独引入jweixin-1.6.0.js在需要分享......
  • 判断H5页面环境在微信中还是小程序中
    判断H5页面环境在微信中还是小程序中用小程序提供的wx.miniProgram.getEnv可以获取环境参数<scripttype="text/javascript"src="https://res.wx.qq.com/open/js/jwe......
  • 如何自定义小程序页面分享?
    步骤分解界面设置选中页面点击页面右侧图标点击界面设置设置值这样就可以实现自定义小程序页面分享了。......
  • 为什么微信转账,对方收款要确认,而支付宝不用?
    支付宝作为一个核心为金融管理的应用,转账是其基本功能之一,所以在转账设计必定要简洁易用,也就是转账无需确认。支付宝是后来在金融管理基础上叠加的好友聊天功能(基本照抄的微......
  • 微信Native支付(扫码支付)商户配置
    0.需要从商户平台获取/设置的配置公众号appId商户号APIv3密钥证书序列号证书密钥1.扫码登录商户平台网址:https://pay.weixin.qq.com/2.确认已开通Native支付网址:h......
  • uniapp 在微信小程序中图片宽度显示问题
    在uniapp中,如果你的富文本图片显示宽度不正常,你可以通过设置图片的宽高属性来解决这个问题。例如,你可以在富文本中添加以下代码来设置图片的宽度为100%:<imgsrc="your_image......
  • 微信支付商家付款(转账)到零钱
    zoujingli/WeChatDeveloper支持微信支付v3版的部分接口,包含转账到零钱。测试用了没问题。如果要查询转账的状态,那么可以用“查询转账批次单”和“查询转账明细单”的接......
  • 把ChatGPT配置到微信群里,可以对AI提问了!
    作者:小傅哥博客:https://bugstack.cn沉淀、分享、成长,让自己和他人都能有所收获!......
  • MAUI新生5.2-Page页面类控件难点
    1、Page页面类控件目录ContentPage,普通内容页。NavigationPage,导航页。FlyoutPage,浮出导航页。TabbedPage,底部Tab栏导航页 2、使用经验:如果使用Shell导航框架,则......