微信小程序web-view内嵌h5，实现双向传参案例

1.微信小程序带参跳转h5代码

.js

Page( {

  data :{

    openid : ' 123456789x '

   },

   onLoad ( options ){

     var  openid = this . data . openid ;

     this . setData( {

      src : ' https://www.wlphp.com/test/test.php?openid= ' + openid

     })

   }

})

.wxml

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

2.h5页面php代码

.php

 <?php print_r($_GET);?>
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<input type="button" value="返回到小程序toolbar"  οnclick="goback()">
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
        function goback(){
                 wx.miniProgram.reLaunch({url: '/pages/sorts/sorts'});
        }
</script>

如果要跳转非toolbar页面可以用 wx.miniProgram.navigateTo

如果带参数可以在url的值后面?id=1传参到小程序

关于小程序内嵌h5支付问题，h5支付不支持，jsapi待研究，native扫码支付可以在h5显示出来二维码，但是无法在页面长按识别二维码支付(不知道后续是否会支持)，可以采用带参数跳转到小程序原生页面，然后调用小程序支付，然后支付完毕再带参数跳转到h5页面的方案。

微信官方的web-view说明文档地址：

https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html