一、普通h5项目判断
注意:只要能正常输出wx.miniProgram就可以,如果是undefined,说明你引入的微信js文件有问题,里面没有miniProgram方法。
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
let ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
wx.miniProgram.getEnv((res) => {
if(res.miniprogram){
console.log('微信小程序内')
}else{
console.log('微信内')
}
})
} else {
console.log('微信环境外')
}
二、vue3、vue2、uniapp以及其他脚手架工程化项目(重点!!!)
一定要将微信js文件放入body的最末尾,在当前页面打印wx.miniProgram是有值的,而不是undefined。
你也可以自己手动将<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
放入打包之后的index.html中的body最末尾,之后直接打开index.html,在浏览器直接打印wx.miniProgram,如果有值,说明是成功的。
//判断逻辑是一样的
let ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
wx.miniProgram.getEnv((res) => {
if(res.miniprogram){
console.log('微信小程序内')
}else{
console.log('微信内')
}
})
} else {
console.log('微信环境外')
}
//在有支付的组件中使用,这里以vue2写法为例
mounted() {
//重要,必须将微信js文件放入body的末尾,而不是其他位置
const script = document.createElement('script');
script.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';
document.body.appendChild(script);
}
浏览器打印wx可以找到miniprogram,说明是成功的。
微信支付文件不能放在打包后的index.js之前,因为index.js内部也有wx,会将微信支付文件的wx替换掉,可以尝试下放在之前打印wx就没有miniprogram了。
或者自己手动添加也是可以的,但这样每个页面都会有微信支付文件,看你自己选择。