h5判断浏览器环境-小程序/微信浏览器/其他浏览器

判断当前环境,区分:小程序/微信浏览器/其他浏览器,通过ua和wx.miniProgram来判断

yarn add weixin-js-sdk

//public.js
import wx from 'weixin-js-sdk'

//判断环境:     1小程序,2微信浏览器,3其他浏览器
export function _getIsWxClient() {
  var p = new Promise(function (resolve, reject) {
    //做一些异步操作
    let type = '';
    let ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
      wx.miniProgram.getEnv((res) => {
        if (res.miniprogram) {
          type = 1;
        } else {
          type = 2;
        }
        resolve(type);
      })
    } else {
      type = 3
      resolve(type);
    }    
  });
  return p;

}

使用方式

import { _getIsWxClient } from '@/utils/public'
_getIsWxClient ().then(res=>{
  localStorage.envType =res
  console.log(res)
//res:1,2,3
})

ps:补充weixin-js-sdk使用时的注意点

1.小程序APPID和H5(公众号)APPID是不同的
2.支持wx.miniProgram.getEnv(),wx.miniProgram.navigateTo()
3.不支持 wx.login(),wx.requestPayment()  (只支持在小程序源码里用)

--by Affandi ⊙▽⊙