背景
最近接到一个h5需求,和普通的h5不一样,这个h5页面是嵌入到小程序中使用的,需求简单来说就是展示一个跳转按钮,判断如果是小程序环境下就进行跳转到其他小程序页面。
实现思路
核心逻辑其实就是判断小程序环境这一块,我们可以直接使用wxsdk来进行判断小程序环境,由于公司内部已经有这些api的封装,所以实现起来比较简单。
windows.wx实际上就是wxsdk的对象
//判断是否在微信环境
const isWeixin = /MicroMessenger/i.test(navigator.userAgent);
// 获取微信运行环境
const getWxEnv = () => {
return new Promise((resolve) => {
let windows: any = window
if (!windows.wx) resolve("wechat");
windows.wx.miniProgram.getEnv((res) => {
if (res.miniprogram) {
resolve("miniprogram");
} else {
resolve("wechat");
}
});
});
}
// 判断是否在微信小程序环境
const isMiniprogram = async () => isWeixin && (await getWxEnv()) === "miniprogram";
之后使用isMinnipragram变量即可直接判断是否是小程序环境
问题
wx.miniProgram.getEnv失效,无法正确判断是否为小程序环境。
盘查后发现,无法正确拿到windows对象,原因是小程序中使用webview这个标签去嵌套h5页面,原理其实是使用了原生的iframe标签,导致在子页面中真机无法准确获取页面运行环境
解决
竟然我们在该子页面没法精确拿到windows对象,那我们可以去拿父页面的windows对象,代码实现如下
//判断是否在微信环境
const isWeixin = /MicroMessenger/i.test(navigator.userAgent);
// 获取微信运行环境
const getWxEnv = () => {
return new Promise((resolve) => {
let windows: any = window
windows = windows.wx ? windows : parent.window
if (!windows.wx) resolve("wechat");
windows.wx.miniProgram.getEnv((res) => {
if (res.miniprogram) {
resolve("miniprogram");
} else {
resolve("wechat");
}
});
});
}
// 判断是否在微信小程序环境
const isMiniprogram = async () => isWeixin && (await getWxEnv()) === "miniprogram";
在windows前面加上个parent去拿到父页面的windows对象即可,不过我们还是最好要做一下判断,如果当前子页面的windows对象中有wx对象,那我们还是直接用该页面的windows对象即可。文章来源:https://www.toymoban.com/news/detail-699347.html
微信sdk经常能遇到这种奇奇怪怪的问题,难怪微信开发社区一片谩骂了,又一次黑魔法记录,浅浅记录一下,希望能对遇到这个问题的朋友有所帮助。文章来源地址https://www.toymoban.com/news/detail-699347.html
到了这里,关于微信小程序使用webview内嵌h5页面 wx.miniProgram.getEnv失效问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!