第一章 了解web-view与H5的交互（含支付）

前言

uniapp开发小程序的过程中主    
    
    
    
、分包有大小限制   
    
    
    
  ，随着业务的增加


     


     


     


     
，使用web-view加载H5的方式 




 




 




 




，往往纯加载并不能满足业务需求   

   

   

   

 ，这个时候就得了解小程序与H5的交互   
    
    
    
  。

提示：以下是本篇文章正文内容

     

     

     

     ，下面案例可供参考

一    


     


     


     


  、web-view是什么？

web-view 是微信小程序内置的浏览器组件
  




  




  




  




，用来加载网络html


     


     


     


     
。

二




 




 




 




 
、使用步骤

<template> <web-view src="https://www.xxx.html"></web-view> </template>

注意：

小程序web-view会自动铺满全屏  


  


  


  


，不支持修改组件宽高 




 




 




 




。 小程序加载路径仅支持网络网页 
     
     
     
     ，不支持本地的html页面   

   

   

   

 。

三   

   

   

   

、业务场景

1.小程序带参数跳转链接

   




   




   




   



，H5应用获取参数 <!-- 小程序参数拼接在地址上--> <!-- 小程序--> <template> <web-view src="https://www.xxx.html?id=1&from=xcx"></web-view> </template>

解决：小程序地址路径?传参 — H5onLoad函数接收

// H5 // H5获取拼接的url参数 <script> export default { onLoad(option){ console.log(option) // {id: 1, from: xcx} } }; </script> <script> console.log(window.location.search) // ?id=1&from=xcx </script> 2.H5应用涉及跳转小程序功能 



 



 



 



，小程序嵌套后功能失效 （原网页环境是微信浏览器                     ，嵌入后为小程序内置环境


    




    




    




    


，api方法不兼容）

解决：H5触发事件并发送内容 — web-view @message事件监听处理

<!-- message事件监听H5触发的消息--> <!-- 小程序--> <template> <web-view src="https://www.xxx.html" @message="onMessage"></web-view> </template> <script> export default { data() { return {}; }, methods: { onMessage(event) { console.log(接收到消息： + JSON.stringify(event.detail.data)); // 跳转小程序方法 uni.navigateToMiniProgram({ appId: data.appId, path: data.path, extraData: data.extraData }); } } }; </script> // H5 // H5触发事件并发送内容 document.addEventListener(click, function() { uni.postMessage({ data: { appId: , path: , extraData: } }); }) 3.H5应用涉及微信JSAPI支付



















，小程序嵌套后功能失效（小程序内置环境不支持JSAPI方式支付                     ，仅支持小程序支付


     



     



     



     

，需后端配合增加小程序支付



















，H5通过jssdk携带支付参数跳转小程序页面   
    
    
    
  ，小程序内接收参数做支付


     


     


     


     
，并且小程序内置支付api可以知道支付状态 




 




 




 




，那么就能完成整个支付业务）

解决：H5调用支付下单接口 — 携带参数跳转到小程序里去完成支付 — 支付后携带参数回跳H5 — H5接收参数判断支付是否成功

<!-- 小程序--> <template> <web-view :src="url"></web-view> </template> <script> export default { data() { return { url: }; }, onLoad(option){ //有支付订单进行支付 if (option.idNo) { const item = JSON.parse(decodeURIComponent(option.data)); this.requestPayment(item); } }, methods: { requestPayment(item) { console.log(item); uni.requestPayment({ provider: wxpay, signType: item.signType || MD5, timeStamp: item.timeStamp, nonceStr: item.nonceStr, package: item.package, paySign: item.paySign, success: res => { // 回跳地址携带支付状态参数   

   

   

   

 ，便于H5判断 // 支付成功 this.url += &payStatus=success; }, fail: err => { // 支付失败 this.url += &payStatus=fail; } }); } } }; </script> // H5 <script> onLoad(option){ if (option.payStatus == ‘success’) { // 支付成功 ........ }else { // 支付失败 ........ } }, methods: { // H5通过jssdk携带支付参数跳转小程序页面 let path = `/pages/webview_pay/webview_pay`;（注意需和小程序内跳转链接页面路径一致） ........ // 接口返回的支付参数 let navigateToData = { timeStamp: response.data.result.timeStamp, nonceStr: response.data.result.nonceStr, package: response.data.result.package, paySign: response.data.result.sign }; let uri = window.location.href.split(#)[0]; //获取当前url; path += `?idNo=${response.data.result.orderNo}&&data=${encodeURIComponent(JSON.stringify(navigateToData))}&&uri=${uri}`; //通过JSSDK的api使小程序跳转到指定的小程序页面 jweixin.miniProgram.getEnv(function(res) { if (res.miniprogram) { jweixin.miniProgram.redirectTo({ url: path }); } else { uni.showToast({ title: error, icon: none }); } }); } </script>

总结

本文简单介绍了小程序web-view与H5的一些交互

     

     

     

     ，若有其他更好的交互方式
  




  




  




  




，欢迎评论区补充

     

     

     

     。

未完待续...