小程序webview组件的使用笔记

web-view官方文档

使用条件：

非个人类型的小程序（个人类型小程序在开发者工具能正常使用测试，但是如果上传代码到服务器就不能正常使用了）

组件属性：

• src ： 跳转的链接
  1)可打开关联的公众号的文章 ，src值为公众号文章链接；

  2）打开其他网页，如H5页面等；（需配置小程序业务域名，不是服务器域名 ）
  登录微信管理开发平台
  
  

小程序代码：

<web-view src="{{src}}"></web-view>

组件事件

• bindmessage

1）触发方式：

在跳转到的页面中，引入JSSDK1.3.2 ，可以使用小程序接口。当页面中使用小程序接口wx.miniProgram.postMessage向小程序发送消息时，可触发小程序bindmessage事件。

微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

页面代码：

wx.miniProgram.postMessage({ data: {foo: 'bar'} })

2）小程序触发该事件的场景：

当小程序的后退、组件销毁、分享 ，所以当网页端向小程序端发送消息，小程序端不是实时接收的，需要在一定的场景下才能触发接受到参数。

3）小程序端接收的参数

xml:
<web-view src="src" bindmessage="getMgs"></web-view>
js:
getMgs(e){
 console.log(e.data)
}

当有多个消息未触发接收时，会把消息提交（push）到一个消息队列,返回的参数是个消息集合

• bindload：网页加载成功时候触
• binderror：网页加载失败的时候触发

webview网页中支持的js-sdk接口

在官方文档有说明 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

判断H5是否在小程序环境

有不同端调用H5页面，可能不同端对H5的交互不一样，所以有时候需要判断调用H5页面的是否时小程序端

web-view页面代码：

function ready() {
  console.log(window.__wxjs_environment === 'miniprogram') // true
}
//注意： = = 弄了好久，为啥开发者工具下面的控制台打印不出console的信息，后来才知道web-view页面有自己单独的调试窗口，在web-view页面上右击，就会出现调试两个字，点击就可进入web-view的调试窗口了
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
  document.addEventListener('WeixinJSBridgeReady', ready, false)
} else {
  ready()
}

//注意wx.miniProgram.getEnv方法只有在微信环境才有效，非微信环境下无效，所有使用该方法前先判断是否在微信环境下。  

let ifWx = navigator.userAgent.toLowerCase()  // ios的avigator.userAgent中无miniProgram，但都有MicroMessenger（表示是微信浏览器）
if(ifWx .match(/MicroMessenger/i)=="micromessenger") {
wx.miniProgram.getEnv(function(res) {
  console.log(res.miniprogram) // true
})

//或者通过判断navigator.userAgent（声明了浏览器用于 HTTP 请求的用户代理头的值）中是包含miniProgram字样（但是在ios等一些机型里，微信环境也没有miniProgram字样，所有最好用第二种方法）
var userAgent = navigator.userAgent;
var isMini = /miniProgram/i.test(userAgent);