微信小程序web-view与H5交互:判断H5是否在小程序环境

在微信小程序内是可以通过web-view加载H5,以便一套H5代码可供多端使用,但很多时候不同端对H5的交互不一样,这就要求在H5内做出判断,识别此时调用H5的是什么客户端。

微信官方目前给出了三种方法在网页内判断小程序环境

//1.通过window.__wxjs_environment
window.__wxjs_environment === 'miniprogram'

//2.通过使用JSSDK 1.3.2提供的getEnv接口
wx.miniProgram.getEnv(function(res) {
  console.log(res.miniprogram) // true
})

//3.通过判断navigator.userAgent中包含miniProgram字样
var userAgent = navigator.userAgent;
var isMini = /miniProgram/i.test(userAgent);

个人推荐第三种方法,因为是同步方法。

在项目实战中遇到的问题是,H5的js内写了判断,但微信开发工具和真机都无效,识别不了小程序环境

查了很多文章都没有类似问题,开始怀疑兼容性bug,其实不然。微信客户端已到7.0.10,userAgent只需一年前的7.0.0即可,其他两种使用JSSDK亦可,其实都能用。

判断小程序环境重点是,清除缓存问题。

H5的js调整之后,web-view还有缓存,此时只是简单的点击开发工具上的清缓存,或真机上删除小程序,是无用的。

1.开发工具需要删除项目,重新导入编译;

2.真机上,需要在微信的设置里清除缓存,才能清掉web-view的缓存,而不只是删除小程序。

希望后来者看到此文后对自己有用。坑太多!

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值