uniapp H5页面判断所在环境:微信小程序、微信浏览器、外部浏览器

开发过程中难免会遇到需要判断单前页面所处的运行环境,那么我们应该如何来实现呢?

需求是这样的:uniapp开发的H5界面需要嵌入微信小程序,安卓app中,其中有部分功能是在app中显示,小程序中不显示。经过一番摸索之后,我也找到解决办法,再此备忘一下。

解决方法
  1. 借助微信提供的sdk
  2. 获取浏览器信息
  3. 判断方法
安装sdk:
npm install weixin-js-sdk
引入sdk:
let wxSdk = require('weixin-js-sdk');
判断方法:
function getENVIR () {
	let wxSdk = require('weixin-js-sdk');
	let text = ''
	let ua = navigator.userAgent.toLowerCase();
	if (ua.match(/MicroMessenger/i) == "micromessenger") {
		wxSdk.miniProgram.getEnv((res) => {
			if (res.miniprogram) {
				//小程序环境
				text = 'wx'
			} else {
				//微信环境
				text = 'noWx'
			}
		})
	} else {
		// 其他浏览器
		text = 'noWx'
	}
	return text
}
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
微信端或外部浏览器通过H5链接打开微信小程序是通过特殊的URL链接实现的。首先,在微信小程序的开发者工具,我们需要设置小程序的相关参数,并获取到小程序的AppID。然后,在H5页面,通过以下方式使用URL链接来打开微信小程序。 1. 微信端打开微信小程序:我们可以在H5页面创建一个按钮,当用户点击按钮时,触发打开微信小程序的操作。代码如下所示: ```html <button onclick="openMiniProgram()">打开微信小程序</button> <script> function openMiniProgram() { window.location.href = "weixin://dl/business/?t=abcde12345"; // 将abcde12345替换为你的AppID } </script> ``` 2. 外部浏览器打开微信小程序:我们可以通过微信开放平台的跳转链接功能,生成一个特殊的URL链接,用户在浏览器打开该链接后,会跳转到微信客户端并打开指定的微信小程序。代码如下所示: ```html <button onclick="openMiniProgram()">打开微信小程序</button> <script> function openMiniProgram() { window.location.href = "https://mp.weixin.qq.com/mp/wapopen?username=gh_abcdefgh1234"; // 将gh_abcdefgh1234替换为你的小程序原始ID } </script> ``` 通过上述方式,用户在微信端或外部浏览器点击相应的按钮,即可打开指定的微信小程序。在链接,我们可以根据需要传递一些参数,以在小程序进行相应的操作,实现更丰富的功能和交互体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值