微信小步伐-web-View使用以及跟小步伐的通讯传值

一、web-view是什么？

简单来说 就是小步伐嵌套H5页面
web-view 官网地址
二、如何使用web-view

1.在小步伐创建一个页面，专门用来体现H5

不需要在这个页面做修饰，H5页面会自动铺满
bindmessage属性用来绑定从H5传值过的函数;
留意：传给H5的数据只能拼接在url后面
   代码如下（示例）：

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

复制代码

汲取 h5 页面传递过来的参数

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

复制代码

---

2.H5页面

（1）引入JSSDK

代码如下（示例）：

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

复制代码

（2）判断是否在小步伐环境内

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

复制代码

（3）获取页面路径参数

1. function getQueryString(e) {
2.   var t = new RegExp("(^|&)" + e + "=([^&]*)(&|$)", "i"),
3.   i = window.location.search.substr(1).match(t);
4.   return null != i ? decodeURIComponent(i[2]) : null
5. }
6. //调用函数
8. let token = getQueryString("token");

复制代码

（4）向小步伐传值

  向小步伐发送消息，会在特定机遇（小步伐后退、组件销毁、分享）触发组件的 message 变乱;

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

复制代码

---

来源：https://blog.csdn.net/qq_35971976/article/details/128327473
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！