微信小程序-web-View使用以及跟小程序的通信传值

一、web-view是什么？

简单来说 就是小程序嵌套H5页面

web-view 官网地址

二、如何使用web-view

1.在小程序创建一个页面，专门用来显示H5

不需要在这个页面做修饰，H5页面会自动铺满

bindmessage属性用来绑定从H5传值过的函数;

注意：传给H5的数据只能拼接在url后面 

代码如下（示例）：

<web-viewsrc="H5页面地址?token=XXXX"bindmessage="handlePostMessage"></web-view>

 接收 h5 页面传递过来的参数

onLoad:function(options){},handlePostMessage:function(e){
    console.log(e.detail.data)let resObj = e.detail.data[e.detail.data.length -1];//多次传递会是数组的形式，传递一次会push进数组，所以我们需要拿到最新的数据，也就是数组的最后一个子集
    console.log(resObj.message)},

2.H5页面

（1）引入JSSDK

代码如下（示例）：

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

（2）判断是否在小程序环境内

wx.miniProgram.getEnv(function(res){if(res.miniprogram){//小程序环境 ,在此进行相关逻辑处理}else{//非小程序环境下逻辑
     console.log('不在小程序中')}})

（3）获取页面路径参数

functiongetQueryString(e){var t =newRegExp("(^|&)"+ e +"=([^&]*)(&|$)","i"), 
  i = window.location.search.substr(1).match(t);returnnull!= i ?decodeURIComponent(i[2]):null}//调用函数let token =getQueryString("token");

（4）向小程序传值

 向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的 message 事件;

  wx.miniProgram.postMessage({//这里一定要将数据放在dada中data:{message: uploadinput.files[0]}});//跳转到小程序页面，触发向小程序发送消息
  wx.miniProgram.redirectTo({url:'/pages/studentWork/scoreInfo/scoreInfo'})