小程序开发之组件web-view（浏览器）

版权声明：欢迎转载，可Chat交流，写博不易请标明出处： https://blog.csdn.net/JackJia2015/article/details/86519553

web-view

web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。

注：

• navigationStyle: custom 对 组件无效
• 非正式域名链接需要登录小程序管理后台配置业务域名。
• 网页内 iframe 的域名也需要配置到域名白名单。
• 开发者工具上，可以在 组件上通过右键 - 调试，打开 组件的调试。
• 每个页面只能有一个 ， 会自动铺满整个页面，并覆盖其他组件。
• 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
• 在 iOS 中，若存在JSSDK接口调用无响应的情况，可在 的 src 后面加个#wechat_redirect解决。
• 避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent

例如：
效果展示

代码
index.wxml

<!-- 
  src   webview 指向网页的链接
  bindmessage  网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }
  bindload   网页加载成功时候触发此事件。e.detail = { src }
  binderror  网页加载失败的时候触发此事件。e.detail = { src }

 -->

<web-view src="https://www.baidu.com/" bindload="bindload" binderror="binderror"></web-view>

index.js

Page({
  data: {

  },
  bindload: function (e) {
    console.log('成功')
  },
  binderror: function (e) {
    console.log('失败')
  }
})

web-view相关接口 1

web-view相关接口 2

web-view相关接口 3

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

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

web-view相关接口 4

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

// web-view下的页面内
function ready() {
  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
})