小程序web-view坑

小程序web-view潜入H5页面需要注意

1.web-view内嵌H5页面引用第三方定位API会被小程序识别为非业务域名


2.  H5相关接口限制、且JSDK的版本有明确的要求

web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。 支持的接口有:

接口名说明最低版本

wx.miniProgram.navigateTo参数与小程序接口一致1.6.4

wx.miniProgram.navigateBack参数与小程序接口一致1.6.4

wx.miniProgram.switchTab参数与小程序接口一致1.6.5

wx.miniProgram.reLaunch参数与小程序接口一致1.6.5

wx.miniProgram.redirectTo参数与小程序接口一致1.6.5

wx.miniProgram.postMessage向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的message事件1.7.1

wx.miniProgram.getEnv获取当前环境1.7.1

3.相关接口 2

web-view网页中仅支持以下JSSDK接口

4.相关接口 3

用户分享时可获取当前web-view的URL,即在onShareAppMessage回调中返回webViewUrl参数。

示例代码

示例代码:

Page({onShareAppMessage(options){console.log(options.webViewUrl)}})

相关接口 4

在网页内可通过window.__wxjs_environment变量判断是否在小程序环境,建议在WeixinJSBridgeReady回调中使用,也可以使用JSSDK 1.3.2提供的getEnv接口。

示例代码

// web-view下的页面内functionready(){console.log(window.__wxjs_environment==='miniprogram')// true}if(!window.WeixinJSBridge||!WeixinJSBridge.invoke){document.addEventListener('WeixinJSBridgeReady',ready,false)}else{ready()}// 或者wx.miniProgram.getEnv(function(res){console.log(res.miniprogram)// true})

相关接口 5

从微信7.0.0开始,可以通过判断userAgent中包含miniProgram字样来判断小程序web-view环境。

相关接口 6

从微信7.0.3开始,webview内可以通过判断下面的方式判断小程序是否在前台:

WeixinJSBridge.on('onPageStateChange',function(res){console.log('res is active',res.active)})


Bug & Tip

tip:网页内 iframe 的域名也需要配置到域名白名单。

tip:开发者工具上,可以在 web-view 组件上通过右键 - 调试,打开 web-view 组件的调试。

tip:每个页面只能有一个 web-view,web-view 会自动铺满整个页面,并覆盖其他组件。

tip:web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。

tip:在 iOS 中,若存在JSSDK接口调用无响应的情况,可在 web-view 的 src 后面加个#wechat_redirect解决。

tip:避免在链接中带有中文字符,在 iOS 中会有打开白屏的问题,建议加一下 encodeURIComponent

你可能感兴趣的:(小程序web-view坑)