如何区分微信和小程序中打开的H5页面

一、问题描述

在开发H5时，页面有跳转App的功能按钮显示，但在小程序中该功能是受限的，因此需要对它们进行隐藏。此时采用的方案是检测客户端环境，当且仅当是小程序webview中加载H5页面时，在Html根节点增加一个miniprogram类，并且在所有下载按钮增加download-app-btn类，最后增加全局样式定义：

.miniprogram .download-app-btn {
	display: none;
}

那么现在的问题就是如何如何区分微信和小程序的webview环境？

在开发中我们一般会对navigator.userAgent进行特征检测来区分客户端环境，但对于微信和小程序的webview环境使用navigator.userAgent.toLowerCase().match(/MicroMessenger/i)=="micromessenger"进行检测，结果都是true。

二、解决方案

引入jssdk：https://res.wx.qq.com/open/js/jweixin-1.6.0.js

wx.miniProgram.getEnv(function(res) { 
   if(res.miniprogram) { // 无论是哪个环境都会有 res.miniprogram，但只有在小程序 web-view 中的值才会是 true
     document.documentElement.classList.add('miniprogram')
   }
 })