JS-环境判断:小程序、公众号、浏览器、APP、安卓、IOS

介绍

本文主要介绍获取当前页面所在的环境,区分微信小程序、微信公众号H5、浏览器、app环境,终端判断是否是IOS、是否是Android~

详情参考:https://timor419.github.io/2021/11/25/JS-getEnvironment/#more

JS代码:
const ua = navigator.userAgent.toLowerCase();

微信小程序、微信公众号H5、浏览器、app环境

getENVIR: () => {
  const isWeixin = ua.indexOf('micromessenger') !== -1;
  const isInApp = /(^|;\s)app\//.test(ua);
  if (isWeixin) {
    if ((window as any).__wxjs_environment === 'miniprogram') {
      return 'wxapp';
    } else {
      return 'wxh5';
    }
  } else {
    if (!isInApp) {
      return 'browser';
    } else {
      return 'app';
    }
  }
},

终端判断:是否是IOS

checkIfIOS: () => {
  return ua.match(/(iphone|ipod|ipad);?/i);
},

终端判断:是否是Android

checkIfAndroid: () => {
  return ua.match(/android|adr/i);
},

------------- The End -------------

许可协议: 转载请保留原文链接及作者。

### 微信小程序 `wx-open-launch-weapp` 功能不稳定的原因及解决方案 #### 一、原因分析 1. **配置文件设置不当** 配置项中的 `openTagList` 如果未正确添加 `"wx-open-launch-weapp"` 或者拼写错误,可能会导致标签无法被识别。这会影响 H5 页面调用微信开放标签的能力[^2]。 2. **环境差异影响** 测试过程中发现,在不同环境下表现存在区别:iOS 设备通常能较好支持该功能;而 Android 可能在某些版本上会遇到兼容性问题,比如不显示也不抛出异常。另外,本地调试时往往看不到实际效果,需部署至线上并通过微信客户端访问来验证[^1]。 3. **页面加载顺序** 若 `wx.config` 和 `wx.ready` 的初始化操作未能在 DOM 渲染前完成,则可能导致后续依赖这些接口的功能失效,进而使得 `<wx-open-launch-weapp>` 组件不能按预期工作[^5]。 4. **网络请求失败** 当服务器返回的数据不符合预期(如签名算法错误),也会造成整个流程中断,最终表现为点击无响应或其他形式的逻辑崩溃[^3]。 #### 二、解决方案建议 针对上述提到的各种可能性,可以采取如下措施: - **确认配置准确性** 检查并确保 HTML 文件头部已正确定义了必要的 meta 标签以及 script 脚本引入,并且 `wx.config` 方法内的参数完全匹配官方文档的要求,特别是 URL 编码部分要处理好特殊字符[^4]。 - **优化跨平台适配策略** 对于 Android 平台特有的 bug 进行针对性修复,可通过 User-Agent 判断当前设备类型从而调整样式或行为逻辑。同时利用浏览器开发者工具模拟真实场景下的交互过程以便及时发现问题所在。 - **合理安排脚本执行时机** 将所有涉及 WeChat JSSDK API 的调用都放在 `wx.ready()` 函数内部,保证只有当 SDK 加载完毕之后才会继续向下执行其他业务代码。此外还可以考虑采用异步加载的方式提高性能稳定性。 - **增强健壮性和容错能力** 添加 try-catch 结构捕获潜在的风险点,对于可能出现超时等情况的地方给予适当提示信息给用户知道发生了什么状况而不是默默吞掉错误日志。 ```javascript // JavaScript 示例 try { wx.config({ debug: false, // 开启debug模式, appId: 'your_app_id', // 必填,公众号的唯一标识 timestamp: '', // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名, jsApiList: ['checkJsApi'] // 必填,需要使用的JS接口列表 }); } catch (e) { console.error('Wechat JS-SDK config failed:', e); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值