判断小程序是在什么环境下打开的

本文介绍如何利用wx.getSystemInfo接口在微信和企业微信小程序中判断运行环境,并展示如何根据环境差异调用相应API。重点讲解了environment字段的使用以及示例代码.

判断小程序是微信打开还是企业微信打开

wx.getSystemInfo(Object object)

微信官方文档

  • 以 Promise 风格 调用:支持
  • 小程序插件:支持,需要小程序基础库版本不低于 1.9.6
  • 微信 Windows 版:支持
  • 微信 Mac 版:支持

获取系统信息。由于历史原因,wx.getSystemInfo 是异步的调用格式,但是是同步返回,需要异步获取系统信息请使用 wx.getSystemInfoAsync。

企业微信官方文档

获取系统信息。
小程序可以在微信和企业微信中调用此接口,但是在企业微信中调用此接口时,会额外返回一个 environment 字段(微信中不返回),如此字段值为wxwork,则表示当前小程序运行在企业微信环境中。注意:只有运行在企业微信环境中,才能调用wx.qy的接口。

属性类型默认值必填说明
successFunction接口调用成功的回调函数
failFunction接口调用失败的回调函数
completeFunction接口调用结束的回调函数(调用成功、失败都会执行)

回调函数部分常用属性

wx.getSystemInfo({
  success (res) {
    console.log(res.model); // 设备型号
    console.log(res.pixelRatio); // 设备像素比
    console.log(res.windowWidth); // 可使用窗口宽度,单位px
    console.log(res.windowHeight); // 可使用窗口高度,单位px
    console.log(res.language); // 微信设置的语言
    console.log(res.version); // 微信的版本号
    console.log(res.platform); // 客户端平台
    console.log(res.environment); // *重点:小程序当前运行的环境,微信小程序调用时无该属性
  },
  fail (res) {
    console.log(res)
  }
})

示例

var that = this
wx.getSystemInfo({
  success(res) {
    if (res.environment == 'wxwork') {
      console.log('企业微信打开');
      wx.qy.login({
        success: data => {
          that.getInfo(data.code)
        }
      });
    } else {
      console.log('微信打开');
      wx.login({
        success: data => {
          that.getInfo(data.code)
        }
      });
    }
  },
  fail(res) {
    console.log(res);
  }
})
### 判断网页是否通过微信小程序打开 为了判断当前网页是否由微信小程序打开,可以通过 `wx.getLaunchOptionsSync()` 接口获取小程序启动参数[^1]。此接口返回的对象中包含 `scene` 字段,用于表示小程序的启动场景。当场景值为特定范围时,可以确认页面是由微信小程序内的 `web-view` 打开。 以下是具体的实现方式: #### 使用 `wx.getLaunchOptionsSync()` 在微信小程序环境中调用 `wx.getLaunchOptionsSync()` 可以同步获取小程序的启动信息。其中的关键字段如下: - **`path`**: 当前页面路径。 - **`query`**: 页面所带查询参数对象。 - **`scene`**: 启动场景值,具体含义可参考官方文档中的 [场景值列表](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html)。 对于 `web-view` 跳转至 H5 的情况,通常会携带自定义参数传递给目标页面。这些参数可通过 URL 查询字符串的形式附加到 H5 链接上,并在 H5 页面加载时解析。 #### 实现代码示例 以下是一个完整的解决方案,展示如何在 H5 页面中检测是否来自微信小程序: ```javascript // 检测是否通过微信小程序 web-view 打开 function isFromWechatMiniProgram() { const ua = navigator.userAgent.toLowerCase(); // 判断是否运行于微信环境 if (ua.indexOf('micromessenger') === -1) { return false; // 不是微信浏览器 } // 解析 URL 参数 const urlParams = new URLSearchParams(window.location.search); const fromSource = urlParams.get('from'); // 假设小程序传递了一个名为 'from' 的参数 // 如果存在指定参数,则认为是从微信小程序跳转而来 return fromSource === 'miniProgram'; } document.addEventListener('DOMContentLoaded', () => { if (isFromWechatMiniProgram()) { console.log('当前页面由微信小程序打开'); } else { console.log('当前页面未由微信小程序打开'); } }); ``` 上述代码逻辑基于两个前提条件: 1. 用户设备处于微信客户内; 2. 微信小程序向 H5 传递了明确标识来源的参数(如 `?from=miniProgram`),以便区分不同入口[^4]。 #### 注意事项 - 若需进一步增强兼容性和准确性,应结合实际业务需求调整参数名称及其验证机制。 - 对于某些特殊场景下的异常处理(例如缓存导致旧版页面被加载等情况),务必提前测试并做好预案。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值